One Code to Rule Them All
I think this is a well-rounded starter for most projects.
This isn’t a boilerplate or framework. It’s just some stuff I find myself inevitably using in all projects, so I packed ‘em up neat in a box.
What's in the box! (click each for explenation)
- Declare a root font size of 10px - Make math easy
- I don't like math. I also don't like em units, except in certain situations where their cascade adds simplicity, rather than chaos. rem units reference the root font size, so 1rem has the same value everywhere, regardless of context. With a root font size of 10px, math is easy. 1.6rem will always = 16px
- Fix the crazy CSS box model - Set everything to border-box
- Effectively changes borders & padding to inset, so they don't add dimension to a defined height/width. 100px width + 10px padding + 2px border = 100px. Border-box is set on the html element and everything else inherits it. Unless for some strange reason a different box-sizing is defined later on, the new crazy setting will cascade to it's crazy children.
- Media query mixin/SASS map for quickly targeting breakpoints
There's also an extra feature naming non-standard queries (effectively adding them to the map), so you can reference them elsewhere if needed (probably not a good practice... but still useful)..
- Color variable SASS map and function
This is a useful mixin for referencing some centralized color variables in a SASS Map. The nesting nature of the map also helps encourage more clear standards for color variations.
I learned this technique from [Jake Albaugh](http://codepen.io/jakealbaugh/post/using-sass-functions-to-access-complex-variable-maps).
- Justified Grid
There are tons of grid frameworks. Some are good, most are bad. The one is just simple.
The idea is to harness the powers of paragraph justification, for natural equal space between elements (gutters).
When element widths add up to less than 100%, blank space naturally flows between them for equal distribution across the entire line/row. When elements add up to more than 100%, they automatically wrap to the next line, like words at the end of a paragraph. No messy margin mischief. No extra mark up. Grid 'cells' don't have to be wrapped in container rows. The rows create themselves through natural flow.
This also keeps the markup clean, and free of circumstantial grid classes, like "grid-4-of-12", which is really 6-of-12 at a certain breakpoint, but 12-of-12 at another... but who's counting?? Justified grids can be managed entirely with mixins, and kept in the CSS where they belong.
The only downside, if there is any, is blank space in the mark up throws off the justification. But setting the font size of the main container to zero solves this. For me, this is a non-issue because I typically use rem units anyway.
My version is tailored for how I work, but more details and a neat grid builder can be found at justifygrid.com