CSS Class Index

This article was last updated on the January 2, 2017.

The aim of this article is to provide a comprehensive list of all main classes utilized by the theme. Should you have any questions about a particular class or how it is used throughout the theme, one of the best things you can do is take advantage of the Inspect Element feature in Chrome. To do so, simply right-click on any part of your page that you want to take a look at and select Inspect Element from the dropdown that appears. Once you do that, a popup should appear at the bottom of your browser with markup (HTML) on the left and styling (CSS) on the right. You can then browse the markup of your site, select certain elements, and see what styling is applied to these elements via their selectors. This is a great tool to take advantage of if you have any questions about how an element is styled and what you can do to alter it.

Body Classes

All classes listed in this section are applied to the <body> element.

Stack Selection

Integrity (Light)

.x-integrity.x-integrity-light {  }

Integrity (Dark)

.x-integrity.x-integrity-dark {  }

Renew

.x-renew {  }

Icon

.x-icon {  }

Navbar Alignment

Static Top

.x-navbar-static-active {  }

Fixed Top

.x-navbar-fixed-top-active {  }

Fixed Left

.x-navbar-fixed-left-active {  }

Fixed Right

.x-navbar-fixed-right-active {  }

Site Layout

Boxed

.x-boxed-layout-active {  }

Fullwidth

.x-full-width-layout-active {  }

Content Layout

Content/Sidebar

.x-content-sidebar-active {  }

Sidebar/Content

.x-sidebar-content-active {  }

Fullwidth

.x-full-width-active {  }

Navbar Classes

The classes listed in this section apply to the navbar or elements contained within the navbar. Note that the .x-navbar-fixed-top class is added dynamically via JavaScript as the user scrolls down the page and is also removed as the viewport returns to the top of the webpage.

Navbar

Static Top

.x-navbar {  }

Fixed Top

.x-navbar.x-navbar-fixed-top {  }

Fixed Left

.x-navbar.x-navbar-fixed-left {  }

Fixed Right

.x-navbar.x-navbar-fixed-right {  }

Logo

Text

.x-brand.text {  }

Image

.x-brand.img {  }

Navigation

Navigation List

.x-nav {  }

Mobile Toggle

.x-btn-navbar {  }

Utility Classes

The classes listed in this section are not meant to be targeted with CSS to alter their styling or functionality. Instead, these classes already perform a specified action and are meant to be used with various elements when needed.

Spacing Helpers

In order for pages to be structured properly, all elements must receive some type of margin or padding for adequate spacing. While this spacing is beneficial in most cases, it might be something you wish to remove or modify at other times. We have provided plenty of helper classes to use in these instances. These helper classes allow you to modify the margin and padding of elements by removing the spacing completely, or adding a small, medium, or large amount of spacing. These classes are an acronym built from three different parameters:

  1. Margin (m) or padding (p).
  2. Top (t), left (l), right (r), bottom (b), vertical (v), horizontal (h), or all (a).
  3. None (n), small (s), medium (m), or large (l).

For example, if you wanted to add a class that removed all of the margin from the top of an element you would use mtn, which stands for margin top none. Alternately, if you wanted to add a small amount of padding to both sides of an element you would use phm, which stands for padding horizontal medium.

To figure out where the spacing on an element is coming from, you can easily do this in Chrome. Simply right click on any element and select Inspect Element from the dropdown. This will reveal a popup at the bottom of your window, which will display HTML on the left and CSS on the right. You can hover over the HTML in the popup and select elements to see where any margin or padding is coming from. Margin is designated by a reddish/orange color and padding is designated by green.

Spacing: None

  • mtn
  • mrn
  • mbn
  • mln
  • mvn
  • mhn
  • man
  • ptn
  • prn
  • pbn
  • pln
  • pvn
  • phn
  • pan

Spacing: Small

  • mts
  • mrs
  • mbs
  • mls
  • mvs
  • mhs
  • mas
  • pts
  • prs
  • pbs
  • pls
  • pvs
  • phs
  • pas

Spacing: Medium

  • mtm
  • mrm
  • mbm
  • mlm
  • mvm
  • mhm
  • mam
  • ptm
  • prm
  • pbm
  • plm
  • pvm
  • phm
  • pam

Spacing: Large

  • mtl
  • mrl
  • mbl
  • mll
  • mvl
  • mhl
  • mal
  • ptl
  • prl
  • pbl
  • pll
  • pvl
  • phl
  • pal