├── stylus ├── _fg_breakpoint.styl ├── _fg_grid.styl └── README.md ├── sass ├── _fg_breakpoint.scss ├── _fg_grid.scss └── README.md └── README.md /stylus/_fg_breakpoint.styl: -------------------------------------------------------------------------------- 1 | // Override as required. 2 | _fg_small ?= 768px // up to "tablet" size 3 | _fg_medium ?= 1024px // up to "desktop" size 4 | _fg_large ?= 1280px // up to bigger desktop size 5 | 6 | _fg_breakpoint(_fg_media) 7 | if unit(_fg_small) == '' 8 | _fg_small = unit(_fg_small, px) 9 | if unit(_fg_medium) == '' 10 | _fg_medium = unit(_fg_medium, px) 11 | if unit(_fg_large) == '' 12 | _fg_large = unit(_fg_large, px) 13 | if _fg_media == small 14 | @media only screen and (min-width: _fg_small) 15 | {block} 16 | else if _fg_media == medium 17 | @media only screen and (min-width: _fg_medium) 18 | {block} 19 | else if _fg_media == large 20 | @media only screen and (min-width: _fg_large) 21 | {block} 22 | else if type-of(_fg_media) == 'unit' 23 | if unit(_fg_media) == '' 24 | _fg_media = unit(_fg_media, px) 25 | @media only screen and (min-width: _fg_media) 26 | {block} 27 | -------------------------------------------------------------------------------- /sass/_fg_breakpoint.scss: -------------------------------------------------------------------------------- 1 | // Override as required. 2 | $_fg_small: 768px !default; // up to "tablet" size 3 | $_fg_medium: 1024px !default; // up to "desktop" size 4 | $_fg_large: 1280px !default; // up to bigger desktop size 5 | 6 | @mixin _fg_breakpoint($_fg_media) { 7 | $small: $_fg_small; 8 | $medium: $_fg_medium; 9 | $large: $_fg_large; 10 | 11 | @if unitless($_fg_small) { 12 | $small: $_fg_small * 1px; 13 | } 14 | @if unitless($_fg_medium) { 15 | $medium: $_fg_medium * 1px; 16 | } 17 | @if unitless($_fg_large) { 18 | $large: $_fg_large * 1px; 19 | } 20 | 21 | @if $_fg_media == small { 22 | @media only screen and (min-width: $small) { @content; } 23 | } 24 | @else if $_fg_media == medium { 25 | @media only screen and (min-width: $medium) { @content; } 26 | } 27 | @else if $_fg_media == large { 28 | @media only screen and (min-width: $large) { @content; } 29 | } 30 | 31 | @else if type-of($_fg_media) == number { 32 | @if unitless($_fg_media) { 33 | $_fg_media: $_fg_media * 1px; 34 | } 35 | @media only screen and (min-width: $_fg_media) { @content; } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # The Simplest Flexbox grid ever! 2 | 3 | This is a set of simple CSS preprocessor mixins meant to provide a basic grid for your websites. 4 | 5 | 6 | See a demo and play with it: 7 | 8 | * [Sass Demo (Codepen)](http://codepen.io/aaronjamesyoung/pen/yezKpj) 9 | * [Stylus Demo (Codepen)](https://codepen.io/narkoleptika/pen/eMJyjW) 10 | 11 | ## The basics 12 | 13 | This repo provides a mixin called `_fg()`. You can use this mixin on a grid *container*. It will distribute the child elements of that container into a grid layout as specified in the mixin. 14 | 15 | The mixin accepts three arguments: 16 | 17 | 1. Number of columns OR layout 18 | 2. Width of gutter between grid columns 19 | 3. Amount of padding in grid columns 20 | 21 | You are able to do some interesting stuff, e.g.: 22 | 23 | * Set an arbitrary number of columns in your container. The columns will be of equal width by default. 24 | * Set a custom layout (e.g., three columns of 1x, 3x, and 2x width) in your container 25 | * Override width (or other properties) of a particular column as needed 26 | * Columns will wrap in a container. For example, if you specify a three column layout but provide six columns in the markup, you'll get a second row of columns using the correct layout. 27 | 28 | **Choose Sass (scss) or Stylus below to view detailed usage instructions:** 29 | 30 | * [Sass](/sass) 31 | * [Stylus](/stylus) 32 | 33 | ## Getting it 34 | 35 | After cloning this repository, you'll find the relevant sass or stylus files in their respective directories. 36 | 37 | ## Credits 38 | 39 | * [Roland Toth](https://github.com/rolandtoth) augmented the original mixin to accept a layout; taught me a couple cool SCSS tricks I wasn't aware of 40 | * [Jayesh Saraf](https://github.com/SarafJayesh) supplied a breakpoint mixin 41 | * [Narkoleptika](https://github.com/Narkoleptika) provided the Stylus port 42 | -------------------------------------------------------------------------------- /stylus/_fg_grid.styl: -------------------------------------------------------------------------------- 1 | // Global variables: 2 | // Specify a gutter and padding amount using any CSS units you'd like 3 | // if unitless, interpreted as pixels (e.g., _fg_gutter ?= 24) 4 | _fg_gutter ?= 24px // gutter between columns. Set as desired. 5 | _fg_padding ?= 12px // padding for column boxes. Set as desired, can override for individual columns. 6 | 7 | 8 | // *** Main mixin to create a per-row layout *** // 9 | _fg(colList, gutter = _fg_gutter, padding = _fg_padding) 10 | // If gutter/padding is unitless, give it px units 11 | if unit(gutter) == '' 12 | gutter = unit(gutter, px) 13 | if unit(padding) == '' 14 | padding = unit(padding, px) 15 | 16 | if length(colList) > 1 17 | // Count how many columns there are altogether 18 | columnCount = 0 19 | for c, i in colList 20 | columnCount += c 21 | 22 | _fg_grid(columnCount, gutter, padding) 23 | 24 | for c, i in colList // set child item widths using nth:child() 25 | & > :nth-child({length(colList)}n + {i + 1}) 26 | _fg_width(c / columnCount, gutter) 27 | else // call _fg_grid() directly 28 | _fg_grid(colList, gutter, padding) 29 | 30 | 31 | // *** Set up grid with equal width columns *** // 32 | _fg_grid(cols = 0, gutter = _fg_gutter, padding = _fg_padding) 33 | box-sizing border-box 34 | display flex 35 | flex-wrap wrap 36 | margin-left (-1 * gutter) 37 | > * 38 | if padding != 0 39 | padding padding 40 | margin-left gutter 41 | box-sizing border-box 42 | > * 43 | calc_percent = (1 / cols) * 100% 44 | width "calc(%s - %s)" % (calc_percent gutter) 45 | 46 | 47 | // *** width override for a column *** // 48 | _fg_width(ratio, gutter = _fg_gutter) 49 | if unit(gutter) == '' 50 | gutter = (gutter)px 51 | calc_percent = ratio * 100% 52 | width "calc(%s - %s)" % (calc_percent gutter) 53 | -------------------------------------------------------------------------------- /sass/_fg_grid.scss: -------------------------------------------------------------------------------- 1 | // Global variables: 2 | // Specify a gutter and padding amount using any CSS units you'd like 3 | // if unitless, interpreted as pixels (e.g., $_fg_gutter: 24 !default;) 4 | $_fg_gutter: 24px !default; // gutter between columns. Set as desired. 5 | $_fg_padding: 12px !default; // padding for column boxes. Set as desired, can override for individual columns. 6 | 7 | 8 | // *** Main mixin to create a per-row layout *** // 9 | @mixin _fg($colList, $gutter: $_fg_gutter, $padding: $_fg_padding) { 10 | // If gutter/padding is unitless, give it px units: 11 | @if unitless($gutter) { 12 | $gutter: $gutter * 1px; 13 | } 14 | @if unitless($padding) { 15 | $padding: $padding * 1px; 16 | } 17 | 18 | @if type-of($colList) == number { // call _fg_grid() directly 19 | @include _fg_grid($colList, $gutter, $padding); 20 | } @else if type-of($colList) == list and length($colList) > 1 { 21 | // Count how many columns there are altogether 22 | $columnCount: 0; 23 | @each $i in $colList { 24 | $columnCount: $columnCount + $i; 25 | } 26 | 27 | @include _fg_grid($columnCount, $gutter, $padding); 28 | 29 | @for $i from 1 through length($colList) { // set child item widths using nth:child() 30 | $c: nth($colList, $i); 31 | & > :nth-child(#{length($colList)}n+#{$i}) { 32 | @include _fg_width($c/$columnCount, $gutter); 33 | } 34 | } 35 | } 36 | } 37 | 38 | 39 | // *** Set up grid with equal width columns *** // 40 | @mixin _fg_grid($cols: 0, $gutter: $_fg_gutter, $padding: $_fg_padding) { 41 | box-sizing: border-box; 42 | display: flex; 43 | flex-wrap: wrap; 44 | margin-left: (-1 * $gutter); 45 | 46 | > * { 47 | @if $padding != 0 { 48 | padding: $padding; 49 | } 50 | margin-left: $gutter; 51 | box-sizing: border-box; 52 | } 53 | 54 | $calc_percent: (1/$cols) * 100%; 55 | 56 | > * { width: calc(#{$calc_percent} - #{$gutter}); } 57 | } 58 | 59 | 60 | // *** width override for a column *** // 61 | @mixin _fg_width($ratio, $gutter: $_fg_gutter) { 62 | @if unitless($gutter) { 63 | $gutter: $gutter * 1px; 64 | } 65 | 66 | $calc_percent: $ratio * 100%; 67 | width: calc(#{$calc_percent} - #{$gutter}); 68 | }; 69 | -------------------------------------------------------------------------------- /stylus/README.md: -------------------------------------------------------------------------------- 1 | # The Simplest Stylus / Flexbox grid ever! 2 | 3 | This is a set of simple Stylus mixins meant to provide a basic grid for your websites. 4 | 5 | 6 | See a demo and play with it: 7 | 8 | ## Grid mixin usage 9 | 10 | This repo provides a mixin called `_fg()`. You can use this mixin on a grid 11 | *container*. It will distribute the child elements of that container into a grid 12 | layout as specified in the mixin. 13 | 14 | The mixin accepts three arguments, which I'll explain below: 15 | 16 | 1. Number of columns OR layout 17 | 2. Width of gutter between grid columns 18 | 3. Amount of padding in grid columns 19 | 20 | Let's break it down, starting with the simplest usage. 21 | 22 | ### Sample HTML 23 | 24 | ```html 25 |
26 |
Column 1
27 |
Column 2
28 |
Column 3
29 |
Column 4
30 |
Column 5
31 |
Column 6
32 |
Column 7
33 |
34 | ``` 35 | 36 | ### Default settings 37 | 38 | ```styl 39 | _fg_gutter ?= 24px // gutter between columns. Set as desired. 40 | _fg_padding ?= 12px // padding for column boxes. Set as desired, can override for individual columns. 41 | ``` 42 | 43 | *(Previously these settings were unitless, to be interpreted as pixels. Now you can set these to any units you prefer. If you don't specify a unit, it will still be interpreted as pixels by the mixin)* 44 | 45 | You can override these settings as desired for your project (they can also be custom-set any time you call the `_fg()` mixin, but we'll get to that in a second). 46 | 47 | ### Specify number of columns 48 | 49 | ```styl 50 | .grid_container 51 | _fg(3) 52 | ``` 53 | 54 | Here we passed a single number (3) to the grid mixin. This gives us a three-column 55 | layout. Each `
` will use 1/3 of the width of the grid container. The rows 56 | will wrap - given the above markup, there will be two full rows and Column 7 57 | will be on a third row by itself. 58 | 59 | ### Helper mixin: `_fg_width()` 60 | 61 | The above usage is helpful, but we might want to make an exception - perhaps we 62 | want a layout with a main content area (2/3 width) and a sidebar (1/3 width). 63 | We can override width on a specific column like this: 64 | 65 | ```styl 66 | .column_1 67 | _fg_width(2/3) 68 | ``` 69 | 70 | However, we can write a layout more efficiently using the `_fg()` mixin as below: 71 | 72 | ### Specify per-row layout of columns 73 | 74 | Basically, this combines the two above usages. 75 | 76 | ```styl 77 | .grid_container 78 | _fg(1 3 2) 79 | ``` 80 | 81 | The first argument to the mixin can also be a *list* - a set of space-separated 82 | numbers. This will set up three columns of varying widths. The above mixin is 83 | equivalent to calling: 84 | 85 | ```styl 86 | .grid_container 87 | _fg(6) // 1+3+2=6 88 | .grid_container > div:nth-child(3n+2) 89 | _fg_width(3/6) // second column in each row 90 | .grid_container > div:nth-child(3n+3) 91 | _fg_width(2/6) // third column in each row 92 | ``` 93 | 94 | Thus, each row will have three columns at 1/6 width + 3/6 width + 2/6 width. This 95 | should make it easy to set up flexible layouts. 96 | 97 | Also note that these two statements are equivalent: 98 | 99 | ```styl 100 | .grid_container 101 | _fg(3) 102 | ``` 103 | 104 | ```styl 105 | .grid_container 106 | _fg(1 1 1) // does the same thing! 107 | ``` 108 | 109 | ### Set a custom gutter width 110 | 111 | ```styl 112 | .grid_container 113 | _fg(3, 45px) 114 | ``` 115 | 116 | ```styl 117 | .grid_container 118 | _fg(1 3 2, 45px) 119 | ``` 120 | 121 | Each example above sets a gutter of 45px between each column. 122 | 123 | ### Set custom padding inside columns 124 | 125 | ```styl 126 | .grid_container 127 | _fg(2 2 1 1, 45px, 30px) 128 | ``` 129 | 130 | This sets a custom padding of 30px inside each of the columns specified. 131 | 132 | ### A couple more examples all together 133 | 134 | ```styl 135 | _fg(2 2 1 1) 136 | // four columns in each row; 137 | // 1/3 + 1/3 + 1/6 + 1/6 in each row 138 | // Uses default settings for grid width and padding inside column elements 139 | ``` 140 | 141 | ```styl 142 | _fg(5, 20px, 10px) 143 | // Five equal columns in each row 144 | // 20px gutters between each column (overriding the default) 145 | // each column has 10px padding (overriding the default) 146 | ``` 147 | 148 | ```styl 149 | _fg(2 1, 60px, 0) 150 | // 2/3 + 1/3 columns in each row 151 | // 60px gutter between columns 152 | // columns will have no padding 153 | ``` 154 | 155 | ## Breakpoint mixin usage 156 | 157 | Breakpoints can be defined as: 158 | 159 | ```styl 160 | _fg_small ?= 768px // If units are not specified, treated as pixels 161 | _fg_medium ?= 1024px 162 | _fg_large ?= 1280px 163 | 164 | +_fg_breakpoint(small) // or medium or large 165 | ``` 166 | 167 | This is a pretty standard `min-width` breakpoint mixin, so you can write your code mobile-first 168 | and move up: 169 | 170 | ```styl 171 | body 172 | background red 173 | _fg(1) // on the smallest screens 174 | +_fg_breakpoint(small) 175 | _fg(2) // tablet size 176 | +_fg_breakpoint(medium) 177 | _fg(4) // desktop size 178 | ``` 179 | 180 | Of course you may set the pixel numbers to whatever you prefer. 181 | 182 | You may also pass the breakpoint as an arbitrary width: 183 | 184 | ```styl 185 | +_fg_breakpoint(600) // evaluates to "@media (min-width: 600)" 186 | ``` 187 | -------------------------------------------------------------------------------- /sass/README.md: -------------------------------------------------------------------------------- 1 | # The Simplest Sass / Flexbox grid ever! 2 | 3 | This is a set of simple Sass mixins meant to provide a basic grid for your websites. 4 | 5 | 6 | See a demo and play with it: 7 | 8 | ## Grid mixin usage 9 | 10 | This repo provides a mixin called `_fg()`. You can use this mixin on a grid 11 | *container*. It will distribute the child elements of that container into a grid 12 | layout as specified in the mixin. 13 | 14 | The mixin accepts three arguments, which I'll explain below: 15 | 16 | 1. Number of columns OR layout 17 | 2. Width of gutter between grid columns 18 | 3. Amount of padding in grid columns 19 | 20 | Let's break it down, starting with the simplest usage. 21 | 22 | ### Sample HTML 23 | 24 | ```html 25 |
26 |
Column 1
27 |
Column 2
28 |
Column 3
29 |
Column 4
30 |
Column 5
31 |
Column 6
32 |
Column 7
33 |
34 | ``` 35 | 36 | ### Default settings 37 | 38 | ```scss 39 | $_fg_gutter: 24px !default; // gutter between columns. Set as desired. 40 | $_fg_padding: 12px !default; // padding for column boxes. Set as desired, can override for individual columns. 41 | ``` 42 | 43 | *(Previously these settings were unitless, to be interpreted as pixels. Now you can set these to any units you prefer. If you don't specify a unit, it will still be interpreted as pixels by the mixin)* 44 | 45 | You can override these settings as desired for your project (they can also be custom-set any time you call the `_fg()` mixin, but we'll get to that in a second). 46 | 47 | ### Specify number of columns 48 | 49 | ```scss 50 | .grid_container { @include _fg(3); } 51 | ``` 52 | 53 | Here we passed a single number (3) to the grid mixin. This gives us a three-column 54 | layout. Each `
` will use 1/3 of the width of the grid container. The rows 55 | will wrap - given the above markup, there will be two full rows and Column 7 56 | will be on a third row by itself. 57 | 58 | ### Helper mixin: `_fg_width()` 59 | 60 | The above usage is helpful, but we might want to make an exception - perhaps we 61 | want a layout with a main content area (2/3 width) and a sidebar (1/3 width). 62 | We can override width on a specific column like this: 63 | 64 | ```scss 65 | .column_1 { @include _fg_width(2/3); } 66 | ``` 67 | 68 | However, we can write a layout more efficiently using the `_fg()` mixin as below: 69 | 70 | ### Specify per-row layout of columns 71 | 72 | Basically, this combines the two above usages. 73 | 74 | ```scss 75 | .grid_container { @include _fg(1 3 2); } 76 | ``` 77 | 78 | The first argument to the mixin can also be a *list* - a set of space-separated 79 | numbers. This will set up three columns of varying widths. The above mixin is 80 | equivalent to calling: 81 | 82 | ```scss 83 | .grid_container { @include _fg(6); } // 1+3+2=6 84 | .grid_container > div:nth-child(3n+2) { @include _fg_width(3/6); } // second column in each row 85 | .grid_container > div:nth-child(3n+3) { @include _fg_width(2/6); } // third column in each row 86 | ``` 87 | 88 | Thus, each row will have three columns at 1/6 width + 3/6 width + 2/6 width. This 89 | should make it easy to set up flexible layouts. 90 | 91 | Also note that these two statements are equivalent: 92 | 93 | ```scss 94 | .grid_container { @include _fg(3); } 95 | ``` 96 | 97 | ```scss 98 | .grid_container { @include _fg(1 1 1); } // does the same thing! 99 | ``` 100 | 101 | ### Set a custom gutter width 102 | 103 | ```scss 104 | .grid_container { @include _fg(3, 45px); } 105 | ``` 106 | 107 | ```scss 108 | .grid_container { @include _fg(1 3 2, 45px); } 109 | ``` 110 | 111 | Each example above sets a gutter of 45px between each column. 112 | 113 | ### Set custom padding inside columns 114 | 115 | ```scss 116 | .grid_container { @include _fg(2 2 1 1, 45px, 30px); } 117 | ``` 118 | 119 | This sets a custom padding of 30px inside each of the columns specified. 120 | 121 | ### A couple more examples all together 122 | 123 | ```scss 124 | @include _fg(2 2 1 1); 125 | // four columns in each row; 126 | // 1/3 + 1/3 + 1/6 + 1/6 in each row 127 | // Uses default settings for grid width and padding inside column elements 128 | ``` 129 | 130 | ```scss 131 | @include _fg(5, 20px, 10px); 132 | // Five equal columns in each row 133 | // 20px gutters between each column (overriding the default) 134 | // each column has 10px padding (overriding the default) 135 | ``` 136 | 137 | ```scss 138 | @include _fg(2 1, 60px, 0); 139 | // 2/3 + 1/3 columns in each row 140 | // 60px gutter between columns 141 | // columns will have no padding 142 | ``` 143 | 144 | ## Breakpoint mixin usage 145 | 146 | Breakpoints can be defined as: 147 | 148 | ```scss 149 | $_fg_small: 768px; // If units are not specified, treated as pixels 150 | $_fg_medium: 1024px; 151 | $_fg_large: 1280px; 152 | 153 | @include _fg_breakpoint(small); // or medium or large 154 | ``` 155 | 156 | This is a pretty standard `min-width` breakpoint mixin, so you can write your code mobile-first 157 | and move up: 158 | 159 | ```scss 160 | body { background: red; @include _fg(1); // on the smallest screens 161 | @include _fg_breakpoint(small) { @include _fg(2); } // tablet size 162 | @include _fg_breakpoint(medium) { @include _fg(4); } // desktop size 163 | } 164 | ``` 165 | 166 | Of course you may set the pixel numbers to whatever you prefer. 167 | 168 | You may also pass the breakpoint as an arbitrary width: 169 | 170 | ```scss 171 | @include _fg_breakpoint(600); // evaluates to "@media (min-width: 600)" 172 | ``` 173 | --------------------------------------------------------------------------------