BootstrapΒΆ
Warning
THIS IS NOT DONE AND PROBABLY WRONG.
The grid.
SO what does a class col-SIZE-N mean?
Each SIZE has a BREAKPOINT:
xs: -1 sm: 750px md: 970px lg: 1170px
Call the window width WIDTH.
For a single class col-SIZE-N:
if WIDTH >= BREAKPOINT(SIZE), then
ELEMENT-WIDTH=WIDTH*N/12
display INLINE (same line as previous element if possible)
else
ELEMENT-WIDTH=100%
display BLOCK (element gets its own line)
What if we have col-SIZE1-N1 and col-SIZE2-N2, with BREAKPOINT(SIZE1) < BREAKPOINT(SIZE2)?:
IF WIDTH >= BREAKPOINT(SIZE2), then
ELEMENT_WIDTH = WIDTH * N2 / 12
INLINE
elif WIDTH >= BREAKPOINT(SIZE1), then
ELEMENT_WIDTH = WIDTH * N1 / 12
INLINE
else:
BLOCK display
and so forth - just look at the class with the largest size
NOTE: Since all widths are >= the breakpoint of XS, then if XS is present, the element will ALWAYS be laid out inline. Though col-xs-12 is pretty much equivalent to not having an XS class, right???????????/