Jellyfish's grid system is built on flexbox.
The grid consists of containers (.container), rows (.row) and columns (.col ).
Content without a container will span the width of the viewport. To restrict content width and ensure consistency, wrap elements in a .container.
The .container is centered horizontally and can be customised at each breakpoint with the following settings: width, max-width, gutter (left/right). See breakpoints for information.
A container can be modified with the class .is-wide to extend to fill half of the normal gutter on the left/right. This is useful for pulling content outside of the normal container for emphasis.
Containers aren't mandatory - indeed this documentation doesn't use them, however they do usually prove useful for most websites!
Rows contain a number of .col elements, arranged horizontally. To preserve equal margins on the left and right, the only elements inside a .row should be .col elements.
Unlike most grid systems, Jellyfish allows you customise how many columns your grid will use. This is determined by the $cols variable.
Columns are equal-width by default, and expand to fill all available width.
To size a column based on it's content, use .col-auto
To set the width of a column, use the breakpoint-based modifier classes to target different viewport widths.
Additional columns wrap to a new line.
You can mix and match column sizes over different breakpoints. Jellyfish is mobile first, so classes / widths inherit upwards.
On the smallest screens, all columns will be 100% width unless you specifier a modifier with the name defined in the $base-col-name variable (default xs).
You can mix and match sized columns with unsized columns for flexibility. Unsized columns will take up equal widths of the remaining space.
Adding a modifier of .*-0 for a breakpoint will reset the behaviour of a column to fill all remaining space in the row.
Columns can be offset by using the .offset-$breakpoint-$cols modifiers. Offsets are inherited, and can be reset by using the class .offset-$breakpoint-0. When you offset a column, all columns that follow are pushed along.
Note: if you don't need to use offsets in your project, you can disable the css from being generated (and slightly reduce compiled filesize) by changing $grid-has-offset to false.
You can control the order of columns using the .order-$breakpoint-* modifiers. Note that columns without an order modifier will not be affected. Ordering is inherited, and can be reset by using the class .order-$breakpoint-0.
Note: if you don't need to use ordering in your project, you can disable the css from being generated (and slightly reduce compiled filesize) by changing $grid-has-order to false.
Columns have horizontal spacing (gutters) around them by default. Should you wish to remove this spacing, apply the .collapse class to the parent .row. You can target specific breakpoints with .collapse-$breakpoint and reset with .nocollapse-$breakpoint
.row and .col elements can be infinitely nested within each other, so long as one golden rule is followed: A .row can only contain .col elements.
outer col md-8
outer col md-4