Elements can be floated with .align-* classes. Add a .clearfix class to a parent element to clear the floats.
Float's should generally be avoided, we're not in the early 00's anymore!
Use m*-0, p*-0 and b*-0 modifiers to reset margin/padding/border to 0 for a given side.
Jellyfish comes with a number of display utilities to allow you to hide and show elements based on the current breakpoint.
An element with a class of .hide is hidden at all breakpoints. An element can also be set to be hidden (but still take up space on the page) with the class .invisible.
Use .hide-* to hide an element only at a specific breakpoint. Use .hide-above-* to hide an element at and above a specific breakpoint. Use hide-below-* to hide an element at and below a specific breakpoint.
| Class | Result |
|---|---|
| .invisible | This text is invisible but still takes up space on the page. So if it falls across multiple lines, the table cell will grow to fit it. |
| .hide | This text will be hidden on all devices. |
| .hide-* | |
| .hide-below-* | |
| .hide-above-* |
Jellyfish contains a number of flexbox alignment classes to help position columns inside a flexbox row.
.align-* classes are added to the parent row to align elements vertically within a row. .align-self-* classes are applied to the columns themselves to achieve the same outcome.
Adding a class of .flex will convert any element into display: flex;. Apply an .equal-height class to a parent row to make all immediate child columns display:flex;
Use the .justify-* modifiers on a row to justify the child columns.
The utility class .full-width can be applied to any element to make width: 100%.
An element with the utility class .vw-100 will span 100% of the viewport width, breaking out of any containers to do so (without affecting document flow). Note: this class should only be used when the center of the parent is in the center of the window.