|
| 1 | +#The mini Mighty Grid!# |
| 2 | + |
| 3 | +**mini Mighty Grid is 3 grids in one. And all at an overhead of only 1.6k minified without the demo styles! And as low as 323 bytes if you don't need breakpoints!** |
| 4 | + |
| 5 | +- Responsive, 12 column grid |
| 6 | +- Responsive, percentage grid based on known percentages |
| 7 | +- Responsive, floating point grid with any combination of fractions that total 100% |
| 8 | + |
| 9 | +###Requires### |
| 10 | +[Sass](http://sass-lang.com/), CSS extension language. |
| 11 | + |
| 12 | +Note: if you just want the grid with the default breakpoints (480, 768, 960, 1200) and don't want to compile sass, you can grab the mini-mighty-grid.min.css from the css folder and be on your way. |
| 13 | + |
| 14 | +####SCSS Usage#### |
| 15 | +1. Use SASS to compile `/scss/layout.scss` and export to the css directory. Compiling layout.scss will compile all the mixins and settings into a single css file. You can use whatever method is comfortable for you. The command line might look like `scss --watch layout.scss:../css/layout.css --style compressed` |
| 16 | +2. Edit the _site-settings.scss file to suite your needs. |
| 17 | + |
| 18 | +From the `_site-settings.scss` file you can set: |
| 19 | +- `$container` Container width for max-width of the grid container |
| 20 | +- `$row` Maximum row width (usually 100% of container) |
| 21 | +- `$gutter` Gutter width for column based grids. (Can be 0) |
| 22 | +- `$breakpoint-map` edit the breakpoints of each screen resolution. (xl should be set to $container width, but can be changed to something else) |
| 23 | + |
| 24 | +The layout.scss file contains some extra settings for responsive breakpoints. If your using sass to compile, you can take advantage of the breakpoint functions that use the breakpoint map. Note: if you are not using sass to compile, then you need to use the standard css @media responsive declarations. |
| 25 | +``` |
| 26 | +@include respond-to(sm) { |
| 27 | + ... small-to-medium styles here... |
| 28 | +} |
| 29 | +@include respond-to(md) { |
| 30 | + ... medium-to-large styles here... |
| 31 | +} |
| 32 | +@include respond-to(lg) { |
| 33 | + ... large-to-xlarge styles here... |
| 34 | +} |
| 35 | +@include respond-to(xl) { |
| 36 | + ... xlarge-and-above styles here... |
| 37 | +} |
| 38 | +``` |
| 39 | + |
| 40 | +####HTML Usage#### |
| 41 | +**Example of column based layout** |
| 42 | + |
| 43 | +This example would render 1 column for 0 pixels up to medium resolution and 2 columns from medium resolution and above. |
| 44 | +``` |
| 45 | +<div class="content"> |
| 46 | + <div class="row"> |
| 47 | + <div class="col-sm-12 col-md-6"> |
| 48 | + ...content here... |
| 49 | + </div> |
| 50 | + <div class="col-sm-12 col-md-6"> |
| 51 | + ...content here... |
| 52 | + </div> |
| 53 | + </div> |
| 54 | +</div> |
| 55 | +``` |
| 56 | +**Example of percentage based layout** |
| 57 | + |
| 58 | +Unlike the column based grid, the percentage grid doesn't use breakpoints. Instead you must define special classes in your scss/css files and use a special sass function to set teh columns widths. |
| 59 | + |
| 60 | +This example would render a row with the first column 25% width and the second column 75% width. |
| 61 | + |
| 62 | +Note the name of the sass function is colp(). |
| 63 | + |
| 64 | +The HTML |
| 65 | +``` |
| 66 | +<div class="content"> |
| 67 | + <div class="row"> |
| 68 | + <div class="column-a"> |
| 69 | + ...content here... |
| 70 | + </div> |
| 71 | + <div class="column-b"> |
| 72 | + ...content here... |
| 73 | + </div> |
| 74 | + </div> |
| 75 | +</div> |
| 76 | +``` |
| 77 | + |
| 78 | +The sass/css |
| 79 | +``` |
| 80 | +.column-a { |
| 81 | + @include colp(.25); |
| 82 | +} |
| 83 | +.column-b { |
| 84 | + @include colp(.75); |
| 85 | +} |
| 86 | +``` |
| 87 | +**Example of floating point based layout** |
| 88 | + |
| 89 | +The floating point grid works almost exactly like the percentage grid with two exceptions. The widths are expressed in floating point numbers that equal 100% of the total units given and the sass function receives 2 variables. The floating point number and total units. |
| 90 | + |
| 91 | +This example would render a row with the first column 2.4 units out of 7 width and the second column 4.6 units out of 7 width (2.4 + 4.6 = 7 or 100%). You can use any set of units you like as long as the end result is 100% of the 2nd variable. |
| 92 | + |
| 93 | +Note the name of the sass function is colu(). |
| 94 | + |
| 95 | +The HTML |
| 96 | +``` |
| 97 | +<div class="content"> |
| 98 | + <div class="row"> |
| 99 | + <div class="column-a"> |
| 100 | + ...content here... |
| 101 | + </div> |
| 102 | + <div class="column-b"> |
| 103 | + ...content here... |
| 104 | + </div> |
| 105 | + </div> |
| 106 | +</div> |
| 107 | +``` |
| 108 | + |
| 109 | +The sass/css |
| 110 | +``` |
| 111 | +.column-a { |
| 112 | + @include colu(2.4, 7); |
| 113 | +} |
| 114 | +.column-b { |
| 115 | + @include colu(4.6, 7); |
| 116 | +} |
| 117 | +``` |
| 118 | + |
| 119 | +###100% width layouts### |
| 120 | +For 100% width layouts simply use the `.container-fullwidth` style instead of `.container`. This works for all grids. |
| 121 | + |
| 122 | +Example: |
| 123 | +``` |
| 124 | +<div class="content-fullwidth"> |
| 125 | + <div class="row"> |
| 126 | + <div class="col-sm-12 col-md-6"> |
| 127 | + ...content here... |
| 128 | + </div> |
| 129 | + <div class="col-sm-12 col-md-6"> |
| 130 | + ...content here... |
| 131 | + </div> |
| 132 | + </div> |
| 133 | +</div> |
| 134 | +``` |
0 commit comments