SASS Configuration Overview

Slate has a plethora of variables to help you very quickly build out a website style even before you have written any HTML.

The SASS config is broken down into modules for each distinct area of the framework.

@import "config/config-debug";
@import "config/config-colors";
@import "config/config-grid";
@import "config/config-layout";
@import "config/config-ratios";
@import "config/config-font-stacks";
@import "config/config-typography";
@import "config/config-tables";
@import "config/config-forms";
@import "config/config-buttons";
@import "config/config-validation";
@import "config/config-accessibility";

Colors

@import "config/config-colors";

By default, there are nine colour variables built-in. Three are monochromatic (light, medium, dark), three are primary colours which make up your branding and the final three are positive, negative and warning colours which are used by the form mixins, and for any user feedback messages panels you may need to build. Read more on forms here.

Grid

@import "config/config-grid";

Here is where to set things like the amount of columns in your grid, and the total width of the website. Some common breakpoints are also set in this file. If you need to add more, this is the place to do it. The grid is described in greater detail here.

@import "config/config-layout";

Slate has three really helpful layout mixins - The Gridler, Flank and Holy Grail to help you build common page arrangements.

Font stacks & ratios

@import "config/config-ratios";
@import "config/config-font-stacks";

config-ratios and config-font-stacks are primarily used by the typography engine but you can of course make use of them in your own mixins. Learn more about the typography engine here.

@import "config/config-typography";

A major feature of the framework is excellent support for Typography. It's powerful and really flexible. It's capable of using px and rem units. You can even mix them, or generate one or the other. Learn more about configuring type here.

Tables

@import "config/config-tables";

Slate has a built in skin for tables, but you don't have to use it if you don't want to. It is mixin driven and you can use this file to configure the style of the table.

Forms & Validation

@import "config/config-forms";
@import "config/config-validation";

Another major feature is solid support for quickly producing HTML forms, complete with validation states by either using classes or native HTML 5 validation. Learn all about it here.

Buttons

@import "config/config-buttons";

Consistent buttons are hard. Slate has some mixins built in to help you do it, and you can use this file to configure them. All the information on this can be found here.

Accessibility

@import "config/config-accessibility";

BETA - this feature will be more fully fleshed out in due course. For now, this is limited to setting a focus colour for elements that can be tabbed onto with the keyboard.

Built with the Best

Slate was built by Hash&Salt, a company who loves building for the internet. Using the very best in industry leading software and practices honed over the last 20 years in the industry. You're in good hands.