These css classes are design to do lots of common and recurring tasks.
Ink has a set of CSS classes that allow you to change several aspects of your user interface depending on the breakpoint. This allows for precise control and can help you do more than just change the width of layout blocks.
||Sets text-align css property to 'left'.|
||Sets text-align css property to 'center'.|
||Sets text-align css property to 'right'.|
||Sets float css property to 'left'.|
||Sets float css property to 'none', and margin to '0 auto'.|
||Sets float css property to 'right'.|
||Sets margin-top to a full gutter space.|
||Sets margin-right to a full gutter space.|
||Sets margin-bottom to a full gutter space.|
||Sets margin-left to a full gutter space.|
||Sets margin-top and margin-bottom to a full gutter space.|
||Sets margin-left and margin-right to a full gutter space.|
||Sets display css property to 'none'.|
||Sets display css property to its default visible state.|
Lets take two buttons and align them to the sides of their container:
Since by default items are aligned to the left we only have to align the 'confirm' button to the right:
We can do the same but for a specific breakpoint,
large in this example:
Beware that centering elements with
push-center uses the
margin: 0 auto method and will only work with elements that have a width other than auto, like grid columns.
If you need to align content within your blocks, you can use the
This is some right aligned text, using the
Sometimes extra space is essential and so Ink ships with a few simple spacer classes. Add one of the above classes to any block level element to obtain the desired space.
hide classes you can force an element to be shown or hidden.
Note that these classes use
!important to avoid any conflicts.
The bar below will display different values and colors depending on the size of the screen it's being viewed on.