Using Foundation with Moovweb

This tutorial illustrates how to integrate ZURB Foundation with your Moovweb project! Foundation is a Sass framework that provides you with an array of styles and JavaScript right out of the box. It’s similar to Twitter Bootstrap, Groundwork, jQuery UI, and many other popular UX frameworks.

Here’s a screenshot of what you’ll get right out of the box:

Foundation Recipe

This course will give you some tips on how to get started using Foundation and the additional functionality that comes with the Foundation Scaffold recipe.

Outline


Getting Started

First, upgrade your Moovweb SDK to the latest version. (This tutorial will work with Moovweb SDK version 4.5.72 or later.)

Start the Developer Dashboard and generate a project for our example site, igadgetcommerce.com. Use the advanced Foundation option, and include the templates.

Using Moovweb 4.7 or earlier to generate the project?

If you are creating a project from the command-line, the command would look as follows:

moov generate --recipe=foundation-scaffold myproject igadgetcommerce.com

Now cd into your projects folder and start the server with sudo moov server (or just moov server for Windows users).

Once you start the project, and view it running locally in a browser, you’ll see Foundation is starting to work for you right out of the box!

Foundation

Foundation is an open-source third-party framework that offers a variety of tools that make it easier to build engaging user experiences. This includes grids, navigation, buttons, forms, typography, CSS components, JavaScript widgets, and more. Another fun fact about Foundation: it’s the 12th most popular repository on GitHub!

We chose Foundation specifically because it uses Sass which means it integrates smoothly into the Moovweb SDK, but you could choose any similar third-party framework and use it in the same way.

If you’re wondering, “What’s Sass?”, it’s a CSS pre-compiler. Take a look at our Sass documentation or visit the Sass project website to find out more about the advantages Sass offers to boost developer productivity.

Foundation Package

The Foundation Package in the Generator comes pre-packaged with some useful styles, JavaScript, and Tritium functions to use right out of the box.

You’ll notice in the assets/stylesheets/globals folder, there is a foundation folder that has all the styles associated with the Foundation framework.

You’ll also find, in the functions folder, a foundation.ts file that defines a number of functions related to setting up Foundation widgets and components. We’ll be using these functions later to transform our site.

What should I do with my desktop styles?

Usually when you start a project, you’ll have to make a decision on whether or not to remove the existing site’s styles.

If you aren’t moving elements around much, you can actually leave the desktop styles in place and just add an inline media query to your desktop CSS files such as:

<link rel="stylesheet" type="text/css" media="only screen and (min-width: 980px)" href="styles.css">

You could add this attribute using Tritium by selecting the link element and using the attribute() function.

$("//link[contains(@href, 'styles.css')]") {
  attribute("media", "only screen and (min-width: 980px)")
}

While it’s generally easier to remove existing styles, this is definitely a useful techniques on certain sites.

Creating a Responsive Web Design Menu

For example, to create a responsive menu that displays all options on a wide screen but hides the options behind a thumb button on a small screen, you could use the tbar() function in your scripts/sections/header.ts file, which will insert a <nav class="top-bar"> element. Next, you can populate that element with the tbar_title() and tbar_section() functions.

foundation.tbar() {
  foundation.tbar_title("Moovweb", "", "menu-icon")
  foundation.tbar_section("right") {
    insert("li") {
      insert("a", "Docs", href: "#")
    }
    insert("li", class: "divider")
    insert("li") {
      insert("a", "Tutorials", href: "#")
    }
    insert("li", class: "divider")
    insert("li") {
      insert("a", "Sign In", href: "#")
    }
  }
}

It would look something like this:

Foundation Menu

In fact, that’s already been done for you as an example in the Foundation package. But these placeholders don’t do anything, and just link to a bare anchor; they’re just included to show you how the function can be used.

Remember, for most sites, you’ll be using the move_here() function to move existing content into the proper place rather than using the insert() function to create all this new content.

Here is a list of functions that come with the Foundation Scaffold recipe:

Creating a Fluid Grid

To create a fluid grid, you’ll simply need to add the class "row" to your container element and then add the relevant size classes to the children elements that you want to resize based on the viewport.

In our scaffold, you’ll notice that on a small viewport the child elements have the class "small-6" which means they take up 6 out of 12 grid spots in the row (meaning you’ll have two elements per row).

# Foundation Grids
insert("div", id: "image_row", class: "row") {
  insert("div", class: "small-6 large-3 columns") {
    ...

On a large viewport, the child elements have class "large-3" which means you’ll have four elements per row.

Check out the Foundation Documentation for more details on grid structure.

Creating a Joyride Tour

When you first loaded the “Foundation Scaffold”, you should have been taken on a brief joyride tour that included instructions on how to use the scaffold.

Joyride Tour

These kinds of tours can be useful for orienting your first-time users and providing them with some temporary guidance on everything your site has to offer.

You can find the code we used to create this at the bottom of the home.ts page.

# Joyride Tutorial
foundation.joyride() {
  foundation.joyride_item("header") {
    insert("p", "Hello and welcome to Moovweb!")
  }
  foundation.joyride_item("image_row") {
    insert("h4", "Step #1")
    inject("<p>You can make your site responsive by filling in the template provided for you using the <code>move_here()</code> function.</p>")
  ...

Use the joyride() function to create your wrapper object, then use the joyride_item() function to create your steps. If you have a specific area where you’d like your step to be positioned, pass it the ID of the nearest element to that position.

Techniques Using Foundation and Sass

Sass Variables

An important file to notice is the _variables.scss file in the assets/stylesheets/globals/foundation folder. Here, you can configure your Foundation variables such as colors, padding, breakpoints, and so forth.

Try changing the $topbar-menu-icon-color variable to "red". This is what you should see:

Sass Variables

Foundation provides you with a ton of variables to choose from so they won’t be covered in this lesson, but feel free to explore on your own.

Media Queries

To perform media queries, we’ve provided you with some mixins in the _responsive.scss file in the assets/stylesheets/globals folder.

Take a look at _home.scss to see an example of how to use a media query mixin to define styles just for mobile:

.row {
  .small-6 {
    @include mobile() {
      width: 100%;
    }
    ...

On mobile, the elements with the class "small-6" will have a width of 100%.

Here is another example for styling any viewport size from small tablets to desktop:

.image {
  @include small-tablet-desktop() {
    border-radius: $border_radius;
    border: $border_gray3;
    box-shadow: 0 0 3px 0 $gray6;
    text-align: center;
    ...

Here is a list of media queries that come with the Foundation Scaffold recipe:

Media Query Mixins:

Since Foundation uses a “mobile first” approach, you can style for mobile using these media queries and once those styles are implemented, work your way back up towards the look and feel of the original desktop site.

Note that the breakpoints we’ve provided for you are at 480px, 767px, and 980px. This should handle most if not all your viewport sizes and can be always be adjusted if necessary.

Visibility Classes

The _responsive.scss file also contains visibility classes that you can add to elements to tell them on what viewport sizes you want them to be visible (note that Foundation has similar visibility classes that you can use instead).

You can add visibility classes to your elements using Tritium:

$$("#footer") {
  add_class("large-tablet-desktop")
}

Now the footer will only appear on large tablets and desktops. It will also disappear on the portrait mode of a large tablet device.

Here is a list of visibility classes that come with the Foundation Scaffold recipe:

Visibility Classes: