Media Query visibility
The section below demonstrates basic show and hide classes.
By using the classes indicated we can also see the breakpoints in action.
> > SHOW FOR TINY < <
.mq-tiny-show
.mq-tiny-hide
HIDE FOR TINY
> > SHOW FOR SMALL < <
.mq-small-show
.mq-small-hide
HIDE FOR SMALL
> > SHOW FOR MEDIUM < <
.mq-medium-show
.mq-medium-hide
HIDE FOR MEDIUM
> > SHOW FOR LARGE < <
.mq-large-show
.mq-large-hide
HIDE FOR LARGE
Columns demo
There are 2 kinds of column system in Flux layout
- they begin with either box- or column-
- box- classes have no gaps between them - they are the width of their parent container, divided up into various widths.
- column- classes are traditional columns but smarter than most! There is NO 'last' class required (whoot!) to be applied to the last column, and no cheating on the maths, so no more wonky first or last width column.
NOTE: Column classes currently do not have responsive equivalents, they are a work in progress. The issue is that when they hit breakpoints and reflow, you need different gutters (spacing) between the columns.
Column system 1: box- class variable widths
By combining core box- classes with media query sizes gives you a powerful responsive system. You should note the classes that contain -min- these will retain this size at all lower media query sizes.
1) A row of two responsive divs
All divs have the same CSS classes applied: box-1-2 mq-small-min-box-1-1
1.1) I am 1-2 size until the screen gets small, then I go to full width.
1.2) I am 1-2 size until the screen gets small, then I go to full width.
2) A row of four responsive divs
All divs have the same CSS classes applied: box-1-4 mq-small-box-1-2 mq-tiny-1-1
2.1) I am 1-4 size, at small I go to half size and at tiny I go full width.
2.2) I am 1-4 size, at small I go to half size and at tiny I go full width.
2.3) I am 1-4 size, at small I go to half size and at tiny I go full width.
2.4) I am 1-4 size, at small I go to half size and at tiny I go full width.
3) A row of eight responsive divs
All divs have the same CSS classes applied: box-1-4 mq-large-box-1-8 mq-tiny-box-1-2
3.1) I am 1-4 size, at large I go to 1-8 size and at tiny I go half width.
3.2) I am 1-4 size, at large I go to 1-8 size and at tiny I go half width.
3.3) I am 1-4 size, at large I go to 1-8 size and at tiny I go half width.
3.4) I am 1-4 size, at large I go to 1-8 size and at tiny I go half width.
3.5) I am 1-4 size, at large I go to 1-8 size and at tiny I go half width.
3.6) I am 1-4 size, at large I go to 1-8 size and at tiny I go half width.
3.7) I am 1-4 size, at large I go to 1-8 size and at tiny I go half width.
3.8) I am 1-4 size, at large I go to 1-8 size and at tiny I go half width.
Traditional mixed width columns (with gutter) - 16 columns
Basic, non-responsive demo
Traditional mixed width columns (with gutter) - 10 columns
Basic, non-responsive demo