Flexponsive
Flex-based vertical and horizontal grid and media-breakpoints utilities in SASS-mixins
Disclaimer: If you need just ready to use css grid and Bootstrap (or Flexgrid) fits your requirements - use it. Flexponsive doesn't provide a fundamentally different technical solution. Just another approach in naming and generation.
Conception
container - centered wrapper for page content
cols - container for grid columns
col - grid column
rows - container for grid rows, "eats" the last line indent
row - vertical grid element with bottom margin = grid gutter
Only col
can be direct children of cols
.
row
can be used without rows
.
Trick with "eating" row
margin by rows
instead of using row + row
selector and vertical margin used to make it more flexible in nested grids.
Modifiers naming: class_[breakpoint-]modifier
.
First breakpoint skips in class name and applies as default.
Usage
Ready to use css with Bootstrap default breakpoints and grid configuration available in dist/flexponsive.css
Install via npm:
npm i -S flexponsive
Generate with default params
; // or @import "~flexponsive/src/flexponsive";
Modify variables
; // or @import "~flexponsive/src/flexponsive"; ; ; ; ; ; ; ; ; ;
Generate own grids
; // or @import "~flexponsive/src/flexponsive"; ; ; ; // Default grid // Support 10-columns grid
Modifiers
Documentation in progress
Container
_fluid
- make container 100% width, ignore container max width
Cols
_start
_center
_end
_between
_around
_top
_middle
_bottom
_reverse
_gapless
_nowrap
_wrap
Col
_auto
_offset-*
_push-*
_order-*
_first
_last
_self-top
_self-bottom
_self-middle
_filled
Breakpoints utilities
Documentation in progress