Trends

What is the Foundation for Sites Framework?

In part one, we used Foundation for Apps to build a simple RSS viewer layout. Its Flexbox approach made arranging the layout a snap — but that’s only part of the story. Now we need to promote that product, and we’ll use Foundation for Sites to make it happen.

Foundation for Apps addresses the growing need for app-like interfaces: panels, motion, scalability and interaction. As the “original” Foundation, however, Foundation for Sites edition stands on a familiar grid of floats and clears. It uses designer-friendly jQuery instead of developer-friendly Angular. Overall, Foundation for Sites helps designers build more conventional websites.

Here’s a diagram of the single-page site we’ll build:

sample layout

Downloading Foundation for Sites

The Foundation for Sites framework  comes with several different configurations.

  • The whole thing, including more than 35 components, grid and default CSS.
  • Essentials only, which include the grid, typography, and form elements.
  • Custom download, in which you pick and choose what your product needs.

All of that is fine — but it’s plain CSS. If you want to really control Foundation for Sites, you need the Sass version.

In the app.scss file you control what gets compiled into your project. You can turn parts on and off on a whim. App.scss is also where you write your custom styles that override Foundation’s defaults — it’s a basis, after all. A starting point.

You also get a _settings.scss file with tons of variables that let you completely bend Foundation to your will.

Only use what you need

You don’t have to import everything in Foundation. Control what gets included or not in the app.scss file. In this case, we only need a few components, so we disable @import "foundation"; which includes everything and the kitchen sink. Then we uncomment the parts we want. The streamlined app.scss file looks like this:

@import "settings";
// @import "foundation";

// Or selectively include components
@import
//   "foundation/components/accordion",
//   "foundation/components/alert-boxes",
//   "foundation/components/block-grid",
//   "foundation/components/breadcrumbs",
//   "foundation/components/button-groups",
//   "foundation/components/buttons",
//   "foundation/components/clearing",
//   "foundation/components/dropdown",
//   "foundation/components/dropdown-buttons",
//   "foundation/components/flex-video",
//   "foundation/components/forms",
"foundation/components/grid",
"foundation/components/inline-lists",
//   "foundation/components/joyride",
//   "foundation/components/keystrokes",
//   "foundation/components/labels",
//   "foundation/components/magellan",
//   "foundation/components/orbit",
//   "foundation/components/pagination",
//   "foundation/components/panels",
//   "foundation/components/pricing-tables",
//   "foundation/components/progress-bars",
//   "foundation/components/reveal",
//   "foundation/components/side-nav",
//   "foundation/components/split-buttons",
//   "foundation/components/sub-nav",
//   "foundation/components/switches",
//   "foundation/components/tables",
//   "foundation/components/tabs",
//   "foundation/components/thumbs",
//   "foundation/components/tooltips",
"foundation/components/top-bar",
"foundation/components/type";
//   "foundation/components/offcanvas",
//   "foundation/components/visibility";

Above: The app.scss file with Foundation’s grid, typography and top-bar active.

Edit settings in … well, settings.

The aptly-named _settings.scss file controls practically every aspect of Foundation’s components: Every color, every size, every bit of information. It’s mostly disabled by default, leaving you free to change only what you need.

For example, a components use a series of colors. If you turn these on, you can keep your brand colors consistent.

$primary-color: #ff3700;
$secondary-color: #fc9200;
$alert-color: #f04124;
// $success-color: #43AC6A;
// $warning-color: #f08a24;
// $info-color: #a0d3e8;

Above: Foundation comes with six colors used throughout the project. They’re kept around line 119 in the _settings.scss file.

Tailor the Grid to Your Needs

As a mobile-first framework, Foundation for Sites’s grid defaults a mobile layout. It’s easy to override with a few variables in _settings, circa line 82.

$row-width: rem-calc(1000); // number of pixels wide each row is
$total-columns: 12; // number of columns per row
$column-gutter: rem-calc(30); // number of pixels between each column

By default, the grid is 12 columns and 1,000 pixels wide. We’ll keep the 12 but make the widescreen view 1,400 pixels wide.

$row-width: rem-calc(1400);

Now we’ll build the layout itself. Foundation for Sites uses a nestable, mobile-first grid. Rows contain columns, which optionally contain more rows. You can nest as many as you need — but for this example, we only need one set.

<header>
  <div class="row">
    <div class="small-12 columns">
      <img />
      <h1>Title goes here</h1>
    </div>
  </div>
</header>

<main>
  <div class="row">
    <div class="medium-4 columns">
      <img src="#" alt="sample icon"/>
      <p>Descriptive text Descriptive text Descriptive text Descriptive text </p>
    </div>
    <div class="medium-4 columns">
      <img src="#" alt="sample icon"/>
      <p>Descriptive text Descriptive text Descriptive text Descriptive text </p>
    </div>
    <div class="medium-4 columns">
      <img src="#" alt="sample icon"/>
      <p>Descriptive text Descriptive text Descriptive text Descriptive text </p>
    </div>
  </div>
</main>


<div class="row testimonial">
  <div class="medium-2 medium-push-2 columns">
    <img src="#" alt="Photo of a happy customer"/>
  </div>
  <div class="medium-8 columns">
    <blockquote>“Testimonial testimonial testimonial 
    testimonial testimonial testimonial 
    testimonial testimonial.”</blockquote>
  </div>
</div>


<div class="row">
  <div class="blog medium-6 columns">
    <h2>Headline headline</h2>
    <p>Blog post Blog post Blog post Blog post 
    Blog post Blog post Blog post Blog post.</p>
  </div>
  <div class="info medium-6 columns">
    <ul>
      <li>Information information information </li>
      <li>Information information information </li>
      <li>Information information information </li>
      <li>Information information information </li>
      <li>Information information information </li>
    </ul>
  </div>
</div>


<footer>
  <div class="row">
    <div class="medium-12 columns">
      <nav>
        <ul class="inline-list">
          <li><a href="#">Home</a></li>
          <li><a href="#">Archives</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </div>
  </div>
</footer>

Notice medium-# throughout the code. That controls how many columns wide each div will be in, say, tablet-sized screens and larger. Without specifying small-#, Foundation assumes each element will display full-width. The grid also has large-# classes that only take effect on desktop-esque displays. You can edit the media query ranges in _settings.scss starting on line 151.

One more thing: This site will use Foundation’s top bar component for its navigation. Top bar collapses nicely on mobile, so the markup is straightforward:

  <nav class="top-bar" data-topbar role="navigation">
    <ul class="title-area">
      <li class="name">
        <h1><a href="#">Sample site</a></h1>
      </li>
      <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
    </ul>

  <section class="top-bar-section">

    <!-- Left Nav Section -->
    <ul class="left">
      <li><a href="#">About</a></li>
      <li class="has-dropdown">
        <a href="#">Products</a>
        <ul class="dropdown">
          <li><a href="#">Product 1</a></li>
          <li><a href="#">Product 2</a></li>
          <li><a href="#">Product 3</a></li>
          <li><a href="#">Product 4</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </li>
    </ul>
  </section>
</nav>

Download the entire file.

Add the content, and we’re well on the way.

The result is a mobile-optimized website that promotes the RSS viewer we built with Foundation for Apps.

The Foundation family are starting points for building two types of products: Apps and Sites. We’ll continue to develop both in parallel to help you make awesome digital products.

Download the Source Files

Did you know that there is a huge selection of Foundation Themes & Templates available on ThemeForest?


Ben Gremillion

About the Author Ben Gremillion

Ben is a writer at ZURB. He started his career in newspaper and magazine design, saw a digital future, and learned HTML in short order. He writes tutorials and facilitates the ZURB University training courses.