This is a completely responsive, fluid grid system. Rooted in a century of typography and executed through the basic math of the Golden Ratio, consistent behavior of layout elements removes a vast majority of questions pertaining to "how will this look on mobile?"
The end of communicating in pixels as we know it. Set the font size for the application, the rest is all relative. Columns and baselines - that's all you get.
There's a pre-established structure for layout, from highest to lowest level. Any kind of modifications would simply be nested SASS classes pertaining to these structural elements. The structure is fairly simple, and goes in this order:
You can utilize the columns by generating layouts. There's a
Sass mixin built in that does all the calculations for you,
including offset-x and wide-x classes! Just call the
mixin by using:
@include column-calculator(x)
Where X is the number of columns you want. Each column layout e.g.
"columns-2", "columns-4", etc., exists solely to give
style context to a "column" div.
Part of the Compass library, the vertical-rhythm mixin sets vertical padding and margin based on the calculated baseline heights. An example might look like this:
@include rhythm (0, 0, 1, 0, 16px)@include rhythm (0, 0, 1, 0, $base-font-size*1.2)Each argument in the mixin sets rhythm values in the following order:
Rather than calling a font-size for each element, you can just use the adjust-font-size-to mixin to set the font size in pixels and designate its line height relative to the established baseline. An example would look like this:
@include adjust-font-size-to(16px,1)@include adjust-font-size-to($base-font-size*1.2,1)If you call one of these mixins, vertical-rhythm or adjust-font-size-to, be sure to call them both, even if it's to pass all 0's. This will assure that all page elements are aligned to the baseline grid.
Break points for various screen sizes are established at 320, 640, 1280, and 2560 pixels from mobile to desktop respectively. These sizes are established as variables titled:
@media (min-width: $width-mobile)@media (min-width: $width-tablet)@media (min-width: $width-desktop-small)@media (min-width: $width-desktop-large)You can set these variables to your liking in the _global-elements.sass partial. Be sure that media queries are called in this order from smallest to largest!
If you've never used Compass, SASS, or a Grid System before, don't worry. It's sort of tough at first, but just remember that the whole thing is built on a pattern. The more exceptions you make to the pattern, the harder it becomes to maintain. Just be patient and experiment - you'd be surprised what you might find!
designed & developed by Mike Else