@paulbarre/simple-flex-grid v2.0.0

Simple Flex Grid

Easy-to-use grid based on Flexbox in pure CSS.

Why will it be useful?

Using Bootstrap or other frameworks can be time loss with unuseful CSS, or make import more that what your app needs.

Simple Flex Grid goals:

1. It is in pure CSS
2. It is small
3. It doesn't change your fonts
4. It doesn't change your colors
5. It is simple
6. It is flex
7. It is responsive

Notes

Grid breakpoints and container class max-width are based on Bootstrap.

Installation

Via NPM

npm i -D @paulbarre/simple-flex-grid

Then into your main javascript file (ES6 module):

import '@paulbarre/simple-flex-grid/dist/simple-flex-grid.min.css'

Breakpoints

Classes

• row: define responsive layout.
• column: the tag that has to be responsive.
• <breakpoint>[1-12]: the tag will covere 1 to 12 columns for the designated breakpoint.
• <breakpoint>: the tag will be hidden until the breakpoint is triggered.
• <breakpoint>0: the tag will be hidden when the breakpoint is triggered.
• container: this class will set margins around the grid layout. Not required if the rows have to covered the full width of the page.

Examples

Check out the examples for a short example. More examples to come.