Consensass

Configurable UI Components with Sass

Configuration and Theming

Normalize

This project uses Normalize to reset all styles. It's imported at the top of your consensass.scss file. Don't forget to npm install before using this.

Breakpoints

$_breakpoints: (
    m:  481px,
    l:  769px,
    xl: 1025px
);
 
@include breakpoints($_breakpoints);

SASS doesn't allow to dynamically set variable names, so I'll stick with 3 breakpoints right now: Grid uses s, m, l and xl. Those last three have defined breakpoints, s is basically min-width: 0px. You can set custom breakpoints in $_breakpoints or pass a different variable with a breakpoints map. If you're feeling extra adventurous, you can set the map straight in the @include.

If none are set, there's always the fallback breakpoint defaults.

Theming

Coming soon

Grid

.grid{
    @include grid("col", 12, 1.5rem);
}

Grid comes with defaults: a grid of 8 childs named "col", each with a gutter of 16px. This is the equivalent of: @include grid("col", 8, 16px);

If you want to set the breakpoints in one go, just pass the variable or map as the fourth variable, but you'll still have to set the rest as well. So set up your breakpoints like this: @include grid("col", 8, 16px, $_breakpoints);

I'm still weighing the pro/con for using a map as an alternative.

Usage

If your grid is set up like above, then using it could look like this:

<div class="grid">
    <div class="col-s-12-m-6-l-4">
        <h1>Tron</h1>
    </div>
    <div class="col-s-12-m-6-l-4">
        <h1>Tron: Legacy</h1>
    </div>
    <div class="col-s-12-m-12-l-4">
        <h1>Tron: Uprising</h1>
    </div>
</div>

The div with "grid" functions as the container for your columns "col". Each breakpoint has a maximum width of 12, but you can use anything in between. This example shows you the Tron movies and TV-show in their respective columns. They're sorted underneath eachother on mobile, the movies next to eachother (and the TV-show underneath) on tablets and all next to eachother on laptops and extra-large screens.

Using the suffixes -s-#, -m-#, -l-#,-xl-# you can set each breakpoint for a width # of 12. Only using -s-# will default the width to all breakpoints. Skipping s-# will sort your columns underneath eachother on mobile phones, so we can optimize our example like this:

<div class="grid">
    <div class="col-m-6-l-4">
        <h1>Tron</h1>
    </div>
    <div class="col-m-6-l-4">
        <h1>Tron: Legacy</h1>
    </div>
    <div class="col-l-4">
        <h1>Tron: Uprising</h1>
    </div>
</div>

Skipping a breakpoint will use a small breakpoint when available. If you want to sort the movies next to eachother on both phones and tablets, you could do this:

<div class="grid">
    <div class="col-s-6-l-4">
        <h1>Tron</h1>
    </div>
    <div class="col-s-6-l-4">
        <h1>Tron: Legacy</h1>
    </div>
    <div class="col-l-4">
        <h1>Tron: Uprising</h1>
    </div>
</div>