CSS Helper Classes

Theming Helpers

All of the below will set the desired background color and ensure corresponding foreground colors as well.

Light Background

If you would like a section or a div to use the dark style then you need to add class="bg-light" to the element that you would like to be light.

hello there
<div class="bg-light">
  hello there
</div>

Light Muted Background

If you would like a section or a div to use the dark style then you need to add class="bg-light-muted" to the element that you would like to be light, but slightly darker.

hello there
<div class="bg-light-muted">
  hello there
</div>

Dark Background

If you would like a section or a div to use the dark style then you need to add class="bg-dark" to the element that you would like to be dark.

hello there
<div class="bg-dark">
  hello there
</div>

Please note that there currently is no bg-dark-muted, as it's unused.

Border Helpers

If you want to adjust border properties.

Rounded Corners

Hello!
<div class="rounded bg-brand m-1 p-1 text-light">Hello!</div>
Hello!
<div class="rounded-lg m-1 p-1 bg-dark">Hello!</div>

List Styles

If you want to remove default list styling you can use the list-unstyled css helper

  • One
  • Two
  • Three
<ul class="list-unstyled">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

Spacing Helpers

In order to apply the spacing scale on pages, a set of predefined helper classes exist for both margins and paddings.

Margin Helpers

Scale Location Helper Class Example
0 all .m-0
Content
1 all .m-1
Content
2 all .m-2
Content
3 all .m-3
Content
4 all .m-4
Content
5 all .m-5
Content
0 horizontal .mx-0
Content
1 horizontal .mx-1
Content
2 horizontal .mx-2
Content
3 horizontal .mx-3
Content
4 horizontal .mx-4
Content
5 horizontal .mx-5
Content
0 vertical .my-0
Content
1 vertical .my-1
Content
2 vertical .my-2
Content
3 vertical .my-3
Content
4 vertical .my-4
Content
5 vertical .my-5
Content
0 top .mt-0
Content
1 top .mt-1
Content
2 top .mt-2
Content
3 top .mt-3
Content
4 top .mt-4
Content
5 top .mt-5
Content
0 right .mr-0
Content
1 right .mr-1
Content
2 right .mr-2
Content
3 right .mr-3
Content
4 right .mr-4
Content
5 right .mr-5
Content
0 bottom .mb-0
Content
1 bottom .mb-1
Content
2 bottom .mb-2
Content
3 bottom .mb-3
Content
4 bottom .mb-4
Content
5 bottom .mb-5
Content
0 left .ml-0
Content
1 left .ml-1
Content
2 left .ml-2
Content
3 left .ml-3
Content
4 left .ml-4
Content
5 left .ml-5
Content

Padding Helpers

Scale Location Helper Class Example
0 all .p-0
Content
1 all .p-1
Content
2 all .p-2
Content
3 all .p-3
Content
4 all .p-4
Content
5 all .p-5
Content
0 horizontal .px-0
Content
1 horizontal .px-1
Content
2 horizontal .px-2
Content
3 horizontal .px-3
Content
4 horizontal .px-4
Content
5 horizontal .px-5
Content
0 vertical .py-0
Content
1 vertical .py-1
Content
2 vertical .py-2
Content
3 vertical .py-3
Content
4 vertical .py-4
Content
5 vertical .py-5
Content
0 top .pt-0
Content
1 top .pt-1
Content
2 top .pt-2
Content
3 top .pt-3
Content
4 top .pt-4
Content
5 top .pt-5
Content
0 right .pr-0
Content
1 right .pr-1
Content
2 right .pr-2
Content
3 right .pr-3
Content
4 right .pr-4
Content
5 right .pr-5
Content
0 bottom .pb-0
Content
1 bottom .pb-1
Content
2 bottom .pb-2
Content
3 bottom .pb-3
Content
4 bottom .pb-4
Content
5 bottom .pb-5
Content
0 left .pl-0
Content
1 left .pl-1
Content
2 left .pl-2
Content
3 left .pl-3
Content
4 left .pl-4
Content
5 left .pl-5
Content

Responsive Videos

<div class="embed-video">
  <!-- code from YouTube -->
  <iframe
    width="640"
    height="360"
    src="https://www.youtube.com/embed/rY5D38RQoEg"
    frameborder="0"
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
  ></iframe>
  <!-- /code from YouTube -->
</div>

Hide elements on mobile

If you would like to hide any element only on mobile screens you can use the .hide-on-mobile class helper.

A secret message for desktop users: ♥️

If you can see the secret message above try resizing the window!

<h1 class="hide-on-mobile">A secret message for desktop users: ♥️</h1>

<p>If you can see the secret message above try resizing the window!</p>

Turn off link-underline styles

You will probably have noticed that all links automatically have custom underline functionality:

<div class="p-3">
  <a href="https://emberjs.com/">Ember Homepage</a>
</div>

To get the style that we wanted we needed to implement a custom background image for all links instead of making use of the text-decoration: underline styles. If you have a link (or a set of links) that you would like to turn off this behaviour then you can use the bg-none helper to turn off this styling:

<div class="p-3 bg-none">
  <a href="https://emberjs.com/">Ember Homepage</a>
</div>