Foundation

Unlock the Power of Sass

We're dedicated to maintaining Foundation using Sass (the Scss syntax to be exact) and we want to make it the best it can be. Sass gives us the ability to let you choose what parts to import or how it looks.

Mixins & Functions

We wrote some awesome mixins and function that you can use for semantic grids, CSS triangles and more! These can be used on any project in conjunction with mixins provided by Compass or some you create yourself!


Semantic Grid Mixins

Are you tired of adding extra divs just to include classes for building your grid? We are too! Our semantic grid mixins will help you write more semantic markup. Here's how they work:

Mixin Syntax Description Options
@include outerRow(); Create container rows to start the grid.
@include innerRow(options); Create nested rows, but they must be inside a column. collapse
Collapse the margins of an inner row.
@include column(#, options); Create columns inside of a row.
Must contain number.
center
Center columns within the row.

collapse
Collapse column gutter for post/pre-fix elements.
@include offsetBy(#); Offset columns to the right.
Must contain number.
@include push(#); Source ordering to push columns to the right.
Must contain number.
@include pull(#); Source ordering to pull columns to the left.
Must contain number.
@include mobileRow(); Create a row that appears only on mobile.
@include mobileColumn(#); Create mobile columns inside mobile rows.
Must contain number.
@include mobilePush(#); Source ordering to push mobile columns to the right.
Must contain number.
@include mobilePull(#); Source ordering to pull mobile columns to the left.
Must contain number.
Markup Example

<header>
  <aside></aside>
  <section>
    <article>
      <header></header>
      <div></div>
    </article>
  </section>
</header>
Scss Example

header { @include outerRow();
  aside { @include column(4); }
  section { @include column(8);
    article { @include innerRow();
      header { @include column(2); min-width: 0; }
      div { @include column(10); }
    }
  }
}

Modular Scale

The typography in Foundation is set to a specific modular scale, which you can update in your _settings.scss file. In order to utilize the scale, you must follow the correct syntax.


Function Description
ms(#); This function calculates the number of your scale for you based on its step (1, 2, 3, 4, etc).

.element { font-size: ms(0); /* 0 = first in scale, 1,2,3 and so on... */ }

Font Size
Older usage pattern, still works fine.

If you feel like breaking out of the modular scale or not using the provided function, you can use our font-size mixin!


Function Description
@include font-size(size); Outputs px and rem for the number you include!

.element { @include font-size(18); }

Clearfix

We use this mixin for our grid and semantic grid mixins. It will employ the classic clearfix style for making sure thing clear correctly.


Function Description
@include clearfix() Make sure your element clears everything in the flow.

.element { @include clearfix(); }

CSS Triangles

If you are unfamiliar with CSS triangles, learn more here. We use them all over in foundation for things like the arrows in dropdowns and pips on tooltips flyouts.


Function Description
@include cssTriangle() Adds a css triangle to your element.

.example { @include cssTriangle(5px, #fff, bottom); }

See What We've Got

Foundation includes many pre-styled elements for you to use on your projects. The great thing about our styles is that they are easily overridden or built upon. We like to stay out of the way when it comes to building a styleguide for your project.
Check out our components »

Grab the copy of Foundation best for you, whether that's Scss or CSS, everything or just bits and pieces.

Install Foundation

Awesome product jobs:
via ZURBjobs