Skip to content

Coller (Grid system)

Mads Thines edited this page Feb 15, 2017 · 1 revision

Author: Mads Thines

How to use

Include on the parent of the elements where you want to create the grid system. (Everythings optional)

@include coller;

or

@include coller(4, 3, 2, 1, 2%, *, alignement, $large, $medium, $small);

  • Columns 4,3,2,1 - is the amount of columns that will be created on the different breakpoints.
  • Margin 2% is the margin between the rows (If you're using PostCSS autoprefixer it'll be 100% compatible when using percentage)
  • Selector The selector's element (Only useful if there's other html tags in the same parent)
  • Alignment The vertical-alignment property being used with the inline-block.
  • Breakpoints $large, $medium, $small - The different breakpoints in pixels (Like "768px").

CollerFloat (Grid system - Float)

Author: Mads Thines

How to use

Include on the parent of the elements where you want to create the grid system. (Everythings optional)

@include collerFloat;

or

@include collerFloat(4, 3, 2, 1, 2%, *, $large, $medium, $small);

  • Columns 4,3,2,1 - is the amount of columns that will be created on the different breakpoints.
  • Margin 2% is the margin between the rows (If you're using PostCSS autoprefixer it'll be 100% compatible when using percentage)
  • Selector The selector's element (Only useful if there's other html tags in the same parent)
  • Breakpoints $large, $medium, $small - The different breakpoints in pixels (Like "768px").
Clone this wiki locally