Sass

Compatibility

Foundation for Sites can be compiled with Ruby Sass and libsass. We tend to stick to the latest versions of both compilers when possible. Our documentation and starter project are compiled with node-sass, a Node port of libsass. We recommend these versions of either compiler:

• Ruby Sass 3.4+
• node-sass 3.4.2+ (libsass 3.3.2)

Autoprefixer Required

We don't include vendor prefixes in our Sass files—instead, we let Autoprefixer handle it for us. Our build process uses gulp-autoprefixer, but there are other versions that work with Grunt, Rails, Brunch, and more.

To get the proper browser support, use these Autoprefixer settings:

autoprefixer({
  browsers: ['last 2 versions', 'ie >= 9', 'android >= 4.4', 'ios >= 7']
});

Loading the Framework

If you're using the CLI to create a project, the Sass compilation process is already set up for you. If not, you can compile our Sass files yourself, or drop in a pre-built CSS file.

To get started, first install the framework files using favorite package manager like npm or yarn.

npm install foundation-sites --save

Compiling Manually

Next, add the framework files as an import path. How you do this depends on your build process, but the path is the same regardless: packages_folder/foundation-sites/scss

Here's an example using grunt-contrib-sass:

grunt.initConfig({
  sass: {
    dist: {
      options: {
        loadPath: ['node_modules/foundation-sites/scss']
      }
    }
  }
});

If you're using Compass, open your project's config.rb and add the import path there:

add_import_path "node_modules/foundation-sites/scss"

Finally, add an @import statement to the top of your primary Sass file. Refer to Adjusting CSS Output below to learn how to control the CSS output of the framework.

@import 'foundation';

You're also going to want a settings file for your project, which will allow you to modify the default styles of Foundation. Download the latest settings file here, add it to your project as _settings.scss, then import it before Foundation itself.

@import 'settings';
@import 'foundation';

Using Compiled CSS

The Foundation for Sites npm package includes pre-compiled CSS files, in minified (compressed) and unminified flavors. If you're interested in editing the framework CSS directly, use the unminified file. For production, use the minified version.

<link rel="stylesheet" href="node_modules/foundation-sites/dist/css/foundation-sites.css">

<link rel="stylesheet" href="node_modules/foundation-sites/dist/css/foundation-sites.min.css">

Adjusting CSS Output

Foundation outputs many classes for its various components. These help developers get up and running quickly. However, when you move to production, you may wish to build your grid semantically, replace our pre-built classes with your own, or remove components entirely.

Each component has an export mixin which prints out the CSS for that component. If you're cool with having everything, you just need one line of code:

@include foundation-everything;

Our starter projects include the full list of imports, making it easy to comment out the components you don't need. A full list is also included below.

@import 'foundation';

// Global styles
@include foundation-global-styles;
@include foundation-forms;
@include foundation-typography;

// Grids (choose one)
@include foundation-xy-grid-classes;
// @include foundation-grid;
// @include foundation-flex-grid;

// Generic components
@include foundation-button;
@include foundation-button-group;
@include foundation-close-button;
@include foundation-label;
@include foundation-progress-bar;
@include foundation-slider;
@include foundation-switch;
@include foundation-table;
// Basic components
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-callout;
@include foundation-card;
@include foundation-dropdown;
@include foundation-pagination;
@include foundation-tooltip;

// Containers
@include foundation-accordion;
@include foundation-media-object;
@include foundation-orbit;
@include foundation-responsive-embed;
@include foundation-tabs;
@include foundation-thumbnail;
// Menu-based containers
@include foundation-menu;
@include foundation-menu-icon;
@include foundation-accordion-menu;
@include foundation-drilldown-menu;
@include foundation-dropdown-menu;

// Layout components
@include foundation-off-canvas;
@include foundation-reveal;
@include foundation-sticky;
@include foundation-title-bar;
@include foundation-top-bar;

// Helpers
@include foundation-float-classes;
// @include foundation-flex-classes;
@include foundation-visibility-classes;
// @include foundation-prototype-classes;

The Settings File

All Foundation projects include a settings file, named _settings.scss. If you're using the CLI to create a Foundation for Sites project, you can find the settings file under scss/ (basic template) or src/assets/scss/ (ZURB template). If you're installing the framework standalone using npm, there's a settings file included in this package, which you can move into your own Sass files to work with.

Every component includes a set of variables that modify core structural or visual styles. If there's something you can't customize with a variable, you can just write your own CSS to add it.

Here's an example set of settings variables. These change the default styling of buttons:

// Default padding for button.
$button-padding: 0.85em 1em !default;

// Default margin for button.
$button-margin: 0 $global-padding $global-padding 0 !default;

// Default fill for button. Is either solid or hollow.
$button-fill: solid !default;

// Default background color for button.
$button-background: $primary-color !default;

// Default hover background color for button.
$button-background-hover: scale-color($button-background, $lightness: -15%) !default;

// Default font color for button.
$button-font-color: #fff !default;

// Default alternative font color for button.
$button-font-color-alt: #000 !default;

// Default radius for button.
$button-radius: 0 !default;

// Default sizes for button.
$button-sizes: (
  tiny: 0.7,
  small: 0.8,
  medium: 1,
  large: 1.3,
) !default;

// Default font size for button.
$button-font-size: 0.9rem !default;

// Default opacity for a disabled button.
$button-opacity-disabled: 0.25 !default;