Styleguide
1. Typography
Headers and Body Text
Heading One
Heading Two
Heading Three
Heading Four
Heading Five
Heading Six
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.
Suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
- Strong
- Emphasis
- Inline link
Strike- Sup
Blockquotes
Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
The author of the quote
List Types
No bullet
|
|
Round bullet
|
|
Square bullet
|
|
Inline List
|
|
Numeric bullet
|
|
Alpha bullet
|
|
2. Forms
Vertical (default)
By default, forms follow this pattern. Be sure to remove element bottom padding if you aren't using a large form.
Horizontal
To make form elements flow inline, add a class of .form-horizontal to the parent.
You cannot add a class directly to most liquid form elements (e.g. {% form 'contact' %}). Instead, wrap the form in a div with the class .form-horizontal to achieve the same effect.
Fieldsets
Invisible Labels
Note: The placeholder attribute only works in IE10+, so invisible labels are disabled in IE9 and below.
Add a class of hidden-label to a label to hide it, while keeping it accessible to screen readers. Use the placeholder attribute as your visible label.
Input Groups
Example 1
Example 2 - Mailchimp Integration
3. Buttons
Default Button
Default Button
Secondary Button
Disabled Button
Text Button
Special link types
Download link
Call to action
Context sensitive buttons
4. Notes and Errors
Use notes as helpers on forms, or brief messages to your customers.
This is a standard note
This is an extendable note
Pellentesque lobortis vehicula unc suscipit, nulla sit amet varius fermentum, elit turpis sodales ligula, et tristique libero eros at quam.
Bespoke order
Pellentesque lobortis vehicula unc suscipit, nulla sit amet varius fermentum, elit turpis sodales ligula, et tristique libero eros at quam. Read More
call for our best price
This short fast shipping message is editable via the theme settings.
This is an error message.
- Bullets can offer more insight to the error
7. SVG Sprite
It's then possible to turn one of these icons into a button by
8. UI Components
Wyswiyg
Shelves
| ||||||||||||||||
Verticals
| ||||||||||||||||
Misc
| ||||||||||||||||
| Total | ||||||||||||||||