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:

Ember Homepage

<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:

Ember Homepage

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