Utility classes

This framework includes various utilities—classes with a single purpose. They’re designed to reduce the frequency of highly repetitive declarations in your CSS down while allowing for quick and easy development.

Contents

• Contents
• Opacity control
• Borders
• Backgrounds
  • Complete palette
  • Gradients
  • Images
    • Covers

Opacity control

Configure the opacity of a given element. This is styled in such a way that browsers can animate the property when its value changes.

• .opaque: make an element fully visible with opacity: 1
• .transparent: make an element invisible with opacity: 0

Borders

This small utility follows on the spacing utilities provided by the core framework.

• .b-a-0: configure all borders (indicated by the b-a) to be none (indicated the 0)

Backgrounds

You can use any of the following colours and opacities and mix them into any other block elements to provide a coloured semi-transparent background.

For details on dealing with selector specificity, refer the Contextual Colors and Backgrounds documentation from Bootstrap.

Complete palette

Gradients

Images

There are a number of approved brand images that can be used as backgrounds as well.

Covers

Use .jcu-bg--cover to configure an image background to scale as large as possible, whilst maintaining the aspect ratio, covering the entire width or height of the container. Compare the two different examples below and note how the cover example resizes the image and may clip the edges to maintain aspect ratio.