Configuring Slate

Slate is a Swiss army knife. Build anything. Build it fast. Learn how to make it adapt to your workflow right here.

yarn add @slateengine/slatesass @slateengine/slatesasskits

Colors

Slate has a set of colour variables ready to go that control all of its features. You can quickly change the look of a site by changing and adding to these variables.

Grid System

One grid to rule them all. Slates Grid system is powerful and flexible enough to build just about anything.

Font Stacks

A collection of pre-defined font stacks, all setup so you don't have to.

Ratios

Common mathematical ratios of use with the modular type engine or in your mixins.

Tables

HTML tables can be fiddly to skin. In combination with the table mixin, these config variables make this job a breeze.

Buttons

Buttons are a tried and tested way to enable users to get around your site and make decisions. Learn how to control them right here.

Forms

Go beyond the defaults and make HTML forms work they way you want them to. Learn how to set up forms with this guide.

Typography

Setup beautiful typography with ease, using scalable ratios and a collection of mixins.