Columns

Responsive column scss template, supports up to 10 columns as default, but can easily be modified to an infinite number of columns. It supports non CSS3-browser but needs extra classes in that case, see column classes below

Options

SASS Options/functions

$column_margin
- Sets the default margin to use around columns
@include make_columns($column_class, $nr_of_columns, $insert_clear: true, $margin: $column_margin)
- core function that generates the css
- can be used independently to create rows and columns from custom classes or with separate margin and so on

Row classes:

.row
- Defines the row element to hold columns
.count-(int)
- Defines amount of columns per row (it is possible to create multiple rows inside only one .row element, to support <IE9 you need to set first-in-row and last-in-row
.no-break
- Will not apply media queries and keep columns in a single row no matter what
.no-margin
- will overide the $useMargin variable and remove all margins

Row options

data-min-cols="{1 * number of columns}"
- This option can disable breaking if less than specified. Defined by adding a 1 per column number. So if row has data-min-cols="111", the row wont break into less than 3 columns in row.
data-flex="{bool}"
- Defines if row should use flexbox properties

Column classes:

.column
- Defines the column element inside a row
.first-in-row
- Defines a column to be first in row. (clears left and left margin), required if <IE9 support is needed
.last-in-row
- Defines a column to be last in row (clears right and right margin), required if <IE9 support is needed
.colspan-(int)
- Defines a column to span over multiple columns

Usage:

<div class="row count-4 no-break no-margin">
  <div class="column first-in-row"></div>
  <div class="column colspan-2"></div>
  <div class="column last-in-row"></div>
</div>

jesperbjerke / Columns