Features
Dynamic
Responsive by default, scalable style system, plug-and-play styling for unopinionated components.
Stylish
Sensible defaults, powerful mixins and smart variables. Use the kit or get sassy with Sassy CSS.
Automatic
A browser refreshing, image optimizing, file smushing, build compiling, concatenating code robot.
Examples
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.
GoHobo
Built as a publication and a collection of curated alternative travel resources for adventurers, nomads, vandwellers, explorers and travelers.
Documentation
Layout
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.
Positioning
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. |
Containers
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 |
Elements
Buttons
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.
Inputs
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.
|