ember-slimguide
Version:
A test for bottled-ember
1 lines • 11.2 kB
JSON
{"data":{"type":"contents","id":"css/helpers","attributes":{"html":"<h1 id=\"csshelperclasses\">CSS Helper Classes</h1>\n<h2 id=\"theminghelpers\">Theming Helpers</h2>\n<p>All of the below will set the desired background color and ensure corresponding foreground colors as well.</p>\n<h3 id=\"lightbackground\">Light Background</h3>\n<p>If you would like a section or a div to use the dark style then you need to add <code>class=\"bg-light\"</code> to the element that you would like to be light.</p>\n<pre><code class=\"html language-html\"><div class=\"bg-light\">\n hello there\n</div>\n</code></pre>\n<h3 id=\"lightmutedbackground\">Light Muted Background</h3>\n<p>If you would like a section or a div to use the dark style then you need to add <code>class=\"bg-light-muted\"</code> to the element that you would like to be light, but slightly darker.</p>\n<pre><code class=\"html language-html\"><div class=\"bg-light-muted\">\n hello there\n</div>\n</code></pre>\n<h3 id=\"darkbackground\">Dark Background</h3>\n<p>If you would like a section or a div to use the dark style then you need to add <code>class=\"bg-dark\"</code> to the element that you would like to be dark.</p>\n<pre><code class=\"html language-html\"><div class=\"bg-dark\">\n hello there\n</div>\n</code></pre>\n<p>Please note that there currently is no <code>bg-dark-muted</code>, as it's unused.</p>\n<h2 id=\"borderhelpers\">Border Helpers</h2>\n<p>If you want to adjust border properties.</p>\n<h3 id=\"roundedcorners\">Rounded Corners</h3>\n<pre><code class=\"html language-html\"><div class=\"rounded bg-brand m-1 p-1 text-light\">Hello!</div>\n</code></pre>\n<pre><code class=\"html language-html\"><div class=\"rounded-lg m-1 p-1 bg-dark\">Hello!</div>\n</code></pre>\n<h2 id=\"liststyles\">List Styles</h2>\n<p>If you want to remove default list styling you can use the <code>list-unstyled</code> css helper</p>\n<pre><code class=\"html language-html\"><ul class=\"list-unstyled\">\n <li>One</li>\n <li>Two</li>\n <li>Three</li>\n</ul>\n</code></pre>\n<h2 id=\"spacinghelpers\">Spacing Helpers</h2>\n<p>In order to apply the spacing scale on pages, a set of predefined helper classes exist for both margins and paddings.</p>\n<h3 id=\"marginhelpers\">Margin Helpers</h3>\n<table class=\"mb-5\">\n <thead>\n <tr>\n <th>Scale</th>\n <th>Location</th>\n <th>Helper Class</th>\n <th>Example</th>\n </tr>\n </thead>\n <tbody>\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 <tr>\n <td>{{size}}</td>\n <td>{{direction.name}}</td>\n <td><code>.m{{direction.value}}-{{size}}</code></td>\n <td>\n <div class=\"bg-light-muted border-dashed\">\n <div class=\"bg-dark m{{direction.value}}-{{size}}\">Content</div>\n </div>\n </td>\n </tr>\n {{/each}}\n {{/each}}\n </tbody>\n</table>\n<h3 id=\"paddinghelpers\">Padding Helpers</h3>\n<table class=\"mb-5\">\n <thead>\n <tr>\n <th>Scale</th>\n <th>Location</th>\n <th>Helper Class</th>\n <th>Example</th>\n </tr>\n </thead>\n <tbody>\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 <tr>\n <td>{{size}}</td>\n <td>{{direction.name}}</td>\n <td><code>.p{{direction.value}}-{{size}}</code></td>\n <td>\n <div class=\"bg-light-muted border-dashed \">\n <div class=\"bg-dark p{{direction.value}}-{{size}}\">Content</div>\n </div>\n </td>\n </tr>\n {{/each}}\n {{/each}}\n </tbody>\n</table>\n<h3 id=\"responsivevideos\">Responsive Videos</h3>\n<pre><code class=\"html language-html\"><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</code></pre>\n<h3 id=\"hideelementsonmobile\">Hide elements on mobile</h3>\n<p>If you would like to hide any element only on mobile screens you can use the <code>.hide-on-mobile</code> class helper.</p>\n<pre><code class=\"html language-html\"><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</code></pre>\n<h2 id=\"turnofflinkunderlinestyles\">Turn off link-underline styles</h2>\n<p>You will probably have noticed that all links automatically have custom underline functionality:</p>\n<pre><code class=\"html language-html\"><div class=\"p-3\">\n <a href=\"https://emberjs.com/\">Ember Homepage</a>\n</div>\n</code></pre>\n<p>To get the style that we wanted we needed to implement a custom background image for all links instead of making use of the <code>text-decoration: underline</code> 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 <code>bg-none</code> helper to turn off this styling:</p>\n<pre><code class=\"html language-html\"><div class=\"p-3 bg-none\">\n <a href=\"https://emberjs.com/\">Ember Homepage</a>\n</div>\n</code></pre>","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<div class=\"bg-light\">\n hello there\n</div>\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<div class=\"bg-light-muted\">\n hello there\n</div>\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<div class=\"bg-dark\">\n hello there\n</div>\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<div class=\"rounded bg-brand m-1 p-1 text-light\">Hello!</div>\n```\n\n```html\n<div class=\"rounded-lg m-1 p-1 bg-dark\">Hello!</div>\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<ul class=\"list-unstyled\">\n <li>One</li>\n <li>Two</li>\n <li>Three</li>\n</ul>\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<table class=\"mb-5\">\n <thead>\n <tr>\n <th>Scale</th>\n <th>Location</th>\n <th>Helper Class</th>\n <th>Example</th>\n </tr>\n </thead>\n <tbody>\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 <tr>\n <td>{{size}}</td>\n <td>{{direction.name}}</td>\n <td><code>.m{{direction.value}}-{{size}}</code></td>\n <td>\n <div class=\"bg-light-muted border-dashed\">\n <div class=\"bg-dark m{{direction.value}}-{{size}}\">Content</div>\n </div>\n </td>\n </tr>\n {{/each}}\n {{/each}}\n </tbody>\n</table>\n\n### Padding Helpers\n\n<table class=\"mb-5\">\n <thead>\n <tr>\n <th>Scale</th>\n <th>Location</th>\n <th>Helper Class</th>\n <th>Example</th>\n </tr>\n </thead>\n <tbody>\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 <tr>\n <td>{{size}}</td>\n <td>{{direction.name}}</td>\n <td><code>.p{{direction.value}}-{{size}}</code></td>\n <td>\n <div class=\"bg-light-muted border-dashed \">\n <div class=\"bg-dark p{{direction.value}}-{{size}}\">Content</div>\n </div>\n </td>\n </tr>\n {{/each}}\n {{/each}}\n </tbody>\n</table>\n\n### Responsive Videos\n\n```html\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\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<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\n## Turn off link-underline styles\n\nYou will probably have noticed that all links automatically have custom underline functionality:\n\n```html\n<div class=\"p-3\">\n <a href=\"https://emberjs.com/\">Ember Homepage</a>\n</div>\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<div class=\"p-3 bg-none\">\n <a href=\"https://emberjs.com/\">Ember Homepage</a>\n</div>\n```"}}}