It is also possible to style a link to look like a button using the es-button or es-button-secondary class.
\n
<a href=\"https://emberjs.com\" class=\"es-button\">Go to Ember homepage</a>\n<a href=\"https://guides.emberjs.com\" class=\"es-button-secondary\">Go to the Guides</a>\n
","content":"# Button\n\n## Usage\n\nSimplest use case: a button with text in it, telling the user what to do.\n\n```html\n\n```\n\n## Secondary Buttons\n\n```html\n\n```\n\n## Styling Links\nIt is also possible to style a link to look like a button using the `es-button` or `es-button-secondary` class.\n\n```html\nGo to Ember homepage\nGo to the Guides\n```"}},{"type":"contents","id":"components/card","attributes":{"html":"
Card
\n
A card component that serves as a content container for images, text and links. When used within grid layouts cards are expected to share the same content structure and matching height. For accessibility reasons cards should always be implemented as lists, and for this reason the <EsCard> component's root element is a <li> so it should always be wrapped in a <ul>.
\n
Here is an example of a card
\n
<ul class=\"list-unstyled layout\">\n <li class=\"card lg:col-2\">\n <div class=\"card__content\">\n This is a card\n </div>\n </li>\n</ul>\n
\n
You can also add an image to the card using the @image parameter:
\n
<ul class=\"list-unstyled layout\">\n <li class=\"card card--image lg:col-2\">\n <img class=\"card__image\" src=\"/images/ember-logo.png\" alt=\"\" role=\"presentation\">\n <div class=\"card__content\">\n This is a card\n </div>\n </li>\n</ul>\n
\n
Here is a fuller example of a card that has more structure in the card body
","content":"# Card\n\nA card component that serves as a content container for images, text and links. When used within grid layouts cards are expected to share the same content structure and matching height. For accessibility reasons cards should always be implemented as lists, and for this reason the `` component's root element is a `
` so it should always be wrapped in a `
`.\n\nHere is an example of a card\n\n```html\n
\n
\n
\n This is a card\n
\n
\n
\n```\n\nYou can also add an image to the card using the `@image` parameter:\n\n```html\n
\n
\n \n
\n This is a card\n
\n
\n
\n```\n\nHere is a fuller example of a card that has more structure in the card body\n\n```html\n
\n
\n \n
\n
Ember.js
\n
A framework for ambitious web developers. Try it out!
","content":"# Global Header\n\nShows the side wide header with the global navigation.\n\n```html\n\n \n\n```"}},{"type":"contents","id":"concepts/accessibility","attributes":{"html":"
It is 100% okay to ship code that can iterate to being a more inclusive experience- as long as it can still be used by people with assistive technology.
\n
It is not okay to ship code that actively breaks the experience for users with assistive technology.
\n
","content":"# Accessibility\n\n## Code Guide\n\nOur goal is to meet [WCAG](https://www.w3.org/WAI/standards-guidelines/aria/) [AA level conformance](https://www.w3.org/WAI/WCAG21/quickref/?currentsidebar=%23col_customize&levels=aaa&technologies=flash%2Csl) for all Ember.js websites.\n\n### Iterative Improvements\n- It is 100% okay to ship code that can iterate to being a more inclusive experience- as long as it can still be used by people with assistive technology. \n- It is not okay to ship code that actively breaks the experience for users with assistive technology."}},{"type":"contents","id":"concepts/background-shapes","attributes":{"html":"
Background Shapes
\n
In the new design we have a number of background shapes that can be used to spruce up the design of sections of the website if necessary.
\n
Background boxes
\n
To use the \"background boxes\" shape then you need to use the bg-shape-boxes css helper as follows
\n
<div class=\"layout bg-shape-boxes bg-dark py-5\">\n <div class=\"lg:col-4 lg:start-2 text-center\">\n <h1>Build with the teams that never stop shipping.</h1>\n <p>\n Some of the best development teams in the world have been iterating on their products for\n years with Ember. With scalable UI architecture baked-in from the start, you’ll be working\n with the same patterns these organizations use every step of the way.\n </p>\n </div>\n <div class=\"m-4 text-center\">\n <h2>More stuff to show location of boxes</h2>\n </div>\n <div class=\"m-4 text-center\">\n <h2>Even more stuff to show location of boxes</h2>\n </div>\n</div>\n
\n
There is an alternative \"background boxes\" shape that you can use with bg-shape-boxes-bottom that will automatically continue into the following dom node (e.g. the next div)
\n
<div class=\"layout bg-shape-boxes-bottom bg-dark py-5\">\n <div class=\"lg:col-4 lg:start-2 text-center py-5\">\n <h1>Build with the teams that never stop shipping.</h1>\n <p>\n Some of the best development teams in the world have been iterating on their products for\n years with Ember. With scalable UI architecture baked-in from the start, you’ll be working\n with the same patterns these organizations use every step of the way.\n </p>\n </div>\n</div>\n<div class=\"layout py-5\">\n <div class=\"lg:col-4 lg:start-2 text-center\">\n <h2>More content to show off the shapes</h2>\n <p>\n Some of the best development teams in the world have been iterating on their products for\n years with Ember. With scalable UI architecture baked-in from the start, you’ll be working\n with the same patterns these organizations use every step of the way.\n </p>\n </div>\n</div>\n
\n
Swipes
\n
The other type of background shape is a \"swipe\" that can either be a swipe across the top of the section using bg-shape-swipe-top or a rectangle from the bottom of the section using bg-shape-swipe-bottom.
\n
<div class=\"layout bg-shape-swipe-top py-5\">\n <div class=\"lg:col-4 lg:start-2 text-center text-light my-4\">\n <h2>Build with the teams that never stop shipping.</h2>\n <p>\n Some of the best development teams in the world have been iterating on their products for\n years with Ember. With scalable UI architecture baked-in from the start, you’ll be working\n with the same patterns these organizations use every step of the way.\n </p>\n </div>\n <div class=\"text-center my-4\">\n <h2>More stuff to show location of swipe</h2>\n </div>\n\n <div class=\"text-center my-4\">\n <h2>Even more stuff to show location of swipe</h2>\n </div>\n</div>\n
\n
and then using the bg-shape-swipe-bottom we can get a shape for the bottom of a section:
\n
<div class=\"layout bg-dark bg-shape-swipe-bottom py-5\">\n <div class=\"lg:col-4 lg:start-2 text-center my-4\">\n <h2>Build with the teams that never stop shipping.</h2>\n <p>\n Some of the best development teams in the world have been iterating on their products for\n years with Ember. With scalable UI architecture baked-in from the start, you’ll be working\n with the same patterns these organizations use every step of the way.\n </p>\n </div>\n <div class=\"text-center my-4\">\n <h2>More stuff to show location of swipe</h2>\n </div>\n <div class=\"text-center my-4\">\n <h2>Even more stuff to show location of swipe</h2>\n </div>\n <div class=\"text-center my-4\">\n <h2>yes this needs quite a large section</h2>\n </div>\n</div>\n
","content":"# Background Shapes\n\nIn the new design we have a number of background shapes that can be used to spruce up the design of sections of the website if necessary.\n\n## Background boxes\n\nTo use the \"background boxes\" shape then you need to use the `bg-shape-boxes` css helper as follows\n\n```html\n
\n
\n
Build with the teams that never stop shipping.
\n
\n Some of the best development teams in the world have been iterating on their products for\n years with Ember. With scalable UI architecture baked-in from the start, you’ll be working\n with the same patterns these organizations use every step of the way.\n
\n
\n
\n
More stuff to show location of boxes
\n
\n
\n
Even more stuff to show location of boxes
\n
\n
\n```\n\nThere is an alternative \"background boxes\" shape that you can use with `bg-shape-boxes-bottom` that will automatically continue into the following dom node (e.g. the next div)\n\n```html\n
\n
\n
Build with the teams that never stop shipping.
\n
\n Some of the best development teams in the world have been iterating on their products for\n years with Ember. With scalable UI architecture baked-in from the start, you’ll be working\n with the same patterns these organizations use every step of the way.\n
\n
\n
\n
\n
\n
More content to show off the shapes
\n
\n Some of the best development teams in the world have been iterating on their products for\n years with Ember. With scalable UI architecture baked-in from the start, you’ll be working\n with the same patterns these organizations use every step of the way.\n
\n
\n
\n```\n\n## Swipes\n\nThe other type of background shape is a \"swipe\" that can either be a swipe across the top of the section using `bg-shape-swipe-top` or a rectangle from the bottom of the section using `bg-shape-swipe-bottom`.\n\n```html\n
\n
\n
Build with the teams that never stop shipping.
\n
\n Some of the best development teams in the world have been iterating on their products for\n years with Ember. With scalable UI architecture baked-in from the start, you’ll be working\n with the same patterns these organizations use every step of the way.\n
\n
\n
\n
More stuff to show location of swipe
\n
\n\n
\n
Even more stuff to show location of swipe
\n
\n
\n```\n\nand then using the `bg-shape-swipe-bottom` we can get a shape for the bottom of a section:\n\n```html\n
\n
\n
Build with the teams that never stop shipping.
\n
\n Some of the best development teams in the world have been iterating on their products for\n years with Ember. With scalable UI architecture baked-in from the start, you’ll be working\n with the same patterns these organizations use every step of the way.\n
Website elements like text and icons should meet accesibility standards when used against colored backgrounds. The following swatches contain a sample of each of the primary palette colors, along with recommendations for its usage and the acceptable contrast guidelines when coupled with text.
\n
Primary Colors
\n
The primary palette is applied across every page of the website and contains the brand, accent and neutral colors. The purpose of the primary palette is to keep uniformity across all pages while encouraging accessibility best practices.
These colors are for charts and diagrams only. The secondary palette is applied to UI elements and is not part of the base colors. The purpose of the secondary palette is to ensure the readability, usability, and accessibility of charts and diagrams and enhance the communication of actions, changes in state, or errors.
\n
\n \n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
","content":"# Colors\n\n### Usage\n\n#### Legibility\n\nWebsite elements like text and icons should meet accesibility standards when used against colored backgrounds. The following swatches contain a sample of each of the primary palette colors, along with recommendations for its usage and the acceptable contrast guidelines when coupled with text.\n\n## Primary Colors\n\nThe primary palette is applied across every page of the website and contains the brand, accent and neutral colors. The purpose of the primary palette is to keep uniformity across all pages while encouraging accessibility best practices.\n\n\n\n\n
\n\n## Illustration Colors\n\nThese colors are for charts and diagrams only. The secondary palette is applied to UI elements and is not part of the base colors. The purpose of the secondary palette is to ensure the readability, usability, and accessibility of charts and diagrams and enhance the communication of actions, changes in state, or errors.\n\n
The layout clases exist to maintain a consistent structure across all pages, with built-in responsive support.
\n
Container
\n
The container is a box that wraps all content area components in a page. The main width of content is defined by using a .container CSS class. This will automatically centre content and make sure that it stays within the defined \"max width\" of the container. Here is an example of a dark background with some content in the middle:
This container should be used on most pages to keep content aligned with headers and footers (and other content).
\n
Layout
\n
Layout provides a way to arrange different types of content into single or multiple columns. There are currently two types of layouts in the ember-styleguide that have different purposes and usecases.
\n
Layout for general pages
\n
The general layout helper is layout that will automatically apply a reasonable layout for most text based pages. Using the layout helper on its own will only apply spacing between elements in the page:
\n
<ul class=\"layout list-unstyled\">\n <li class=\"card \">\n <div class=\"card__content\">\n Some of the best development teams in the world have been iterating on their\n products for years with Ember. With scalable UI architecture baked-in from\n the start, you’ll be working with the same patterns these organizations use\n every step of the way.\n </div>\n </li>\n <li class=\"card \">\n <div class=\"card__content\">\n Some of the best development teams in the world have been iterating on their\n products for years with Ember. With scalable UI architecture baked-in from\n the start, you’ll be working with the same patterns these organizations use\n every step of the way.\n </div>\n</li>\n <li class=\"card \">\n <div class=\"card__content\">\n Some of the best development teams in the world have been iterating on their\n products for years with Ember. With scalable UI architecture baked-in from\n the start, you’ll be working with the same patterns these organizations use\n every step of the way.\n </div>\n</li>\n <li class=\"card \">\n <div class=\"card__content\">\n Some of the best development teams in the world have been iterating on their\n products for years with Ember. With scalable UI architecture baked-in from\n the start, you’ll be working with the same patterns these organizations use\n every step of the way.\n </div>\n</li>\n</ul>\n
\n
The true power of the layout helper is when you want to have some elements take up different widths:
\n
<ul class=\"layout list-unstyled\">\n <li class=\"card lg:col-3\">\n <div class=\"card__content\">\n Some of the best development teams in the world have been iterating on their\n products for years with Ember. With scalable UI architecture baked-in from\n the start, you’ll be working with the same patterns these organizations use\n every step of the way.\n </div>\n</li>\n <li class=\"card lg:col-3\">\n <div class=\"card__content\">\n Some of the best development teams in the world have been iterating on their\n products for years with Ember. With scalable UI architecture baked-in from\n the start, you’ll be working with the same patterns these organizations use\n every step of the way.\n </div>\n</li>\n <li class=\"card lg:col-2\">\n <div class=\"card__content\">\n Some of the best development teams in the world have been iterating on their\n products for years with Ember. With scalable UI architecture baked-in from\n the start, you’ll be working with the same patterns these organizations use\n every step of the way.\n </div>\n</li>\n <li class=\"card lg:col-3\">\n <div class=\"card__content\">\n Some of the best development teams in the world have been iterating on their\n products for years with Ember. With scalable UI architecture baked-in from\n the start, you’ll be working with the same patterns these organizations use\n every step of the way.\n </div>\n</li>\n</ul>\n
\n
The layout is based on a 6-column layout on larger screens and 4-column on smaller screens. Anything that is prefixed with lg: will only apply on larger widths, so the example above will fallback to full width when viewed on smaller screens. If you want to apply column rules only on smaller screens you can use the helpers prefixed with sm:
\n
Now we will go through a few examples that will hopefully give you some inspiration for what you can achieve with the existing helpers.
\n
Center-Aligned fixed-width column
\n
Here is an example of a centered element that only takes up 4 (out of the available 6) columns. A column class is used to limit its width and an offset class is used to define where it should start. Note: because both of these rules start with lg: they will not apply on mobile and it will fallback to being a full-width UI.
\n
<div class=\"layout\">\n <div class=\"lg:col-4 lg:start-2 text-center\">\n <h2>Build with the teams that never stop shipping.</h2>\n <p>\n Some of the best development teams in the world have been iterating on\n their products for years with Ember. With scalable UI architecture\n baked-in from the start, you’ll be working with the same patterns these\n organizations use every step of the way.\n </p>\n </div>\n</div>\n
\n
Left-Aligned half-width
\n
<div class=\"layout\">\n <div class=\"lg:col-3\">\n <h3>A Simple Component</h3>\n <p>\n Ember Components are a superset of HTML – that means is a full-fledged\n Ember Component! To pass data into Components, use the @ symbol along with\n an argument name.\n </p>\n </div>\n</div>\n
\n
Column Order
\n
Columns can be reordered by specifying a start column for two elements, making them start in switched places.
\n
<div class=\"layout\">\n <div class=\"lg:col-4 lg:start-3\">\n <h3>A Simple Component</h3>\n <p>\n Ember Components are a superset of HTML – that means is a full-fledged\n Ember Component! To pass data into Components, use the @ symbol along with\n an argument name.\n </p>\n </div>\n <div class=\"lg:col-2 lg:start-1 bg-brand\"></div>\n</div>\n
\n
If you look at the DOM for the above example you will see that the order hasn't changed so this is essentially just a visual change. This helps with accessibility, but it also means that when you view this example on mobile the visual order will reflect the DOM order. This is particularly useful for cases where you want to alternate order of things on desktop but want the visual order to be different on mobile. View this next example on mobile to see the effect in action:
\n
<div class=\"layout\">\n <div class=\"lg:col-4\">\n <h3>A Simple Component</h3>\n <p>\n Ember Components are a superset of HTML – that means is a full-fledged\n Ember Component! To pass data into Components, use the @ symbol along with\n an argument name.\n </p>\n </div>\n <img height=\"50px\" src=\"/ember-logo.png\" class=\"lg:col-2\" />\n <div class=\"lg:col-4 lg:start-3\">\n <h3>A Simple Component</h3>\n <p>\n Ember Components are a superset of HTML – that means is a full-fledged\n Ember Component! To pass data into Components, use the @ symbol along with\n an argument name.\n </p>\n </div>\n <img height=\"50px\" src=\"/ember-logo.png\" class=\"lg:col-2 lg:start-1\" />\n <div class=\"lg:col-4\">\n <h3>A Simple Component</h3>\n <p>\n Ember Components are a superset of HTML – that means is a full-fledged\n Ember Component! To pass data into Components, use the @ symbol along with\n an argument name.\n </p>\n </div>\n <img height=\"50px\" src=\"/ember-logo.png\" class=\"lg:col-2\" />\n</div>\n
\n
Grid
\n
If you have elements that need a regular repeating pattern you should use the grid helper instead of the above layout. It is designed specifically to make sure that you can have varying number of elements that are equally spaced on each row and is more convenient to use when you know everything is going to be the same size and distribution.
\n
<ul class=\"grid lg:grid-3 list-unstyled\">\n <li class=\"card text-center\">\n <div class=\"card__content\">\n <h3>Podcasts</h3>\n <p>Rock n' Roll with EmberJS.</p>\n </div>\n</li>\n\n <li class=\"card text-center\">\n <div class=\"card__content\">\n <h3>Books</h3>\n <p>Rock n' Roll with EmberJS.</p>\n </div>\n</li>\n\n <li class=\"card text-center\">\n <div class=\"card__content\">\n <h3>Videos</h3>\n <p>Rock n' Roll with EmberJS.</p>\n </div>\n</li>\n</ul>\n
\n
You can specify the number of items per row by using anything from lg:grid-2 to lg:grid-5 on desktop, and sm:grid-2 to sm:grid-4 on mobile.
\n
<ul class=\"grid lg:grid-2 list-unstyled\">\n <li>\n <li class=\"card text-center\">\n <div class=\"card__content\">\n <h3>Podcasts</h3>\n <p>Rock n' Roll with EmberJS.</p>\n </div>\n</li>\n </li>\n\n <li>\n <li class=\"card text-center\">\n <div class=\"card__content\">\n <h3>Books</h3>\n <p>Rock n' Roll with EmberJS.</p>\n </div>\n</li>\n </li>\n\n <li>\n <li class=\"card text-center\">\n <div class=\"card__content\">\n <h3>Videos</h3>\n <p>Rock n' Roll with EmberJS.</p>\n </div>\n</li>\n </li>\n</ul>\n
\n
Spacing Scale
\n
The spacing scale is used to manage spacing a white-space within layouts and components.\nThe spacing scale can be applied to both margin and padding properties.
","content":"# Layout\n\nThe layout clases exist to maintain a consistent structure across all pages, with built-in responsive support.\n\n## Container\n\nThe container is a box that wraps all content area components in a page. The main width of content is defined by using a `.container` CSS class. This will automatically centre content and make sure that it stays within the defined \"max width\" of the container. Here is an example of a dark background with some content in the middle:\n\n```html\n
\n \n
Hi there
\n
Some content
\n \n
\n```\n\nThis container should be used on most pages to keep content aligned with headers and footers (and other content).\n\n## Layout\n\nLayout provides a way to arrange different types of content into single or multiple columns. There are currently two types of layouts in the `ember-styleguide` that have different purposes and usecases.\n\n## Layout for general pages\n\nThe general layout helper is `layout` that will automatically apply a reasonable layout for most text based pages. Using the layout helper on its own will only apply spacing between elements in the page:\n\n\n```html\n
\n
\n
\n Some of the best development teams in the world have been iterating on their\n products for years with Ember. With scalable UI architecture baked-in from\n the start, you’ll be working with the same patterns these organizations use\n every step of the way.\n
\n
\n
\n
\n Some of the best development teams in the world have been iterating on their\n products for years with Ember. With scalable UI architecture baked-in from\n the start, you’ll be working with the same patterns these organizations use\n every step of the way.\n
\n
\n
\n
\n Some of the best development teams in the world have been iterating on their\n products for years with Ember. With scalable UI architecture baked-in from\n the start, you’ll be working with the same patterns these organizations use\n every step of the way.\n
\n
\n
\n
\n Some of the best development teams in the world have been iterating on their\n products for years with Ember. With scalable UI architecture baked-in from\n the start, you’ll be working with the same patterns these organizations use\n every step of the way.\n
\n
\n
\n```\n\nThe true power of the `layout` helper is when you want to have some elements take up different widths:\n\n```html\n
\n
\n
\n Some of the best development teams in the world have been iterating on their\n products for years with Ember. With scalable UI architecture baked-in from\n the start, you’ll be working with the same patterns these organizations use\n every step of the way.\n
\n
\n
\n
\n Some of the best development teams in the world have been iterating on their\n products for years with Ember. With scalable UI architecture baked-in from\n the start, you’ll be working with the same patterns these organizations use\n every step of the way.\n
\n
\n
\n
\n Some of the best development teams in the world have been iterating on their\n products for years with Ember. With scalable UI architecture baked-in from\n the start, you’ll be working with the same patterns these organizations use\n every step of the way.\n
\n
\n
\n
\n Some of the best development teams in the world have been iterating on their\n products for years with Ember. With scalable UI architecture baked-in from\n the start, you’ll be working with the same patterns these organizations use\n every step of the way.\n
\n
\n
\n```\n\nThe layout is based on a 6-column layout on larger screens and 4-column on smaller screens. Anything that is prefixed with `lg:` will only apply on larger widths, so the example above will fallback to full width when viewed on smaller screens. If you want to apply column rules only on smaller screens you can use the helpers prefixed with `sm:`\n\nNow we will go through a few examples that will hopefully give you some inspiration for what you can achieve with the existing helpers.\n\n### Center-Aligned fixed-width column\n\nHere is an example of a centered element that only takes up 4 (out of the available 6) columns. A column class is used to limit its width and an offset class is used to define where it should start. **Note:** because both of these rules start with `lg:` they will not apply on mobile and it will fallback to being a full-width UI.\n\n```html\n
\n
\n
Build with the teams that never stop shipping.
\n
\n Some of the best development teams in the world have been iterating on\n their products for years with Ember. With scalable UI architecture\n baked-in from the start, you’ll be working with the same patterns these\n organizations use every step of the way.\n
\n
\n
\n```\n\n### Left-Aligned half-width\n\n```html\n
\n
\n
A Simple Component
\n
\n Ember Components are a superset of HTML – that means is a full-fledged\n Ember Component! To pass data into Components, use the @ symbol along with\n an argument name.\n
\n
\n
\n```\n\n#### Column Order\n\nColumns can be reordered by specifying a start column for two elements, making them start in switched places.\n\n```html\n
\n
\n
A Simple Component
\n
\n Ember Components are a superset of HTML – that means is a full-fledged\n Ember Component! To pass data into Components, use the @ symbol along with\n an argument name.\n
\n
\n \n
\n```\n\nIf you look at the DOM for the above example you will see that the order hasn't changed so this is essentially just a visual change. This helps with accessibility, but it also means that when you view this example on mobile the visual order will reflect the DOM order. This is particularly useful for cases where you want to alternate order of things on desktop but want the visual order to be different on mobile. View this next example on mobile to see the effect in action:\n\n```html\n
\n
\n
A Simple Component
\n
\n Ember Components are a superset of HTML – that means is a full-fledged\n Ember Component! To pass data into Components, use the @ symbol along with\n an argument name.\n
\n
\n \n
\n
A Simple Component
\n
\n Ember Components are a superset of HTML – that means is a full-fledged\n Ember Component! To pass data into Components, use the @ symbol along with\n an argument name.\n
\n
\n \n
\n
A Simple Component
\n
\n Ember Components are a superset of HTML – that means is a full-fledged\n Ember Component! To pass data into Components, use the @ symbol along with\n an argument name.\n
\n
\n \n
\n```\n\n## Grid\n\nIf you have elements that need a regular repeating pattern you should use the `grid` helper instead of the above layout. It is designed specifically to make sure that you can have varying number of elements that are equally spaced on each row and is more convenient to use when you know everything is going to be the same size and distribution.\n\n```html\n
\n
\n
\n
Podcasts
\n
Rock n' Roll with EmberJS.
\n
\n
\n\n
\n
\n
Books
\n
Rock n' Roll with EmberJS.
\n
\n
\n\n
\n
\n
Videos
\n
Rock n' Roll with EmberJS.
\n
\n
\n
\n```\n\nYou can specify the number of items per row by using anything from `lg:grid-2` to `lg:grid-5` on desktop, and `sm:grid-2` to `sm:grid-4` on mobile.\n\n```html\n
\n
\n
\n
\n
Podcasts
\n
Rock n' Roll with EmberJS.
\n
\n
\n
\n\n
\n
\n
\n
Books
\n
Rock n' Roll with EmberJS.
\n
\n
\n \n\n
\n
\n
\n
Videos
\n
Rock n' Roll with EmberJS.
\n
\n
\n \n\n```\n\n## Spacing Scale\n\nThe spacing scale is used to manage spacing a white-space within layouts and components.\nThe spacing scale can be applied to both margin and padding properties.\n\n```html\n
\n
\n
\n
\n
\n
Extra Small Offset
\n
\n
\n
\n
\n
\n
\n
Small Offset
\n
\n
\n
\n
\n
\n
\n
Medium Offset
\n
\n
\n
\n
\n
\n
\n
Large Offset
\n
\n
\n
\n
\n
\n
\n
Extra Large Offset
\n
\n
\n
\n```\n\n## Applying Spacing with Helpers\n\nIn order to apply the spacing scale on pages, a set of predefined helper classes exist for both margins and paddings.\n\nCheck out [Spacing Helpers](/css/helpers#spacinghelpers) for more information"}},{"type":"contents","id":"concepts/markdown","attributes":{"html":"
Markdown
\n
A lot of the ember websites use markdown to render all or part of the page which means that we can use standard styles to render. This page is intended to be a reference implementation of all the styles that would apply to standard markdown and are supported by the Ember styleguide.
\n
{{markdown-to-html \"\n# Header 1\n\nThis is my initial paragraph, but an introduction\n\n## Header 2\n\nHere I will go into more detail... and may repeat myself a few times but please don't hold that against me. Here I will go into more detail... and may repeat myself a few times but please don't hold that against me. Here I will go into more detail... and may repeat myself a few times but please don't hold that against me. Here I will go into more detail... and may repeat myself a few times but please don't hold that against me. Here I will go into more detail... and may repeat myself a few times but please don't hold that against me. \n\n### Header 3\n\nThis section won't have much text, but it will have some other examples! \n\n- list item 1\n- list item 2\n- list item 3\n\n> You can also add some block quotes if you like.\n\n#### Header 4\n\nYou thought you got away with 3 headers, well you haven't seen nothin yet!\n\n1. order 1\n1. order 2 \n1. order 3\n\n##### Header 5\n\nWill the headers never stop!? \n\nSometimes you just want to be **bold with your words**! But other times _you might feel a bit off center_. And if you're really bad you might feel **both at the _same_ time**\n\n[Ember is the best framework](https://emberjs.com)\n\n##### Inline code\n\nLet's refer to some libraries like `ember-cli` and make sure the inline code styles are applied.\n\n--- \n\n\n\n\n\n \"}}\n
","content":"# Markdown\n\nA lot of the ember websites use markdown to render all or part of the page which means that we can use standard styles to render. This page is intended to be a reference implementation of all the styles that would apply to standard markdown and are supported by the Ember styleguide.\n\n``` handlebars\n {{markdown-to-html \"\n# Header 1\n\nThis is my initial paragraph, but an introduction\n\n## Header 2\n\nHere I will go into more detail... and may repeat myself a few times but please don't hold that against me. Here I will go into more detail... and may repeat myself a few times but please don't hold that against me. Here I will go into more detail... and may repeat myself a few times but please don't hold that against me. Here I will go into more detail... and may repeat myself a few times but please don't hold that against me. Here I will go into more detail... and may repeat myself a few times but please don't hold that against me. \n\n### Header 3\n\nThis section won't have much text, but it will have some other examples! \n\n- list item 1\n- list item 2\n- list item 3\n\n> You can also add some block quotes if you like.\n\n#### Header 4\n\nYou thought you got away with 3 headers, well you haven't seen nothin yet!\n\n1. order 1\n1. order 2 \n1. order 3\n\n##### Header 5\n\nWill the headers never stop!? \n\nSometimes you just want to be **bold with your words**! But other times _you might feel a bit off center_. And if you're really bad you might feel **both at the _same_ time**\n\n[Ember is the best framework](https://emberjs.com)\n\n##### Inline code\n\nLet's refer to some libraries like `ember-cli` and make sure the inline code styles are applied.\n\n--- \n\n\n\n\n\n \"}}\n```"}},{"type":"contents","id":"concepts/typography","attributes":{"html":"
Typography
\n
Usage
\n
Legibility
\n
Text legibility is primarily affected by color. All text on the website should comply with the Web Content Accessibility Guidelines (WCAG 2.0) Level AA requirements.
\n
Please refer to the Colors section for more information on color contrast and accessibility.
\n
Sizes
\n
Disclaimer: Use these helpers when you need to modify the look of an element in cases where using a different element would lead to the wrong semantic meaning. A good example is the Ember.js home page, where a hero element exists which contains the <h1> for that page and therefore requires all subsequent headlines to shift down one level. The design does not know about this semantic shift, so all <h2> on that page need .text-xl to look like <h1> and so on.
\n
Use .text-sm for small headings or notice paragraphs.
\n
<div class=\"text-sm\">\n Build with the teams that never stop shipping.\n</div>\n
\n
Use .text-base for body text, navigation items or links.
\n
<div class=\"text-base\">\n Build with the teams that never stop shipping.\n</div>\n
\n
.text-base is also the default paragraph size.
\n
<div>\n Build with the teams that never stop shipping.\n</div>\n
\n
Use .text-md for section headings. This is also the default size for the h3 element.
\n
<div class=\"text-md\">\n Build with the teams that never stop shipping.\n</div>\n
\n
Use .text-lg for content page headings. This is also the default size for the h2 element.
\n
<div class=\"text-lg\">\n Build with the teams that never stop shipping.\n</div>\n
\n
Use .text-xl for landing page headlines. This is also the default size for the h1 element.
\n
<div class=\"text-xl\">\n Build with the teams that never stop shipping.\n</div>\n
\n
Use .text-hero-xl for headlines in page headers (heros).
\n
<h1 class=\"text-hero-xl\">\n Build with the teams that never stop shipping.\n</h1>\n
\n
Use .text-hero-base for plain text in page headers (heros).
\n
<p class=\"text-hero-base\">\n Ember.js is a productive, battle-tested JavaScript framework for building\n modern web applications. It includes everything you need to build rich UIs\n that work on any device.\n</p>\n
\n
Weights
\n
Use .regular
\n
<div class=\"text-md regular\">\n Build with the teams that never stop shipping.\n</div>\n
\n
Use .bold if you must style something as bold and no semantic information needs to be carried. Prefer using <strong>.
\n
<div class=\"text-md bold\">\n Build with the teams that never stop shipping.\n</div>\n
","content":"# Typography\n\n### Usage\n\n#### Legibility\n\nText legibility is primarily affected by color. All text on the website should comply with the Web Content Accessibility Guidelines (WCAG 2.0) Level AA requirements.\n\nPlease refer to the Colors section for more information on color contrast and accessibility.\n\n### Sizes\n\nDisclaimer: Use these helpers when you need to modify the look of an element in cases where using a different element would lead to the wrong semantic meaning. A good example is the Ember.js home page, where a hero element exists which contains the `
` for that page and therefore requires all subsequent headlines to shift down one level. The design does not know about this semantic shift, so all `
` on that page need `.text-xl` to look like `
` and so on.\n\nUse `.text-sm` for small headings or notice paragraphs.\n\n```html\n
\n Build with the teams that never stop shipping.\n
\n```\n\nUse `.text-base` for body text, navigation items or links.\n\n```html\n
\n Build with the teams that never stop shipping.\n
\n```\n\n`.text-base` is also the default paragraph size.\n\n```html\n
\n Build with the teams that never stop shipping.\n
\n```\n\nUse `.text-md` for section headings. This is also the default size for the `h3` element.\n\n```html\n
\n Build with the teams that never stop shipping.\n
\n```\n\nUse `.text-lg` for content page headings. This is also the default size for the `h2` element.\n\n```html\n
\n Build with the teams that never stop shipping.\n
\n```\n\nUse `.text-xl` for landing page headlines. This is also the default size for the `h1` element.\n\n```html\n
\n Build with the teams that never stop shipping.\n
\n```\n\nUse `.text-hero-xl` for headlines in page headers (heros).\n\n```html\n
\n Build with the teams that never stop shipping.\n
\n```\n\nUse `.text-hero-base` for plain text in page headers (heros).\n\n```html\n
\n Ember.js is a productive, battle-tested JavaScript framework for building\n modern web applications. It includes everything you need to build rich UIs\n that work on any device.\n
Wells can be applied to anchors and work well with HTML <figure> elements.
\n
<div class=\"layout\">\n <div class=\"sm:col-2 lg:col-2 p-2\">\n <figure>\n <div class=\"well well-16/9\">\n <img src=\"/ember-logo.png\" alt=\"Ember.js\" />\n </div>\n <figcaption>\n A well thought out caption to add more information to the image above\n </figcaption>\n </figure>\n </div>\n <div class=\"sm:col-2 lg:col-2 p-2\">\n <figure>\n <a href=\"#\" class=\"well well-16/9\">\n <img src=\"/ember-logo.png\" alt=\"Ember.js\" />\n </a>\n <figcaption>\n Using an anchor for the well works, too. You may want to add an additional link to the text\n and or make sure this becomes clear from the context.\n </figcaption>\n </figure>\n </div>\n</div>\n
","content":"# Wells\n\nWells provide a box to wrap images that should be presented on a background, most likely because they have transparency.\n\n```html\n\n
\n Hello World\n
\n```\n\nThey also come in multiple ratios and ensure that a contained image is resized to fill the space appropriatly.\n\n```html\n
\n
\n
Ratio 1:1
\n
\n \n
\n
\n
\n
Ratio 4:3
\n
\n \n
\n
\n
\n
Ratio 16:9
\n
\n \n
\n
\n
\n```\n\nWells can be applied to anchors and work well with HTML `
` elements.\n\n```html\n
\n
\n \n
\n \n
\n \n A well thought out caption to add more information to the image above\n \n \n
\n
\n \n \n \n \n \n Using an anchor for the well works, too. You may want to add an additional link to the text\n and or make sure this becomes clear from the context.\n \n \n
If you would like to add a break between content then you can use the pre-styled Horizontal Rule <hr> element.
\n
<hr>\n
","content":"# CSS Global Styles\n\n## Element styles\n\nAll of the below are default element styles.\n\n### Horizontal Rule ``\n\nIf you would like to add a break between content then you can use the pre-styled Horizontal Rule `` element.\n\n```html\n \n```"}},{"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.
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:
","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
One
\n
Two
\n
Three
\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### 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```\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
maybe we talk about the fact that we're using CSS features stage 3 or higher?
","content":"# Overview\n\nmaybe we talk about the fact that we're using CSS features stage 3 or higher?"}},{"type":"contents","id":"index","attributes":{"html":"
Introduction
\n
ember install ember-styleguide\n
\n
Understanding ember-styleguide
\n
As we were working on the Ember.js website, we found ourselves wanting a more scalable approach to all of the Ember family of websites.
\n
Currently, these websites are considered \"core\" websites and are maintained by contributors:
\n
\n
emberjs.com
\n
cli.emberjs.com
\n
guides.emberjs.com
\n
deprecations.emberjs.com
\n
help-wanted.emberjs.com
\n
api.emberjs.com
\n
\n
There are also other websites that are still maintained by contributors but would need an upgrade to be able to avail of ember-styleguide
\n
\n
ember-fastboot.com
\n
ember-engines.com
\n
\n
Ember components are ideal for this, because all of these websites need similar types of components. By standardizing our component approach, we could more easily contribute to any of the websites in the Ember ecosystem.
\n
Goals
\n
This project is currently in active development status.
\n
We intend to provide an easy way to create a fully accessible Ember site from the components offered in this addon.
If you have questions about the design/architecture, please contact Melanie Sumner directly.
","content":"# Introduction\n\n```bash{data-execute=false}\nember install ember-styleguide\n```\n\n## Understanding ember-styleguide\n\nAs we were working on the Ember.js website, we found ourselves wanting a more scalable approach to all of the Ember family of websites.\n\nCurrently, these websites are considered \"core\" websites and are maintained by contributors:\n\n- emberjs.com\n- cli.emberjs.com\n- guides.emberjs.com\n- deprecations.emberjs.com\n- help-wanted.emberjs.com\n- api.emberjs.com\n\nThere are also other websites that are still maintained by contributors but would need an upgrade to be able to avail of ember-styleguide\n\n- ember-fastboot.com\n- ember-engines.com\n\nEmber components are ideal for this, because all of these websites need similar types of components. By standardizing our component approach, we could more easily contribute to any of the websites in the Ember ecosystem.\n\n## Goals\n\nThis project is currently in active development status.\n\nWe intend to provide an easy way to create a fully accessible Ember site from the components offered in this addon.\n\n## Contributing to the project\n\nAs with any Ember project, contributions are welcome! Visit [https://github.com/ember-learn/ember-styleguide](https://github.com/ember-learn/ember-styleguide) to file an issue or even better, submit a PR!\n\nIf you have questions about the design/architecture, please contact [Melanie Sumner](mailto:melaniersumner@gmail.com) directly."}}]}
![\"\"](\"/images/ember-logo.png\")
\n \n This is a card\n\n \n![](\"/ember-logo.png\")
\n