UI ELEMENTS

Helpers

These css classes are design to do lots of common and recurring tasks.

Basic principles

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.

CSS CLASSES
Class name Description
align-left Sets text-align css property to 'left'.
align-center Sets text-align css property to 'center'.
align-right Sets text-align css property to 'right'.
push-left Sets float css property to 'left'.
push-center Sets float css property to 'none', and margin to '0 auto'.
push-right Sets float css property to 'right'.
top-space Sets margin-top to a full gutter space.
right-space Sets margin-right to a full gutter space.
bottom-space Sets margin-bottom to a full gutter space.
left-space Sets margin-left to a full gutter space.
vertical-space Sets margin-top and margin-bottom to a full gutter space.
horizontal-space Sets margin-left and margin-right to a full gutter space.
hide Sets display css property to 'none'.
show Sets display css property to its default visible state.
  • This class has breakpoint dependent variants, e.g. large-class-name.
  • This class has double, half and quarter size variants, e.g. half-class-name.

Element alignment

  • Css classes:
  • push-left
  • push-center
  • push-right

Lets take two buttons and align them to the sides of their container:

Demo

Since by default items are aligned to the left we only have to align the 'confirm' button to the right:

Code

<button class="ink-button red">Cancel</button>
<button class="ink-button green push-right">Confirm</button>

We can do the same but for a specific breakpoint, large in this example:

Demo

Code

<button class="ink-button red">Cancel</button>
<button class="ink-button green large-push-right">Confirm</button>

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.

Demo

50%

Content alignment

  • Css classes:
  • align-left
  • align-center
  • align-right

If you need to align content within your blocks, you can use the align-left, align-center or align-right classes.

Demo

This is some right aligned text, using the align-right class.

Code

<p class="align-right">This is some right aligned text, using the align-right class.</p>

Element spacing

  • Css classes:
  • space
  • top-space
  • right-space
  • bottom-space
  • left-space

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.

Visibility

  • Css classes:
  • show-all
  • hide-all
  • show
  • hide

With the .show and 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.

Demo

Screen size:

  • TINY
  • SMALL
  • MEDIUM
  • LARGE
  • XLARGE

Code

<div class="screen-size-helper clearfix">
  <p class="title">Screen size:</p>
  <ul class="unstyled">
    <li class="hide-all show-tiny tiny">TINY</li>
    <li class="hide-all show-small small">SMALL</li>
    <li class="hide-all show-medium medium">MEDIUM</li>
    <li class="hide-all show-large large">LARGE</li>
    <li class="hide-all show-xlarge xlarge">XLARGE</li>
  </ul>
</div>