Just a sass based css flex-grid framework boilerplate type-of-thing. Helper classes, responsive typography and some wp_autoclass stuff to boot.

h1 Franzen Chambray

h2 Trust fund subway

h3 Irony edison bulb poke

H4 Excepteur freegan exercitation godard

h5 VHS hashtag esse, cred ea aliquip vexillologist locavore.

paragraph text -- Art party humblebrag yr, adipisicing af organic ea offal duis laboris vinyl hell of. Nisi cardigan enim kale chips offal man bun live-edge tbh sriracha austin single-origin coffee lyft. Organic nostrud portland exercitation pabst lyft. Raw denim live-edge knausgaard ea. Master cleanse street art selfies drinking vinegar. Commodo cornhole jean shorts, meditation literally elit green juice.

small text -- useful for captions and whatnot.

Coloring book adipisicing

Coloring book adipisicing

h4 .darkgrey 90's authentic sriracha you probably haven't heard of them venmo adaptogen pop-up cardigan.

Heirloom tote bag retro asymmetrcal live-edge cold-pressed. Semiotics stumptown, yuccie art party health goth DIY cillum gentrify YOLO 3 wolf moon fugiat esse. Gastropub culpa roof party, cupidatat YOLO fanny pack williamsburg photo booth nisi lumbersexual. Trust fund raw denim flannel pabst blog, meggings la croix four loko skateboard tousled mumblecore venmo vegan bitters


iceland. Squid butcher sint, poke cold-pressed everyday carry enim in venmo. Iceland kinfolk tempor esse occaecat. Tote bag sint tilde, trust fund fixie swag listicle. Coloring book adipisicing cronut, copper mug irure distillery lo-fi readymade banh mi marfa mixtape pop-up excepteur ullamco sustainable. Chia ad pop-up, woke swag air plant pickled. PBR&B aesthetic everyday carry fashion axe air plant nulla flexitarian fugiat 90's. Id jean shorts pickled sint trust fund etsy , chia commodo consequat scenester occupy kinfolk deserunt man braid.

okay, so what's going on here then?

okay, so what's going on here then?

This is my style-sheet spill, it's a sass based responsive boilerplate, utalizing flex-box with loads of usefull helper classes to streamline workflow.

More flexible... smaller... easier classes... and you can hack it from the outset so if you want your h1 red, you can just type it and spill won't hold you back

You can download the source files at... github

*as you can see I love ellipsis...
tied-up ...this is not me


This is rerally the only place you need to change anything in spill

All the variables that effect how the css class's output

Global width and breakpoints, typography, padding/margins, links and color scheme

Responsive Typography

  • sass mixin converts px to rem
  • rem are responsice to the html set font-size
  • html font-size changes at breakpoints making the global typography responsive
  • As with all settings... season to taste

Flex-Box Grid

  • A classic 12 grid sytem
  • Set up a a container div with .flex-row and off you go
  • Add responsive sizes to flex items sml-12 med-4 lrg-6
  • Align the items or self with predesigned classes

↪ Padding & Margin

Easy access classes make it easy to finness your layout

includes vertical and/or horizontal padddin/marging

Helper Classes

Simple classes to help take the sting out of grunt work

Text, color, backgrounds, borders, display with simple go-to easy class names

Wordpress Compatable

Slides in as part of your WP theme nice and easy and also has the wp auto-classes covered so your on the level