Main Content

AIOS Utilities

Note:

AIOS Starter Theme – Required version > 1.7.6 and add the following code to child theme functions.php

wp_enqueue_style( 'aios-starter-theme-utilities-style' );

Class with suffix -0 this means width, margin, padding, border are equals to 0.

Display

Display utility classes that apply to all breakpoints, from xs to lg, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0; and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

As such, the classes are named using the format:

  • .d-{value} for xs
  • .d-{breakpoint}-{value} for sm, md, and lg.

Where value is one of:

  • none
  • inline
  • inline-block
  • block
  • table
  • table-cell
  • table-row

The media queries effect screen widths with the given breakpoint or larger. For example, .d-lg-none sets display: none; on both and lg screens.

Float

Here are all the support classes;

  • .float-left
  • .float-right
  • .float-none
  • .float-sm-left
  • .float-sm-right
  • .float-sm-none
  • .float-md-left
  • .float-md-right
  • .float-md-none
  • .float-lg-left
  • .float-lg-right
  • .float-lg-none
<div class="float-sm-left">Float left on viewports sized SM (small) or wider</div>
<div class="float-md-left">Float left on viewports sized MD (medium) or wider</div>
<div class="float-lg-left">Float left on viewports sized LG (large) or wider</div>

Borders

Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.

Remove border usgin the following class:

  • border-0
  • border-top-0
  • border-right-0
  • border-bottom-0
  • border-left-0

Border Radius:

  • rounded
  • rounded-top
  • rounded-right
  • rounded-bottom
  • rounded-left
  • rounded-circle
  • rounded-0

Embed Responsive

Wrap any embed like an <iframe> in a parent element with .embed-responsive and an aspect ratio. The .embed-responsive-item isn’t strictly required, but we encourage it.

<div class="embed-responsive embed-responsive-16by9">
	<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>

Aspect ratios can be customized with modifier classes.

<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
	<iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
	<iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
	<iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
	<iframe class="embed-responsive-item" src="..."></iframe>
</div>

Position

Use these shorthand utilities for quickly configuring the position of an element.

Quick positioning classes are available, though they are not responsive.

  • position-static
  • position-relative
  • position-absolute
  • position-fixed
  • position-sticky

Fixed top – Position an element at the top of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add aditional CSS.

<div class="fixed-top">...</div>

Fixed bottom – Position an element at the bottom of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add aditional CSS.

<div class="fixed-bottom">...</div>

Sizing

Easily make an element as wide or as tall (relative to its parent) with our width and height utilities.

Width classes are available.

  • w-25
  • w-50
  • w-75
  • w-100
<div class="w-25" style="background-color: #eee;">Width 25%</div>
<div class="w-50" style="background-color: #eee;">Width 50%</div>
<div class="w-75" style="background-color: #eee;">Width 75%</div>
<div class="w-100" style="background-color: #eee;">Width 100%</div>

Height classes are available.

  • h-25
  • h-50
  • h-75
  • h-100
<div class="h-25" style="background-color: #eee;">Height 25%</div>
<div class="h-50" style="background-color: #eee;">Height 50%</div>
<div class="h-75" style="background-color: #eee;">Height 75%</div>
<div class="h-100" style="background-color: #eee;">Height 100%</div>

You can also use max-width: 100%; and max-height: 100%; utilities as needed.

  • mw-100 – Max Width 100%
  • mh-100 – Max Height 100%

Spacing

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, and lg.

Where property is one of:

  • m – for classes that set margin
  • p – for classes that set padding

Where sides is one of:

  • t – for classes that set margin-top or padding-top
  • b – for classes that set margin-bottom or padding-bottom
  • l – for classes that set margin-left or padding-left
  • r – for classes that set margin-right or padding-right
  • x – for classes that set both *-left and *-right
  • y – for classes that set both *-top and *-bottom
  • blank – for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

  • 0 – for classes that eliminate the margin or padding by setting it to 0
  • 1 – (by default) for classes that set the margin or padding to 5px
  • 2 – (by default) for classes that set the margin or padding to 10px
  • 3 – (by default) for classes that set the margin or padding to 15px
  • 4 – (by default) for classes that set the margin or padding to 20px
  • 5 – (by default) for classes that set the margin or padding to 25px
  • 6 – (by default) for classes that set the margin or padding to 30px
  • 7 – (by default) for classes that set the margin or padding to 35px
  • 8 – (by default) for classes that set the margin or padding to 40px
  • 9 – (by default) for classes that set the margin or padding to 45px
  • 10 – (by default) for classes that set the margin or padding to 50px
  • auto – for classes that set the margin to auto

Horizontal centering – Additionally, also includes an .mx-auto class for horizontally centering fixed-width block level content—that is, content that has display: block and a width set—by setting the horizontal margins to auto.

Text alignment

List of classes for text-align:

  • text-left – Left aligned text on all viewport sizes.
  • text-center – Center aligned text on all viewport sizes.
  • text-right – Right aligned text on all viewport sizes.
  • text-sm-left – Left aligned text on viewports sized SM (small) or wider.
  • text-md-left – Left aligned text on viewports sized MD (medium) or wider.
  • text-lg-left – Left aligned text on viewports sized LG (large) or wider.

Text transform

  • text-lowercase – Lowercased text.
  • text-uppercase – Uppercased text.
  • text-capitalize – CapiTaliZed text.

Font weight and italics

  • font-weight-bold – Bold text.
  • font-weight-normal – Normal weight text.
  • font-weight-light – Light weight text.
  • font-italic – Italic text.

Vertical Align

List of classes – Description

  • align-baseline – baseline
  • align-top – top
  • align-middle – middle
  • align-bottom – bottom
  • align-text-top – text-top
  • align-text-bottom – text-bottom