Fluxgrid

Yet another responsive utility-based CSS grid customisable with Sass.

Look for installation and getting started instructions on GitHub.

#Syntax 

<div class="container container-modifier">
	<div class="grid *grid-secondary">
		<div class="cell *cell-modifier"></div>
	</div>
</div>
* Responsive prefix: sm:|md:|lg:|xl:

#Container

A container is required to cancel the grid negative margins used to align the cells.

It can be extended with modifiers:
container-sm|md|lg|xl container-no-gutter

#Grid

A grid can be extended with modifiers throughout breakpoints:

#Direction

#Row (default) grid-row

A
B
C
 

#Reversed row grid-row-reverse

A
B
C

#Wrap

#Wrap (default) grid-wrap

cell-6
cell-8
 

#No wrap grid-no-wrap

cell-6
cell-8

#Gutters

#Large grid-lg-gutter

 
 
 
 

#None grid-no-gutter

 
 
 

#Justification

#X axis

Start (default) grid-x-start
 
 
 
Center grid-x-center
 
 
 
End grid-x-end
 
 
 
Around grid-x-around
 
 
 
Between grid-x-between
 
 
 
 

#Y axis

Stretch (default) grid-y-stretch
 
 
 
Start grid-y-start
 
 
 
Center grid-y-center
 
 
 
End grid-y-end
 
 
 
 

#"Z": Y axis when wrapped

Stretch (default) grid-z-stretch
cell-12
cell-12
Start grid-z-start
cell-12
cell-12
Center grid-z-center
cell-12
cell-12
End grid-z-end
cell-12
cell-12
Around grid-z-around
cell-12
cell-12
Between grid-z-between
cell-12
cell-12

#Cells

A cell can be extended with modifiers throughout breakpoints:

#Size

#Defined

cell-1
cell-11
cell-2
cell-10
cell-3
cell-9
cell-4
cell-8
cell-5
cell-7
cell-6
cell-6
cell-12

# Grow / Shrink

cell-grow
cell
cell-shrink

Note: cell-shrink behaves the same as cell but can be use to explicitly override cell-grow.

#Visibility

cell-hidden
cell-visible

Note: cell-hidden is used to hide a cell.

#Gutter

cell-gutter
cell-no-gutter
cell-no-gutter
cell-gutter

#Self justification

#X axis

Start
cell-x-start
 
 
Center
 
cell-x-center
 
End
 
 
cell-x-end
 

# Y axis

Stretch (default)
cell-y-stretch
 
Start
cell-y-start
 
Center
cell-y-center
 
End
cell-y-end
 

#Order

A cell-last
B cell-ordered
C cell-first