39 scss/modules/_cards.scss
View file
@@ -1,5 +1,44 @@
//Cards should be used in conjunction with other cards. Usually not by themselves.

/*
Typical Card
<li class="card card--outlined">
<span class="card__body">
<span class="card__cap card__cap--icon card__cap--solid">
<span class="icon icon--image"></span>
</span>
<span class="card__content">
<span class="card__heading">Jake Fleming</span>
<span class="card__subheading">Visual Designer</span>
</span>
</span>
</li>
Multiline Card
<li class="card card--outlined card--multi-line">
<span class="card__body">
<span class="card__cap card__cap--icon card__cap--solid">
<span class="icon icon--image"></span>
</span>
<span class="card__content">
Spans multiple lines and doesn't get cut off by an ellipsis.
</span>
</span>
</li>
Feature Card
<li class="card card--outlined">
<span class="card__feature" style="background: url('http://4.bp.blogspot.com/_G6RHYafwM-E/SuVIAJLkFNI/AAAAAAAAALY/H9WGFPQBhvo/s320/meninja.png')">
</span>
<span class="card__body">
<span class="card__content">
<span class="card__heading">Jake Fleming</span>
<span class="card__subheading">Visual Designer</span>
</span>
</span>
</li>
*/

//A list of cards
.card-list {
list-style-type: none;
31 scss/modules/_drawers.scss
View file
@@ -1,3 +1,34 @@
/*
The data-target value of the button must equal the drawer's Id.
<button type="button" class="button button--solid button--primary" data-toggle="drawer" data-target="myDrawer--left">
<span class="button__content">
<span class="button__text">Open left</span>
</span>
</button>
<div id="myDrawer--left" class="drawer drawer--left">
<div class="drawer__body">
<ul class="drawer__list">
<li class="drawer__list-title">Dumb stuff</li>
<li class="drawer__list-item active">
<span class="drawer__list-item-icon icon icon--envelope"></span>
<span class="drawer__list-item-content">Inbox</span>
</li>
<li class="drawer__list-item active">
<a href="" class="drawer__list-item-link">
<span class="drawer__list-item-icon icon icon--chat"></span>
<span class="drawer__list-item-content">Chats</span>
<span class="drawer__list-item-alert">
<span class="drawer__list-item-alert-content drawer__list-item-alert-content--error">
2
</span>
</span>
</a>
</li>
</ul>
</div>
</div>
*/

$list-icon-w: 40;
$list-icon-h: 40;

67 scss/modules/_forms.scss
View file
@@ -1,4 +1,71 @@
/*
Text,password,tel, etc... input
<div class="form-element">
<label class="form-element__label">Text input</label>
<input type="text" placeholder="Empty input text"/>
<span class="form-element__error-text">Error Text</span>
</div>
Textarea
<div class="form-element">
<label class="form-element__label">Textarea</label>
<textarea placeholder="Empty textarea text"></textarea>
<span class="form-element__error-text">Error Text</span>
</div>
Input with a button cap
<div class="form-element">
<label class="form-element__label">Input group</label>
<div class="input-group">
<div class="input-group__element">
<input type="text" placeholder="Search"/>
</div>
<div class="input-group__action">
<button type="button" class="button button--solid button--default">
<span class="button__content button__content--default"><span class="button__icon icon icon--search"></span></span>
</button>
</div>
</div>
<span class="form-element__error-text">Error Text</span>
</div>
Input with an icon must have a "form-element__wrap" inside the "form-element" that holds the input and the icon
<div class="form-element">
<label class="form-element__label">Text input</label>
<div class="form-element__wrap">
<div class="form-element__icon icon icon--search"></div>
<input type="text" placeholder="Empty input text"/>
</div>
<span class="form-element__error-text">Error Text</span>
</div>
Selects should be wrapped inside a "select-element" that holds the select and the caret icon
<div class="form-element">
<label class="form-element__label">Select</label>
<div class="select-element">
<div class="select-element__icon icon icon--caret-down"></div>
<select>
<option>derp</option>
</select>
</div>
<span class="form-element__error-text">Error Text</span>
</div>
Form lists can hold any type of form element, typically used to hold checkboxes or radios
<ul class="form-list form-list--collapse">
<li class="form-element has-error">
<label class="form-element__label input-size">
<input type="checkbox"/> Derp
</label>
</li>
<li class="form-element has-error">
<label class="form-element__label input-size">
<input type="radio"/> Derp
</label>
</li>
</ul>
*/

//use form-element to wrap around things like labels with inputs
.form-element {
29 scss/modules/_lists.scss
View file
@@ -1,3 +1,32 @@
/*
<ul class="list">
<li class="list__item list__item--active">
<span class="list__item-content">An active item with an icon on the right</span>
<span class="list__item-icon icon icon--image"></span>
</li>
<li class="list__item">
<span class="list__item-content">An item with an icon on the right</span>
<span class="list__item-icon icon icon--image"></span>
</li>
<li class="list__item">
<span class="list__item-icon icon icon--image"></span>
<span class="list__item-content">An item with an icon on the left</span>
</li>
<li class="list__item">
<span class="list__item-content">An item with a cap on the right with an image inside</span>
<span class="list__item-cap">
<img class="square--xsmall" src="https://d13yacurqjgara.cloudfront.net/users/3460/avatars/normal/f6debbb5044f838dcf78bc3299172657.jpg?1421783568"/>
</span>
</li>
<li class="list__item">
<span class="list__item-cap">
<img class="square--xsmall" src="https://d13yacurqjgara.cloudfront.net/users/3460/avatars/normal/f6debbb5044f838dcf78bc3299172657.jpg?1421783568"/>
</span>
<span class="list__item-content">An item with a cap on the left with an image inside n item with a cap on the left with an image inside n item with a cap on the left with an image inside n item with a cap on the left with an image inside</span>
</li>
</ul>
*/

$list-icon-w: 40;
$list-icon-h: 40;

20 scss/modules/_page.scss
View file
@@ -53,6 +53,26 @@ $page-bar-subheading-size: $font-size--4;

//pagination

/*
<ul class="pagination-list">
<li class="pagination-list__control pagination-list__prev">
<span class="icon icon--chevron-left"></span>
</li>
<li class="pagination-list__item">
1
</li>
<li class="pagination-list__item">
2
</li>
<li class="pagination-list__item pagination-list__item--active">
3
</li>
<li class="pagination-list__control pagination-list__next pagination-list__control--disabled">
<span class="icon icon--chevron-right"></span>
</li>
</ul>
*/

.pagination-list {
font-size: 0;
list-style-type: none;
16 scss/modules/_pebbles.scss
View file
@@ -1,4 +1,20 @@
//Pebbles are colored labels or highlights used to call attention to certain pieces of text
/*
(possible modifiers for pebbles [default, primary, success, error, warning, info, round])
<span class="pebble pebble--default">
<span class="pebble__content">
<span class="pebble__text">
default
</span>
</span>
</span>
Pebble with an icon
<span class="pebble pebble--default pebble--round">
<span class="pebble__content">
<span class="pebble__icon icon icon--check"></span>
</span>
*/
.pebble {
@include radius;
color: #fff;
34 scss/modules/_slates.scss
View file
@@ -1,5 +1,39 @@
//slates are boxes for content to go into (panels)

/*
<div class="slate slate--outlined">
<div class="slate__top slate__top--outlined">
<div class="slate__top-main">
<span class="slate__subtitle">Welcome</span>
<span class="slate__title">Sign in</span>
</div>
</div>
<div class="slate__block slate__block--outlined slate__block--no-bottom-pad">
<div class="form-element">
<div class="form-element__wrap">
<div class="form-element__icon icon icon--person"></div>
<input type="text" placeholder="User name"/>
</div>
</div>
<div class="form-element">
<div class="form-element__wrap">
<div class="form-element__icon icon icon--lock"></div>
<input type="password" placeholder="Password"/>
</div>
</div>
</div>
<div class="slate__bottom slate__bottom--outlined">
<div class="slate__bottom-control">
<button type="button" class="button button--solid button--primary button--stretch">
<span class="button__content">
<span class="button__text">Sign in</span>
</span>
</button>
</div>
</div>
</div>
*/

$slate-heading-size: $font-size--3;
$slate-subheading-size: $font-size--4;

30 scss/modules/_tables.scss
View file
@@ -1,5 +1,35 @@
//Tables should only be used to display data

/*
You can wrap your table in a "table-wrap" if you're worried about the content spilling off of the screen.
<div class="table-wrap">
<table class="table--outlined">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Sex</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jake Fleming</td>
<td>27</td>
<td>M</td>
<td>Chicago, IL</td>
</tr>
<tr class="tr--active">
<td>Jake Fleming</td>
<td>27</td>
<td>M</td>
<td>Chicago, IL</td>
</tr>
</tbody>
</table>
</div>
*/

table {
//setting up the basics
border-collapse: collapse;
15 scss/state/_loading.scss
View file
@@ -1,3 +1,18 @@
/*
Button
<button type="button" class="button button--solid load-this button--default">
<span class="button__content">Button</span>
</button>
Form element
<div class="form-element load-this">
<div class="form-element__wrap">
<div class="form-element__icon icon icon--search"></div>
<input type="text" placeholder="Empty input text"/>
</div>
</div>
*/

.button.load-this {
.button__icon {
display: none;