stimpleton.

a super simple and fully customizable design system built with sass.

it's responsive

stimpleton is built with mobile in mind, so you won't have to spend tons of time fudging code to make it work.

it's built with sass

stimpleton uses sass, the most preferred of the css preprocessors on the market, which makes it super easy to maintain and build upon.

it's customizable

an easy to edit variables list means you can make stimpleton work with any project or schema you have in mind.

it's really that simple

no fancy syntax means no learning curve to figure out how to implement stimpleton in your project. just install, import, and start coding :).

grid

stimpleton was designed to be flexible, so it comes with a 12-column grid setup out of the box, but is built so you can change from a 12-column layout to pretty much anything else you can think of

the container comes in two flavors, .adaptive and .responsive. .adaptive sets a max-width on the grid, but .responsive is completely fluid. this also means you wont have to worry about setting widths on individual rows.

columns are built completely fluid to give you total power over the layout. stimpleton has built-in offset and padding classes that give total control over row widths and spans.

one
eleven
two
ten
three
nine
four
eight
five
seven
six
six
twelve

stimpleton also has a second naming convention, fractional.

completely interchangable with the normal naming convention, this style is designed with simpler layouts and nesting in mind. based on a 12-column system, you get 2/12 (.sixth), 3/12 (.quarter), 4/12 (.third), 6/12 (.half), and 12/12 (.full), but it's also really simple to add/remove options.

sixth
sixth
sixth
sixth
sixth
sixth
quarter
quarter
quarter
quarter
third
third
third
half
half
full

as mentioned, stimpleton supports nested layouts, with or without a clearfix and also with or without internal gutters for each nested column.

nested-half
nested-sixth
nested-sixth
nested-sixth

offset columns are supported with a built-in .offset-$col class.

four offset-two
one
three offset-two
typography

stimpleton uses the system font stack as its' type base. this is completely optional and can be changed with a simple variable. font-size for each tag is based on the diatonic type scale from ty-p.cc and uses rem units.

canon

h1

6.2 rem

double great primer

h2

4.8 rem

double pica

h3

3.2 rem

double small pica

h1

2.8 rem

great primer
h5
2.4 rem
pica
h6
1.6 rem

english

p

1.9 rem

there are also some helper classes, for when you want/need to modify the font-weight on the fly. all the heading tags come pre-set with $weight variables that you can change, if you so choose.

.text-wt-extralight
.text-wt-light
.text-wt-regular
.text-wt-semibold
.text-wt-bold
.text-wt-black

try stimpleton for your next project