Ember

TEDshed

shed.css and TED themed functional CSS for your Ember app

Installation

shed.css

ember install ember-ted-shed

You're ready to go with shed.css! Check out the shed.css docs for usage.

Note that shed.css core doesn't ship with any colour-related classes. For that you'll want to import the TED theme that ships with this addon...

TED theme

ember install ember-cli-sass

// app.scss

@import "ember-ted-shed/colors";
@import "ember-ted-shed/borders";

Usage

There are two ways to use ember-ted-shed:

use ember-ted-shed based UI components
use ember-ted-shed to write your own custom styles

1. ember-ted-shed UI library

`ember-ted-table`

Talk	Speaker name
Why helmets don't prevent concussions -- and what might	David Camarillo
The new American Dream	Courtney E. Martin
Let's teach for mastery -- not test scores	Sal Khan
The agony of trying to unsubscribe	James Veitch

ember install ember-ted-table

{{#ted-table}}
  {{#ted-table-header}}
    {{#ted-table-row}}
      {{#ted-table-header-cell}}Talk{{/ted-table-header-cell}}
      {{#ted-table-header-cell}}Speaker name{{/ted-table-header-cell}}
    {{/ted-table-row}}
  {{/ted-table-header}}
  {{#ted-table-body}}
    {{#each talks as |talk|}}
      {{#ted-table-row}}
        {{#ted-table-cell}}{{talk.title}}{{/ted-table-cell}}
        {{#ted-table-cell}}{{talk.speakerName}}{{/ted-table-cell}}
      {{/ted-table-row}}
    {{/each}}
  {{/ted-table-body}}
{{/ted-table}}

`ember-ted-button`

ember install ember-ted-button

{{ted-button text="Cancel"}}
{{ted-button text="Save" theme="dark"}}

{{#ted-button classNames="m-l:1"}}
  <em>any</em> markup can go here
{{/ted-button}}

{{ted-button
  text="can't click this"
  theme="dark"
  disabled=true
  classNames="m-l:1"}}

2. custom styles with ember-ted-shed

Full usage guidelines for shed.css can be found on the docs site.

Note that shed.css does not include any color or border based rules. Use the TED shed theme color and border classes here.

TED shed colors classes

usage	example class
color	`c:red`
background-color	`bg:red`
hover color	`hover/c:red`
hover background-color	`hover/bg:red`

You can use any of the following named colors (in place of red in the example above):

red (TED red)

black

gray-dd

gray-d

gray

gray-l

gray-ll

white

red-d

red-l

yellow

yellow-l

green

green-l

blue

blue-l

TED shed border classes

usage	example class
border (1px solid currentColor)	`b`
border-top	`b-t`
border-bottom	`b-b`
border-left	`b-l`
border-right	`b-r`
border (transparent)	`b:t`
border (named color)	`b:red`
border-top (named color)	`b-t:red`
alternate border-width (2px) ^*	`b-w:2`
focus border (named color)	`focus/b:gray`

You can use any of the following named colors (in place of red in the example above):

gray-dd

gray-d

gray

gray-l

gray-ll

red

t (transparent)

You can use any of the following named widths (in place of 2 in the example above):

2px

3px

4px

* border widths act as modifier classes and must be used in conjunction with another border class.

Color & border utility classes

usage	example class
background: none	`.bg:none`
border: none	`.b:none`
outline: none	`.ol:none`