Utilities THEME_NAME/core/css/utilities

These are helper classes that can speed up your development and reduce CSS property declarations.

The utility classes do not contain any !important declarations. If you require such overrides you may want to take a second glance at your code to see if something can be refactored first.

Borders THEME_NAME/core/css/utilities/borders.css

Utility classes to adjust element borders.

Example

Borders have been highlighted for better visualization.

Clear Fix THEME_NAME/core/css/utilities/clear-fix.css

Class-based implementation of the 'clearfix hack'.

Colors THEME_NAME/core/css/utilities/colors.css

Utility classes to adjust element colors inline. Both .u-bg-*** and .u-color-*** work for each color class.

Example

Background Colors

.u-bg-red

.u-bg-yellow

.u-bg-blue

.u-bg-green

.u-bg-black

.u-bg-gray-50

.u-bg-gray-40

.u-bg-gray-30

.u-bg-gray-20

.u-bg-gray-10

.u-bg-white

.u-bg-primary

.u-bg-secondary

.u-bg-tertiary

.u-bg-accent

.u-bg-highlight

Text Colors

.u-color-red

.u-color-yellow

.u-color-blue

.u-color-green

.u-color-black

.u-color-gray-50

.u-color-gray-40

.u-color-gray-30

.u-color-gray-20

.u-color-gray-10

.u-color-white

.u-color-primary

.u-color-secondary

.u-color-tertiary

.u-color-accent

.u-color-highlight

Display THEME_NAME/core/css/utilities/display.css

The display property is the most important CSS property for controlling layout. The display property specifies if / how an element is displayed.

Class Description
.u-hide-visually Visually hides content leaving it accessible to screen-readers.
.u-hidden Completely hides content both visually and from screen-readers
.u-invisible Hidden visually but maintains the layout.
.u-flex Displays an element as an block-level flex container.
.u-block
.u-shown 		Displays an element as a block element.
.u-inline Displays an element as an inline element.
.u-inline-block Displays an element as an inline-level block container.
.u-visible The element is visible.

Grids THEME_NAME/core/css/utilities/grids.css

The .u-grids- utility classes give you the ability to create an automatic number of columns based on the class used; media breakpoints are included.

Example

Cell One

Cell Two

Cell Three

Cell Four

Cell Five

Iconography THEME_NAME/core/css/utilities/icons.css

This contains the @font-face call needed to add the ReadyTheme Icons Font package to your site. These icons are available for use in addition to any theme-based icons which may be referenced in the THEME_NAME/ui/css/theme-styles.css file.

Open the demonstration page to see a list of all the glyphs in the font along with their codes/ligatures. To use the generated font in desktop programs, you can install the TTF font, download here. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in the demonstration. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts You can import 'selection.json' back to the IcoMoon app using the 'Import Icons' button (or via Main Menu → Manage Projects) to retrieve your icon selection.

Open Demonstration Page

Print THEME_NAME/core/css/utilities/print.css

Shadows includes a basic print style sheet.

Typography THEME_NAME/core/css/utilities/typography.css

Below you can find list and a short overview of the most commonly used text semantics.

Font Families

  • .u-font-primary - Primary Font Family
  • .u-font-secondary - Secondary Font Family

Alignment

  • .u-text-left
  • .u-text-center
  • .u-text-right
  • .u-text-justify

Sizing

  • .u-font-tiny
  • .u-font-small
  • .u-font-medium
  • .u-font-large
  • .u-font-huge

Weight, Transformation, and Decorations

  • .u-text-regular
  • .u-text-bold
  • .u-text-italic
  • .u-text-lowercase
  • .u-text-uppercase
  • .u-text-caps
  • .u-text-strike
  • .u-text-underline

Vertical Alignment THEME_NAME/core/css/utilities/vertical-align.css

Widths THEME_NAME/core/css/utilities/widths.css

A series of utility classes that give a fluid width to whichever element they are applied to, media breakpoints are included.

Example

Cell One

Cell Two

Cell Three

Z-Index THEME_NAME/core/css/utilities/z-index.css

Utility classes to set display relevance on the 'Z' axis.