Getting Started With Sass

Sass is the easiest way to customize Foundation!


Three Easy Ways to Get Started

Setting up Foundation 5 Sass is quick and easy!

We recommend using the Command Line Interface. We've perfected the command line for quick and easy power, but you can use Foundation with just the files or other applications, like Mixture or CodeKit.



What You'll Need

You'll want to install the following on your system before proceeding:

Git

Git is GitHub's version control system, this install basically commands the tools you'll use in the command line to work within GitHub.

Download Git →


NodeJS

Node allows JavaScript to run outside of the browser, and is necessary for Bower to package all the files into the project and link them together.

Download NodeJS →


Ruby 1.9+

We wrote a Ruby script that downloads the Sass files and scaffolds the project. If you have a Mac, you probably already have Ruby installed.

Download Ruby →


How to Install the CLI

Using the CLI to install Foundation 5 only takes two easy commands. You only have to install the CLI once. Don't want to read? Check out this video we made to help you out.

1

We use Bower to manage updates to Foundation and the third-party libraries that Foundation is built on.

npm install -g bower grunt-cli

2

Installing the Foundation CLI on your computer only takes one command function.

gem install foundation


Note: If you run into permission errors running these commands in the CLI, you can add the word 'sudo' before the line inside the interface:

sudo npm install -g bower grunt-cli
sudo gem install foundation



Compiling Sass into CSS & Creating a Project

Sass is a great way to speed up front-end development.

SCSS (Sassy CSS) syntax was introduced as "the new main syntax" for Sass and builds on the existing syntax of CSS. We created a SCSS version to allow more friendly and dynamic styling. This version also allows for greater customization than the HTML/CSS version. There are two easy ways our CLI helps you compile SCSS: Compass or Libsass with Grunt.


Creating a Compass Project

1

If it's not installed yet, you can install it using the following command:

gem install compass

2

Next we'll use the Foundation CLI to create a new project:

foundation new MY_PROJECT

3

Boom, your project is created! Now Foundation will be easy.

cd MY_PROJECT

4

Be sure to run compass watch in order to make changes.

compass watch


Creating a Libsass Project

1

First, navigate into the directory where you want to create your project:

cd path/to/sites

2

Next we'll use the Foundation CLI to create a new project:

foundation new project_name --libsass

3

Boom, your project is created! Now you need to use Grunt to compile everything before you start working:

cd project_name
grunt build

4

Be sure to run grunt in order to make changes.

grunt


How to Update

Once you have Foundation installed updating your file is easy.

1

Specify the version you want to update to in your bower.json file.

See an example →

2

To update, 'cd' into the project folder in the CLI and the run 'bower update.'

bower update

Note: To verify the update has been made, you can see the version number in the bower.json file located in the bower-components folder under foundation.

See an example →


Install Foundation Manually

You can download our SCSS files and get set up to harness the power of Foundation without the CLI if you want. Here's how:

  • First you will need to clone or download the master zip of the Foundation Compass Template from Github. This will be the root of your project.
  • Then you will create a directory called bower_components.
  • The next step is to clone or download the master zip of the bower-foundation repo in that directory.
  • Then rename this directory to "foundation"

Note: Alternatively you can place this somewhere else or move the files around.

  • Just update your config.rb so that the add_import_path reflects the change i.e. add_import_path "bower_components/foundation/scss"
  • Then add jQuery and update the link in index.html to a local copy that you can download from the jQuery site.

Upgrade Manually With Compass

You'll need to install NodeJS and Bower before updating with Compass.

Note: You can install bower by running the following command:

npm install -g bower

We use bower to keep Foundation assets up to date within your project. Here's how you can update your project:


1

First, you need create a file named bower.json in the root of your Compass project. This should contain the following:

{
    "name": "PROJECT_NAME",
    "dependencies": {
       "foundation": "~5.1.0"
    }
}

2

Next you will run bower install.

bower install

This will create a directory called bower_components/ in your project. Foundation's Sass and JavaScript files will be placed in the bower_components/foundation folder.

Check out what you get with the Sass download package. →


Third Party Applications

If you want a more hands-off and simple build of Foundation you can use these platforms to code with Foundation.


Mixture

Get started quickly and build faster with Foundation using Mixture.io.

Publish your project online. It’s as easy as one click. Share your published URL, password protect, get feedback, client sign-off or even add your own domain and host your site.

Learn More

CodeKit

A Mac app that allows you to build websites faster with Foundation.

With zero setup and Bower built right into the system, CodeKit can compile any language with one click updates. From auto-refresh browsers to built-in minifiers, CodeKit has everything inside to help you get started.

Learn More

Cactus

Build your websites locally with the ease and flexibility of Foundation.

Using Cactus allows you to put the components of your website together with your local server without having to set up a server environment like Ruby. You can use it on your Mac to compile your SASS, start building templates, or for directing visual feedback.

Learn More

What's Next?

Now that you have Foundation Sass installed, check out the awesome stuff you get and how to use it.

What You Get

The complete package! We'll cover the important files that are included when you download Sass and where to make customizations.

See What's Inside →


How to Use

Harness SCSS's variable features easily through the included _settings.scss file. We cover important tips on the settings file, writing sass, and using mixins.

Find Out How →


Global Styles

Every Foundation project needs to include these styles in order to work properly. These include things like basic formatting and global utility classes.

Take a Look →

Stay on top of what’s happening in responsive design.

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »