{"data":{"type":"contents","id":"css/helpers","attributes":{"html":"

CSS Helper Classes

\n

Theming Helpers

\n

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

\n

Light Background

\n

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.

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

Light Muted Background

\n

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.

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

Dark Background

\n

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.

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

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

\n

Border Helpers

\n

If you want to adjust border properties.

\n

Rounded Corners

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

List Styles

\n

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

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

Spacing Helpers

\n

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

\n

Margin Helpers

\n\n \n \n \n \n \n \n \n \n \n {{#each\n (array\n (hash value='' name='all')\n (hash value='x' name=\"horizontal\")\n (hash value='y' name=\"vertical\")\n (hash value='t' name=\"top\")\n (hash value='r' name=\"right\")\n (hash value='b' name=\"bottom\")\n (hash value='l' name=\"left\")\n ) as |direction|\n }}\n {{#each (array '0' '1' '2' '3' '4' '5') as |size|}}\n \n \n \n \n \n \n {{/each}}\n {{/each}}\n \n
ScaleLocationHelper ClassExample
{{size}}{{direction.name}}.m{{direction.value}}-{{size}}\n
\n
Content
\n
\n
\n

Padding Helpers

\n\n \n \n \n \n \n \n \n \n \n {{#each\n (array\n (hash value='' name='all')\n (hash value='x' name=\"horizontal\")\n (hash value='y' name=\"vertical\")\n (hash value='t' name=\"top\")\n (hash value='r' name=\"right\")\n (hash value='b' name=\"bottom\")\n (hash value='l' name=\"left\")\n ) as |direction|\n }}\n {{#each (array '0' '1' '2' '3' '4' '5') as |size|}}\n \n \n \n \n \n \n {{/each}}\n {{/each}}\n \n
ScaleLocationHelper ClassExample
{{size}}{{direction.name}}.p{{direction.value}}-{{size}}\n
\n
Content
\n
\n
\n

Responsive Videos

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

Hide elements on mobile

\n

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

\n
<h1 class=\"hide-on-mobile\">A secret message for desktop users: ♥️</h1>\n\n<p>If you can see the secret message above try resizing the window!</p>\n
\n

Turn off link-underline styles

\n

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

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

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:

\n
<div class=\"p-3 bg-none\">\n  <a href=\"https://emberjs.com/\">Ember Homepage</a>\n</div>\n
","content":"# CSS Helper Classes\n\n## Theming Helpers\n\nAll of the below will set the desired background color and ensure corresponding foreground colors as well.\n\n### Light Background\n\nIf 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.\n\n```html\n
\n hello there\n
\n```\n\n### Light Muted Background\n\nIf 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.\n\n```html\n
\n hello there\n
\n```\n\n### Dark Background\n\nIf 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.\n\n```html\n
\n hello there\n
\n```\n\nPlease note that there currently is no `bg-dark-muted`, as it's unused.\n\n## Border Helpers\n\nIf you want to adjust border properties.\n\n### Rounded Corners\n\n```html\n
Hello!
\n```\n\n```html\n
Hello!
\n```\n\n## List Styles\n\nIf you want to remove default list styling you can use the `list-unstyled` css helper\n\n```html\n\n```\n\n## Spacing Helpers\n\nIn order to apply the spacing scale on pages, a set of predefined helper classes exist for both margins and paddings.\n\n### Margin Helpers\n\n\n \n \n \n \n \n \n \n \n \n {{#each\n (array\n (hash value='' name='all')\n (hash value='x' name=\"horizontal\")\n (hash value='y' name=\"vertical\")\n (hash value='t' name=\"top\")\n (hash value='r' name=\"right\")\n (hash value='b' name=\"bottom\")\n (hash value='l' name=\"left\")\n ) as |direction|\n }}\n {{#each (array '0' '1' '2' '3' '4' '5') as |size|}}\n \n \n \n \n \n \n {{/each}}\n {{/each}}\n \n
ScaleLocationHelper ClassExample
{{size}}{{direction.name}}.m{{direction.value}}-{{size}}\n
\n
Content
\n
\n
\n\n### Padding Helpers\n\n\n \n \n \n \n \n \n \n \n \n {{#each\n (array\n (hash value='' name='all')\n (hash value='x' name=\"horizontal\")\n (hash value='y' name=\"vertical\")\n (hash value='t' name=\"top\")\n (hash value='r' name=\"right\")\n (hash value='b' name=\"bottom\")\n (hash value='l' name=\"left\")\n ) as |direction|\n }}\n {{#each (array '0' '1' '2' '3' '4' '5') as |size|}}\n \n \n \n \n \n \n {{/each}}\n {{/each}}\n \n
ScaleLocationHelper ClassExample
{{size}}{{direction.name}}.p{{direction.value}}-{{size}}\n
\n
Content
\n
\n
\n\n### Responsive Videos\n\n```html\n
\n \n \n \n
\n```\n\n### Hide elements on mobile\n\nIf you would like to hide any element only on mobile screens you can use the `.hide-on-mobile` class helper.\n\n```html\n

A secret message for desktop users: ♥️

\n\n

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

\n```\n\n## Turn off link-underline styles\n\nYou will probably have noticed that all links automatically have custom underline functionality:\n\n```html\n
\n Ember Homepage\n
\n```\n\nTo 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:\n\n```html\n
\n Ember Homepage\n
\n```"}}}