Flex Grid SCSS

Features

• Responsive, mobile first approach
• Define specific colum size or use a flex column (a column that grows to fill space)
• Define offset to push column a specific number of columns.
• Set your own number of columns!
• Set your own class names for rows, columns and offsets for nice library compatibilty!

Usage

Just @import the _flexgrid.scss file as a partial or rename _flexgrid.scss -> flexgrid.scss if you'd prefer it to be compiled independently. Download flex grid

Use the generated classes to build your layout. I prefer to keep my markup clean and @extend the grid classes onto my elements so I don't have to muck around in html for style edits but whatever floats your boat.

Variables

• $fg-columns: The number of columns you wnat your grid to be, defaults to 12
• $fg-gutter: The gutter width used for each column, defaults to 0.5rem
• $fg-breakpoints: The Flex Grid breakpoint object, binds grid namespaces to media queries. Read more about namespaces in the next section. Defaults to ((xs),(sm,768),(md,992px),(lg,1200px))
• $fg-class-row: The class to use for rows, defaults to 'row'
• $fg-class-col: The class to use for columns, defaults to 'col'
• $fg-class-off: The class to use for offsets, defaults to 'off'

Class Reference

• .($fg-class-row): Flex box container, use this to wrap columns.
• .($fg-class-col)-(namespace): This creates a column that will grow/shrink depending on available space in the defined namespace.
• .($fg-class-col)-(namespace)-(number): This creates a column that span the specific number of columns in the defined namespace. Valid numbers are 1-12.
• .($fg-class-off)-(namespace)-(number): This will offset a column by a specific number of columns in the defined namespace. Valid numbers are 1-11.

See docs about the row, col and offset class name variables, default is 'row', 'col', 'off'.

Default valid namespaces are xs, sm, md, lg. The xs namespace is default and uses no media queries. Learn how to override namespaces.

Columns Demo

Column Offsets Demo

Column Offset Reset Demo

A column can be given a reset for a given namespace but easily reset for the other namespaces.

Responsitivity By Combining Namespaces Demo

Drag browser around to test responsive breakpoints.

Overriding Namespaces

Flex grid declares a variable $bp-namespace-obj. This variable defines the breakpoints that you'd like to set and their associated namespaces.

To declare your own breakpoints just override this variable. By default we set it to: $bp-namespace-obj: ( (xs), (sm, 32em), (md, 48em), (lg, 62em) );

You can add your own namespaces and breakpoints, we'll handle creating your grid. Flex grid is built from a mobile first approach, meaning you should always keep your base namespace first, this will ensure that the others cascade over it correctly.

Questions

If you have questions or bug reports don't hesitate to get in touch. You can always make an issue on the github repo, or reach out on twitter.