A simple, starting point for website projects.



Responsive by default, scalable style system, plug-and-play styling for unopinionated components.


Sensible defaults, powerful mixins and smart variables. Use the kit or get sassy with Sassy CSS.


A browser refreshing, image optimizing, file smushing, build compiling, concatenating code robot.


Who's using Slim Starterkit?

The Idea

TheIdea is a digital web studio based in Montréal. They work with growing companies to build digital strategies through websites and applications.


Built as a publication and a collection of curated alternative travel resources for adventurers, nomads, vandwellers, explorers and travelers.



A simple grid. Flexible and responsive.

Build dynamic columns using the .col class, or definitive widths by suffixing col with your width, like .col-30.

Wrap your columns in a .row class, with optional gutters (.row-gutters).

There are even classes like .responsive-sm, to break the grid at specific breakpoints.


Based on a simple $space variable, and a set of helper classes, positioning your elements with padding or extra margin is as easy as adding a class. In this case, $space is equal to 1em.

Side Class Description
All .pad / .mar Space all the things.
Horizontal .pad-h / .mar-h Space the left and right.
Vertical .pad-v / .mar-v Space the top and bottom.
Top .pad-t / .mar-t Space the top.
Bottom .pad-b / .mar-b Space the bottom.
Left .pad-l / .mar-l Space the left.
Left .pad-l / .mar-l Space the right.


Container classes based on the pre-defined and project-customizable breakpoints.

Container Max-width Class
Extra Large 1880px ($bp-xl) .container-xl
Large 1260px ($bp-lg) .container-lg
Medium 1024px ($bp-md) .container
Small 760px ($bp-sm) .container-sm
Extra Small 520px ($bp-xs) .container-xs



Simple button styles, with a couple useful utility classes make these buttons suitable for [most of] your needs.

Simply add the class .btn-u-lg to your existing button class for a nice big call-to-action.

For a button that will span the width of its container, add the class .btn-u-block.


Color System

Color Type SCSS Variable Description
Primary $color-primary Used for actionable items
Primary 300 $color-primary-300 Slightly lighter shade of primary. Used for alternate states (hover, etc).
Primary 100 $color-primary-100 Lightest shade of primary. Used for shading and mixing.
Highlight $color-highlight Used to highlight important things.
Light $color-light Your favourite shade of white.
Black $color-black Your favourite shade of black.
Dark $color-dark Your favourite shade of black with a hint of primary.
Success $color-success Successful things.
Danger $color-danger Your favourite shade of error.
Gray 500 $color-gray-500 Also known as $color-dark.
Gray 400 $color-gray-400 Lighter shade of $color-gray-500.
Gray 300 $color-gray-300 Lighter shade of $color-gray-400.
Gray 200 $color-gray-200 Lighter shade of $color-gray-300.