Using the Sass Version of Foundation

Start using Foundation the way you want, with more control than ever before. We've made it really easy to install using Compass so you'll need a little bit of knowledge before you get going. Visit the Compass and Sass sites to learn the basics if you don't already know them.

Recommended Installation

To create your first project using our Compass extension, you'll need to have the zurb-foundation gem installed. This will install Foundation and all necessary dependencies. Here's the command that will do this for you:

[sudo] gem install zurb-foundation

Note: Make sure ZURB isn't all caps.

---

Creating your first project

Compass makes it really easy to start a new project. Since you've installed the Foundation gem by now, you now have Compass, Sass and a few other necessary dependencies available at your fingertips.

Follow these two steps to get going:

1. cd path/to/where-you-want-your-project
2. run compass create <project-name> -r zurb-foundation --using foundation

---

Working with Existing projects

There are a couple situations to cover here. You might be adding Foundation to an existing project that wasn't build with Foundation or you might be upgrading Foundation for an already created Foundation Compass project.

Adding Foundation to existing Compass projects

If you've created a project using Compass, but didn't require the Foundation gem, you'll need to install it separately. When you do this you'll get all the necessary files on top of the ones you already have. If something is a duplicate, Compass will ignore it. The steps you'll take to properly install Foundation are:

1. Add require "zurb-foundation" to your config.rb file
2. cd path/to/your-project
3. run compass install foundation

---

Creating a project from Git

Sometimes you want to checkout what we've got even before we decide to deploy a release candidate. For these situations, you can install using Bundler.

There are a few different ways to do this, but here's what we recommend:

1. Setup a Foundation project folder: mkdir ~/awesomeapp
2. Create a Gemfile with this content:
   source :rubygems
   gem "zurb-foundation", :git => "git@github.com:zurb/foundation.git"
   gem "compass"
3. Then run: touch ~/awesomeapp/Gemfile
4. Change into your application directory: cd ~/awesomeapp
5. Create a project using Bundler: bundle exec compass create . -r zurb-foundation --using foundation
6. When you're working on your project, run: bundle exec compass watch

---

Foundation Global Settings and Mixins

We've inlcluded a global settings file that holds veriables and mixins that are used throughout the entirety of Foundation. Here's a look at that file:

<%= code_example ' // Foundation Global Function, Variables and Mixins // // Variables // // This is the default html and body font-size for the base em value. $em-base: 16px; // We use these to control various global styles $body-bg: #fff; $body-font-color: #222; $body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; $body-font-weight: normal; $body-font-style: normal; // We use this to control font-smoothing $font-smoothing: antialiased; // We use these to control text direction settings $text-direction: ltr; // We use these as default colors throughout $primary-color: #2ba6cb; $secondary-color: #e9e9e9; $alert-color: #c60f13; $success-color: #5da423; // We use these to make sure border radius matches unless we want it different. $global-radius: 3px; $global-rounded: 1000px; // We use these to control inset shadow shiny edges and depressions. $shiny-edge-size: 0 1px 0; $shiny-edge-color: rgba(#fff, .5); $shiny-edge-active-color: rgba(#000, .2); // We use this to control whether or not CSS classes come through in the gem files. $include-html-classes: true; $include-print-styles: true; // // Functions // // Working in ems is annoying. Think in pixels by using this handy function, emCalc(#px) @function emCalc($pxWidth) { @return $pxWidth / $em-base * 1em; } // Creating rems and pixels @function remCalc($pxWidth) { @return $pxWidth / $em-base * 1rem; } // Grid Calculation for Percentages @function gridCalc($colNumber, $totalColumns) { @return percentage(($colNumber / $totalColumns)); } // // Mixins // // We use this to control border radius. @mixin radius($radius:$global-radius) { @if $radius { -webkit-border-radius: $radius; border-radius: $radius; } } // We use this to create equal side border radius on elements. @mixin side-radius($side, $radius) { @if $side == left { -webkit-border-radius: $radius 0 0 $radius; border-radius: $radius 0 0 $radius; } @else if $side == right { -webkit-border-radius: 0 $radius $radius 0; border-radius: 0 $radius $radius 0; } @else if $side == top { -webkit-border-radius: $radius $radius 0 0; border-radius: $radius $radius 0 0; } @else if $side == bottom { -webkit-border-radius: 0 0 $radius $radius; border-radius: 0 0 $radius $radius; } } // We can control whether or not we have inset shadows edges. @mixin inset-shadow($active:true) { -webkit-box-shadow: $shiny-edge-size $shiny-edge-color inset; box-shadow: $shiny-edge-size $shiny-edge-color inset; @if $active { &:active { -webkit-box-shadow: $shiny-edge-size $shiny-edge-active-color inset; box-shadow: $shiny-edge-size $shiny-edge-active-color inset; } } } // We use this to add transitions to elements @mixin single-transition($property:all, $speed:300ms, $ease:ease-out) { -webkit-transition: $property $speed $ease; -moz-transition: $property $speed $ease; transition: $property $speed $ease; } // We use this to add box-sizing across browser prefixes @mixin box-sizing($type:border-box) { -moz-box-sizing: $type; -webkit-box-sizing: $type; box-sizing: $type; } // We use this to create equalateral triangles @mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) { content: ""; display: block; width: 0; height: 0; border: solid $triangle-size; @if ($triangle-direction == top) { border-color: $triangle-color transparent transparent transparent; } @if ($triangle-direction == bottom) { border-color: transparent transparent $triangle-color transparent; } @if ($triangle-direction == left) { border-color: transparent transparent transparent $triangle-color; } @if ($triangle-direction == right) { border-color: transparent $triangle-color transparent transparent; } } // We use this to do clear floats @mixin clearfix() { *zoom:1; &:before, &:after { content: " "; display: table; } &:after { clear: both; } } ', :css %>