|
1 | 1 | # The Basic Brockmann |
2 | | -A super basic grid framework based off of [Steve Hickey](http://stevehickeydesign.com/)'s own [flexible grid](http://www.slideshare.net/stevehickeydsgn/forget-frameworks-create-your-own-flexible-grid-system). Personally I love [Susy](http://susy.oddbird.net/), but it’s currently tied to the featureset of SASS 3.3+, which [Libsass](https://github.com/sass/libsass) hasn’t yet caught up to. On a recent project I found compiling all my partial files took upwards of 5 seconds. Not wanting to have to add a bunch of compiled partial CSS files to my development site (and then strip them out for production) I switched compilers. |
3 | 2 |
|
4 | | -Unfortunately this necessitated the need for a new (basic) grid system. Unlike Susy it doesn’t (yet?) do the initial math for column and gutter percentages. What it does allow me to do is get up and running with a basic layout quickly and easily, and allow me to make use of Libsass without going back to v1 of [Neat](http://neat.bourbon.io/). |
| 3 | +## Install |
| 4 | +You can [download Brockmann here](https://github.com/jayfreestone/basic-brockmann/archive/master.zip), or [clone the repo](https://github.com/jayfreestone/basic-brockmann). |
| 5 | +Alternatively you can install it using [Bower](http://bower.io): |
5 | 6 |
|
6 | | -Currently setup involves declaring the following variables ahead of time: |
7 | | - |
8 | | - $max-width: 1360px; |
9 | | - $column-width: 6.38298%; |
10 | | - $gutter-width: 2.12766%; |
11 | | - $maximum-columns: 12; |
| 7 | + bower install the-basic-brockmann |
12 | 8 |
|
13 | 9 | ## Setup |
14 | | - |
15 | | -Include `_grid.scss` & `_mixins.scss` in your project, then declare these variables in a preceding file: |
| 10 | +Include `_grid.scss` & `_mixins.scss` in your project, then declare these variables in a preceding file (the values are examples). |
16 | 11 |
|
17 | 12 | $max-width: 1360px; |
18 | 13 | $column-width: 6.38298%; |
19 | 14 | $gutter-width: 2.12766%; |
20 | 15 | $maximum-columns: 12; |
21 | 16 |
|
22 | 17 | ## Usage |
23 | | - |
24 | | -Define the main container with the `%container` placeholder: |
| 18 | +Define the main container with the `%container` placeholder. |
25 | 19 |
|
26 | 20 | .container { |
27 | 21 | @extend %container; |
28 | 22 | } |
29 | 23 |
|
30 | | -Then define the widths of elements with the `col` mixin: |
| 24 | +Then define the widths of elements with the `col` mixin. |
31 | 25 |
|
32 | 26 | main { |
33 | 27 | @include col(8); |
@@ -56,4 +50,42 @@ The final column in a row must be declared by passing in the `omega` flag, or op |
56 | 50 |
|
57 | 51 | The first is preferable as it avoids outputting CSS that will be rewritten. |
58 | 52 |
|
59 | | -Currently when passing in the `omega` flag the parent needs to be declared, ensuing `omega` is the last option passed into the mixin. This would, for instance, not be valid: `@include col(2, omega)`. |
| 53 | +Currently when passing in the `omega` flag the parent needs to be declared, ensuring `omega` is the last option passed into the mixin. This, for instance, would be invalid: `@include col(2, omega)`. |
| 54 | + |
| 55 | +You can break the flow with the `push` mixin. |
| 56 | + |
| 57 | + @include push(left, 1); |
| 58 | + |
| 59 | +The example above will ‘push’ the element one column from the left to the right, essentially adding a left margin equivalent to one column and gutter. |
| 60 | + |
| 61 | +## FAQ |
| 62 | + |
| 63 | +### How do I work out the % values? |
| 64 | +You’re currently on your own here. At the moment Brockmann doesn’t handle the original grid calculations. There are, however, a bunch of grid calculators out there, including [Gridset](https://gridsetapp.com). |
| 65 | + |
| 66 | +### How can I change the grid at various breakpoints? |
| 67 | +You can wrap your styles in a simple media query mixin: |
| 68 | + |
| 69 | + @mixin breakpoint($breakpoint) { |
| 70 | + @media only screen and (min-width: $breakpoint) { @content; } |
| 71 | + } |
| 72 | + |
| 73 | +And then just redeclare the `col` mixin when needed: |
| 74 | + |
| 75 | + .intro{ |
| 76 | + @include col(1, 1, omega); |
| 77 | + |
| 78 | + @include breakpoint(43.750em){ |
| 79 | + @include col(1, 2, omega); |
| 80 | + } |
| 81 | + |
| 82 | + @include breakpoint(62.500em){ |
| 83 | + @include col(2, 4, omega); |
| 84 | + } |
| 85 | + } |
| 86 | + |
| 87 | +### Asymmetry? |
| 88 | +Not yet, although this is something I’m interested in exploring. |
| 89 | + |
| 90 | +### Why should I use Brockmann? |
| 91 | +Because you’re using Libsass, which (at the time of writing) rules out the two well established SASS based grid systems, [Susy](http://susy.oddbird.net) and [Neat](http://neat.bourbon.io). Brockmann is designed to be *super* lightweight and incredibly easy to understand. It’s not a comprehensive system. It’s a set of transparent and reusable mixins that let you built out a pre-conceived grid quickly. |
0 commit comments