Get started with Zurb’s Foundation 6 for Sites on Windows with SCSS (Sass)

The Foundation Framework is one of the most popular web development frameworks available. It’s responsive, easily customized, and is very well documented by both Zurb and the community. This makes it one of the most powerful frameworks. The best way to take advantage of Foundation is by leveraging SCSS (Sassy Cascading Style Sheet). I’ll go over what’s required within Windows to begin your first web development project using Foundation. 

What is Foundation?

Foundation is an amazing responsive framework built on HTML, CSS, and jQuery for developing websites, applications, and marketing material. It allows you to quickly and easily develop a mobile-first template which includes predefined content and navigation components. One of the best features of Foundation is the ability to use SaSS to easily make customizations to CSS. SCSS (commonly referred to as SaSS) provides the ability to use variables within CSS. One variable defines a value for multiple CSS properties. If you’ve never used SCSS before, don’t worry – I’ll cover it all and it will make more sense once you dive in.

I highly recommend checking out the Foundation Kitchen Sink for a quick look at Foundation’s default but easily customized styling. You can find out more about Foundation by visiting Zurb’s website. I highly recommend reading a quick write-up on Sass Basics from sass-lang.com. It explains Sass in plain English. It should make sense as long as you know the basics of CSS and a little markup.

What do I need to get started with Foundation and SCSS?

A few console-based tools can get you started in just a few minutes. I’ll cover where to download the following tools.

• Windows 7, 8, 10, Linux, OSX (this guide only covers Windows)
• Git
• Node.JS
• Foundation-CLI

Prerequisites

Git

The following steps assume you will be using Git from the Windows Command Prompt. Don’t worry if you’re not sure what this means.

1. Download Git for Windows from the Git website. Select either the 32-bit or 64-bit version.
2. Launch the installer.
3. Navigate through the installer accepting the defaults until you reach the Adjusting your PATH environment page. Select the option to “Use Git from the Windows Command Prompt” and click Next.
4. On the Configuring the line ending conversions page, select “Checkout Windows-style, commit Unix-style line endings” and click Next.
5. On the Configuring the terminal emulator to use with Git Bash page, select “Use Windows’ default console window” and click Next.
6. Continue through the installation accepting the defaults and to complete the installation of Git.

Node.JS

1. Download the latest stable release of Node.JS for Windows from the Node.JS website.
2. Launch the installer, accept all defaults, and finish the installer.

Foundation-CLI

The foundation-cli is a set of command-line tools for creating, watching, and building foundation projects.

1. Launch the Command Prompt (cmd.exe).
2. Type the command “npm install –global foundation-cli” and press enter.
3. The Foundation Command Line Interface will now download and install.

Start your first Foundation project

1. Launch a command prompt (cmd.exe).
2. Change directory to your development working directory (for example, C:\Projects).
3. Type the command “foundation new” and press enter.
4. The Foundation New Project application to start. Using your keyboard’s arrow keys, select “Foundation for Sites” and press enter.
5. Give the project a name such as “MyFirstFoundationSite” and press enter.
6. Next I suggest selecting the option to use the “Basic Template”. It provides everything you need to get started. The neccessary files for your foundation project will now be downloaded.
7. Change directory to the project name, “cd Foundation” (or whichever name you specified in step 5).
8. Type the following command “foundation watch”. This will launch the watch processor. At this point any modifications to SaSS components in the project’s directory will be detected and injected into the CSS files.

At this point you can now manually browse to your project’s directory. Open the example index.html file and begin playing around. I highly suggest start by changing some of the colour pallet, such as primary and secondary colours, in /scss/_settings.scss. Watch the command prompt pick up the changes, write those changes to your CSS files, and then re-load the index.html file.

Some people prefer to use their own style sheet to override a framework’s default styles. However this can be frustrating when some Foundation styles can be deeper than ones you specify in your own style sheets causing the Foundation styles to take precedence. Remember, the last style applied is not always the style to take precedence. If it’s a global change, make the change to the SCSS and avoid the frustration.