Global Style guide
#090d16 #6d6e71 #d8d8d8 #0973ba #27aae1 #f6e27f #f6f6f6 All heading styles from h1 through h6. To use you can All standard paragraphy info and styling including strong, bold, italic and emphasis.
A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a
particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually
an expected part of formal writing, used to organize longer prose.
A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a
particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually
an expected part of formal writing, used to organize longer prose.
A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing
dealing with a particular point or idea. A paragraph consists of
one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
All standard lists follow browser defaults. There is a
All messages should be contained within a Multiple messages example below. Individual form controls automatically receive some global styling. All text based input, textarea, and select elements are set to width: 100%; by default. Labels and Placeholders are visible by default. Add the Add a class of Add a class of Add a class of Adding the Custom Styled checkboxes and radio buttons using only CSS. Wrap you the label and input in a div with the class
Using the grid system, we can make complex layouts using a minimal amount of markup. Grid columns are based on 12 columns and utilize the
same naming convention and functionality as Bootstrap.
A table can be given the class "table-stacked" to enable stacking table cells once a specific breakpoint
is reached. Data attributes (
Product tables appear in areas like the Shopping Cart, Checkout Review and My Account Order History.
They typically include the information displayed below. Using a few helper classes, we can
streamline the layout of these types of tables. Adding a Simple paginate. Use Web Style Guide
Colors
Typography
Headings
&:extend(h1)
through &:extend(h6)
or apply .h1
through .h6
h1 Heading Level 1
h2 Heading Level 2
h3 Heading Level 3
h4 Heading Level 4
h5 Heading Level 5
h6 Heading Level 6
Example Usage
<h1>h1 Heading Level 1</h1>
Standard Copy
Lists
.reset-list
helper class to remove the bullets and numerals if needed.Example Usage
<ul>
<li>This is a list item in an unordered list</li>
<li>
Lists can be nested inside of each other
<ul>
<li>This is a nested list item</li>
<li>This is another nested list item in an unordered list</li>
</ul>
</li>
</ul>
ul.reset-list
Example Usage
<ul class="reset-list">
<li>This is a clean list with no styles <code>ul.reset-list</code></li>
<li>This is a clean list with no styles #2</li>
</ul>
Example Usage
<ol>
<li>This is a list item in an unordered list</li>
<li>This is the last list item</li>
</ol>
Iconography
Misc
.icon--private
.icon--gift-registry
.icon--present
.icon--star-empty
.icon--download
.icon--undo
.icon--print
.icon--help
.icon--success
.icon--error
.icon--account
.icon--edit
.icon--wishlist-full
.icon--warning
.icon--update
.icon--trash
.icon--star
.icon--settings
.icon--menu
.icon--location
.icon--list
.icon--info
.icon--grid
.icon--minus
.icon--checkmark
.icon--cart
.icon--calendar
.icon--search
.icon--remove
.icon--flag
.icon--expand
.icon--envelope
.icon--compare-full
.icon--comment
Arrow/Angle Indicators
.icon--arrow-up
.icon--arrow-down
.icon--pointer-down
.icon--pointer-up
.icon--pointer-right
.icon--pointer-left
.icon--prev
.icon--up
.icon--down
.icon--next
Input Styles
.icon-circle-o
.icon-dot-circle-o
.icon-check-square-o
Social
.icon-facebook
.icon-instagram
.icon-pinterest
.icon-twitter
.icon-youtube
Example Usage
<span class="icon--account"></span>
<span class="icon--edit"></span>
<span class="icon--search"></span>
Messages
ul.messages
as outlined below.
Additionally, messages should be grouped into sub lists for multiple messages.
Example Usage
<ul class="messages">
<li class="success-msg">
<ul>
<li>Message text</li>
</ul>
</li>
</ul>
Example Usage
<ul class="messages">
<li class="success-msg">
<ul>
<li>Success! Your order has been submitted.</li>
</ul>
</li>
<li class="note-msg">
<ul>
<li>Welcome!</li>
</ul>
</li>
</ul>
<ul class="messages">
<li class="error-msg">
<ul>
<li>Invalid password or email address provided.</li>
<li>Please check the email address matches the format of [email protected]</li>
</ul>
</li>
</ul>
Forms
Basic Example
.sr-only
helper class to labels that you don't want to display.Example Usage
<form action="" method="post">
<ul class="form-list">
<li>
<label for="email">Email Address</label>
<div class="input-box">
<input type="email" name="email" id="email" class="input-text" placeholder="Email Address" />
</div>
</li>
<li>
<label for="membership">Membership Type</label>
<div class="input-box">
<select class="select" name="membership" id="membership">
<option value="" selected>Membership Type</option>
<option value="1">Random Value 01</option>
<option value="2">Random Value 02</option>
<option value="3">Random Value 03</option>
</select>
</div>
</li>
<li class="control">
<div class="custom-checkbox">
<input type="checkbox" name="newsletter" id="newsletter" class="checkbox" />
<label for="newsletter">Newsletter Sign Up</label>
</div>
</li>
</ul>
<div class="buttons-set">
<button type="submit" class="button button-default">Submit</button>
</div>
</form>
Inline Form
.inline-form
to your form to have inline controls. For these inline forms, you can hide the labels using the .sr-only
class.Example Usage
<form action="" method="post" class="inline-form">
<label for="search" class="sr-only">Search</label>
<div class="input-box">
<input type="search" name="search" id="search" class="input-text" placeholder="Search" />
</div>
<button class="button button-default" type="submit">Submit</button>
</form>
Horizontal Form
.horizontal-form
to your form to have inline labels. Doing so changes .form-list li
to behave as grid rows, so no need for .row
.Example Usage
<form action="" method="post" class="horizontal-form">
<ul class="form-list">
<li>
<label class="col-sm-3" for="email">Email Address</label>
<div class="input-box col-sm-9">
<input type="email" name="email" id="email" class="input-text" placeholder="Email Address" />
</div>
</li>
<li>
<label class="col-sm-3" for="password">Password</label>
<div class="input-box col-sm-9">
<input type="password" name="password" id="password" class="input-text" placeholder="Password" />
</div>
</li>
<li>
<div class="buttons-set col-sm-9 pull-right">
<button type="submit" class="button button-default">Submit</button>
</div>
</li>
</ul>
</form>
Grid Form
.grid-form
to your form to create a grid layout. Doing so changes .form-list li
to behave as grid rows, so no need for .row
.Example Usage
<form action="" method="post" class="grid-form">
<ul class="form-list">
<li>
<div class="col-sm-6">
<label for="fname" class="sr-only">First Name</label>
<div class="input-box">
<input type="text" name="fname" id="fname" class="input-text" placeholder="First Name" />
</div>
</div>
<div class="col-sm-6">
<label for="lname" class="sr-only">Last Name</label>
<div class="input-box">
<input type="text" name="lname" id="lname" class="input-text" placeholder="Last Name" />
</div>
</div>
</li>
<li>
<div class="col-sm-4">
<label for="address" class="sr-only">Address</label>
<div class="input-box">
<input type="text" name="address" id="address" class="input-text" placeholder="Address" />
</div>
</div>
<div class="col-sm-4">
<label for="city" class="sr-only">City</label>
<div class="input-box">
<input type="text" name="city" id="city" class="input-text" placeholder="City" />
</div>
</div>
<div class="col-sm-4">
<label for="state" class="sr-only">State</label>
<div class="input-box">
<input type="text" name="state" id="state" class="input-text" placeholder="State" />
</div>
</div>
</li>
</ul>
<div class="buttons-set">
<button type="submit" class="button button-default">Submit</button>
</div>
</form>
Disabled States
disabled
attribute will prevent users from interacting with the input. By default disabled inputs are lighter.Example Usage
<form action="" method="post">
<ul class="form-list">
<li>
<label class="sr-only" for="email">Email Address</label>
<div class="input-box">
<input type="email" name="email" id="email" class="input-text" placeholder="Email Address" disabled />
</div>
</li>
</ul>
</form>
Styled Checkboxes & Radio Buttons
.custom-checkbox
or .custom-radio
Example Usage
<form action="" method="post">
<ul class="form-list">
<li class="control">
<div class="custom-checkbox">
<input type="checkbox" name="salmon" id="salmon" class="checkbox" checked />
<label for="salmon">Salmon</label>
</div>
<div class="custom-checkbox">
<input type="checkbox" name="chicken" id="chicken" class="checkbox" />
<label for="chicken">Chicken</label>
</div>
<div class="custom-checkbox">
<input type="checkbox" name="beef" id="beef" class="checkbox" disabled />
<label for="beef">Beef</label>
</div>
</li>
<li class="control">
<div class="custom-radio">
<input type="radio" name="beverage" id="beer" class="radio" checked />
<label for="beer">Beer</label>
</div>
<div class="custom-radio">
<input type="radio" name="beverage" id="wine" class="radio" />
<label for="wine">Wine</label>
</div>
<div class="custom-radio">
<input type="radio" name="beverage" id="soda" class="radio" disabled />
<label for="soda">Soda</label>
</div>
</li>
</ul>
</form>
Grid
Example Usage
<div class="grid-container">
<div class="row">
<div class="col-sm-4">
One third
</div>
<div class="col-sm-4">
One third
</div>
<div class="col-sm-4">
One third
</div>
</div>
</div>
Tables
Standard Data Table + Responsive Stacking
data-header
) supply the table headings as a ::before
psuedo element. If your table does not require headers, you can assign a .no-headers
class.
To achieve table striping, just add a the .table-striped
class.
Table Heading 1
Table Heading 2
Table Heading 3
Table Heading 4
Table Cell 1
Table Cell 2
Table Cell 3
Table Cell 4
Table Cell 1
Table Cell 2
Table Cell 3
Table Cell 4
Table Cell 1
Table Cell 2
Table Cell 3
Table Cell 4
Table Cell 1
Table Cell 2
Table Cell 3
Table Cell 4
Table Cell 1
Table Cell 2
Table Cell 3
Table Cell 4
Example Usage
<table class="table table-striped table-stacked">
<colgroup>
<col/>
<col/>
<col/>
<col/>
<col/>
</colgroup>
<thead>
<tr>
<th>Table Heading 1</th>
<th>Table Heading 2</th>
<th>Table Heading 3</th>
<th>Table Heading 4</th>
<th>Table Heading 5</th>
</tr>
</thead>
<tbody>
<tr>
<td data-header="Table Heading 1">Table Cell 1</td>
<td data-header="Table Heading 2">Table Cell 2</td>
<td data-header="Table Heading 3">Table Cell 3</td>
<td data-header="Table Heading 4">Table Cell 4</td>
<td data-header="Table Heading 5">Table Cell 5</td>
</tr>
</tbody>
</table>
Product Info Tables
.product-table
class, in addition
to the .table-stacked
class gives us these styles.
Item
Price
Quantity
Total
$1000.00
2
$2000.00
Example Usage
<table class="table table-stacked product-table">
<colgroup>
<col/>
<col/>
<col/>
<col/>
</colgroup>
<thead>
<tr>
<th>Item</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="#" class="product-image">
<img src="http://placehold.it/200x150" />
</a>
<div class="product-info">
<a href="#">Product Name</a>
<ul>
<li>Item specs</li>
<li>Item specs</li>
<li>Item specs</li>
</ul>
</div>
</td>
<td data-header="Subtotal">$1000.00</td>
<td data-header="Quantity">2</td>
<td data-header="Total">$2000.00</td>
</tr>
</tbody>
</table>
Pagination
Basic Example
.current
to indicate the current page.Example Usage
<div class="toolbar">
<div class="toolbar">
<ul class="items pages-items" aria-labelledby="paging-label">
<li class="item pages-item-previous">
<a class="action previous" href="#" title="Previous">
<span class="label">Page</span>
<span>Previous</span>
</a>
</li>
<li class="item">
<a href="#" class="page">
<span class="label">Page</span>
<span>1</span>
</a>
</li>
<li class="item current">
<strong class="page">
<span class="label">You're currently reading page</span>
<span>2</span>
</strong>
</li>
<li class="item">
<a href="#" class="page">
<span class="label">Page</span>
<span>3</span>
</a>
</li>
<li class="item">
<a href="#" class="page">
<span class="label">Page</span>
<span>4</span>
</a>
</li>
<li class="item">
<a href="#" class="page">
<span class="label">Page</span>
<span>5</span>
</a>
</li>
<li class="item pages-item-next">
<a class="action next" href="#" title="Next">
<span class="label">Page</span>
<span>Next</span>
</a>
</li>
</ul>
<div>
<div>
Accordion
Example Usage
<div id="element-accordion">
<div data-role="collapsible">
<div data-role="trigger"><span>Title 1</span></div>
</div>
<div data-role="content">
<div class="accordion-content-wrapper">Content 1</div>
</div>
<div data-role="collapsible">
<div data-role="trigger"><span>Title 2</span></div>
</div>
<div data-role="content">
<div class="accordion-content-wrapper">Content 2</div>
</div>
<div data-role="collapsible">
<div data-role="trigger"><span>Title 3</span></div>
</div>
<div data-role="content">
<div class="accordion-content-wrapper">Content 3</div>
</div>
</div>
<script>
require(
[
'jquery',
],
function($) {
$("#element-accordion").accordion({ multipleCollapsible: true});
}
);
</script>
Product Grid
Product List