Tools

Calculators (calculators.scss)

In the dev environments, you sometimes need some support for calculations.

Responsive (responsive.scss)

These are the mixins for media queries

Usage

Mixins

Grid (grid.scss)

The grid is a bit unlike the ones you are used to in other big frameworks. Since this is aiming for creating as less style as possible and only ouput the styles you actually uses.

So instead of outputing 100ish lines of predefined column sets and different grid tools that you never use, this grid is a set of placeholders. What you'll do is that you write your styles and semantically give your elements class names, and in the scss, you extend placeholders that fits your needs. Examåles will follow. You can read more about placeholders and extend here.

Containers (grid.containers.scss)

When you need an element to be a flexbox element, vertical direction and aligned center

Placeholders

Usage

Fluid/Fixed (grid.fixedwiths.scss)

If you want a container to be 100% wide up to a certain point, you can extend one of the fixed width placeholders

Placeholders

Usage

Columns (grid.columns.scss)

To set columns, you can set to the columns container how many columns you'd like:

Placeholders

Usage

The above code will work nice, if it's only one direct child element of the container, it will will the width. As you can see on this particular column, that actually uses the code above.