Foundation, our responsive framework, began as an internal tool to quickly bang out products. It didn't have a "look" because we kept using it on different projects, keeping only the most common design elements. Even today, we work hard to make it super customizable. Still, some sites have a certain Foundation-esque quality.

The idea of a "starting point" is crucial. No two Foundation sites should ever look the same, so we built in ways to edit just about everything. Here's how to bend Foundation to your will with Sass variables.

Some background

Previously we introduced you to some basic commands in the Mac command line interface (a.k.a. the Terminal). Now let's recap the basics of Sass.

Sass is a language we use to create CSS files. It looks like CSS, but with loops, variables, functions, includes … most everything you'd expect from a scripting language. We use preprocessors like Libsass and Compass to turn Sass into CSS. Every time you save a Sass file, these terminal-based apps compile into CSS files on the fly. It's like Photoshop's save-for-web command, but automatic.

A Sass-based Foundation for Sites project comes with a few important files:

• app.scss — Where you'll write your project's unique Sass code. It's also where you decide which parts of Foundation's Sass to include in your project.
• _settings.scss — A file with all the variables Foundation uses. You'll use this to override every aspect of Foundation you want. We include many premade variables for you to edit.

What is the Foundation "look"?

That's easy to define. We even have an example. Characteristics include:

• Square buttons with laser-sharp edges.
• Thin Proxima Nova or Helvetica, or other thin sans-serif type family. These don't come packaged with Foundation, but are indicative of the look.
• Certain shades of blue (and red and green).
• Recognizable navigation and UI component patterns.
• 12 columns, 1,000 pixels wide on widescreen computers.

So let's address those points one by one.

1. Base font size changes more than text

Foundation uses rems as its unit of measure. That includes typography, spacing, and the grid. Now, by definition rems are based on the HTML element's font size. If the font size is, say, 12pt, then 1.5rem is 18pt. Change the base font size to 9pt and 1.5rem becomes only 13.5pt. 

Change $base-font-size to resize everything in your project. If you only want to change headings, the grid, body copy, list items, etc., then look to the Typography section of _settings.scss instead.

You'll find $base-font-size on line 13 of _settings.scss as of Foundation v5.4.

2. Body classes affect the entire design

A few other variables are just as wide-reaching.

$body-bg: Background of the body — line 127

Basic text gets four self-explanatory variables, lines 128 – 131:

• $body-font-color
• $body-font-family
• $body-font-weight
• $body-font-style

These use font family stacks, defined on lines 90 – 92:

• $font-family-sans-serif
• $font-family-serif
• $font-family-monospace

Choosing which type families to use is a great way to make your site look unique — as long as you don't trade unique for readable.

3. Change the colors for a whole new look

Foundation has a distinctive color palette. The fastest way to not look like Foundation is to edit your site's colors.

• $primary-color: The dominant color controls links, link hovers, button backgrounds, panel callouts, progress meters, top-bar links — 21 elements altogether.
• $secondary-color: <code> element backgrounds, secondary buttons, and a handful of others.
• $alert-color: Warning messages and a bit of the progress meter.
• $success-color: Submit buttons and switches.

Two other colors exist, but are seldom used.

• $warning-color: This variable doesn't apply to anything by default. It's there in case we need a less dire version of alert.
• $info-color: Likewise, this variable exists in case we need a "pay attention!" color.

4. Edit the grid to meet your needs

The grid isn't limited to 12 columns at 1,000 pixels wide. Look around line 76 to change:

• row-width: rem-calc(1000) : The number of pixels wide (in this case, 1,000). Rem-calc() is a function that translates pixels based on the base-font-size mentioned above. We typically use 1,400 pixels for our large breakpoint. Although, you should use analytics to determine how big your users' screens are.
• $total-columns : There is no limit to the number of columns a row can contain, although we recommend a dose of common sense. For example, 100 columns is a bit silly.
• $column-gutter: rem-calc(30) : The space between columns, also derived from base-font-size.

5. Edit breakpoints to fit different devices

The points at which small, medium and large grids take effect are controlled by media queries. Starting on line 153 you'll find ranges: how wide a browser's window must be to trigger different parts of the grid.

Browsers' support for media queries is a little odd. While we can control everything else with rems, media queries use ems. 

Going forward

You can control just about anything in Foundation with the _settings.scss file. Base font size, color, the grid and breakpoints are four of the fastest ways to make your Foundation site look unique.

---