Getting Started

Overview

Utility classes allow for easy and fast development by doing small little one-off things. They’re designed to be simple, composable and re-usable.

Utility classes are meant to do only one thing, and do it consistently. For example, you can center align text by adding the .text-center class or float an element to the right with .pull-right. Utility classes are very handy because they’ll allow you to easily style/modify any element without writing new CSS.

There’s a wide range of utility classes available. They have very diverse roles and are categorized into the following groups:

• Borders
• Display
• Flexbox
• Floats
• Icons
• Position
• Spacing
• Text

Note that although utility classes are great, they can become problematic if not used correctly. Make sure to follow our best practices.

Best Practices

• Work with component first.

  Utility classes are meant to work along with components and can be applied to any element.

• Find Patterns.

  Avoid relying on utility classes. Applying repetitive utility classes to a group of elements will become difficult to maintain because when a change is required every element will have to be modified. Instead try to identify patterns and create classes that can be applied across multiple elements.

• Utility classes are better than inline styles.

  Opt for using utility classes instead of writing new classes or inline styles. This will keep your stylesheets from having any redundancies and minimize the size.