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

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

quarter

third

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

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

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

stimpleton.