wgit p
Typography
This is an h1 heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur egestas, nibh sit amet porttitor aliquam, eros metus laoreet nunc, ut venenatis risus ligula in leo. Nunc congue nisl ut mi euismod aliquam. Etiam volutpat euismod lacus et vestibulum. Aenean auctor nec nulla a auctor. Phasellus dictum iaculis nunc ut hendrerit. Curabitur rhoncus rhoncus ante eu varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin luctus lorem sed elementum auctor. Curabitur pellentesque tristique congue. Proin iaculis eros fermentum, egestas urna a, lacinia diam. Vestibulum erat nulla, elementum et vehicula non, posuere vitae diam. Suspendisse fringilla eu tellus sit amet luctus. Nulla vitae luctus arcu. Curabitur fermentum neque vitae lobortis iaculis. Integer luctus dolor a varius euismod.
This is an h2 heading
Proin feugiat nunc enim, sed consectetur nulla commodo eget. Donec a posuere augue. Fusce imperdiet sollicitudin arcu, at iaculis diam pretium nec. Proin ac pulvinar dui. Donec in lacus nec est elementum venenatis. Suspendisse purus magna, luctus semper urna eu, maximus vestibulum urna. Etiam quis efficitur nibh. Curabitur auctor tellus odio, a mollis est consectetur sit amet. Nullam vitae ipsum neque. Vestibulum condimentum et ipsum id cursus. Integer imperdiet porttitor tellus et feugiat. Vestibulum tincidunt dolor orci, ac rutrum eros interdum sed. In in nulla nec nisi tincidunt pharetra eu vel quam. Vestibulum sagittis magna vel urna rhoncus, vitae gravida ante rutrum. Sed non faucibus ante.
This is an h3 heading
Fusce blandit magna eu orci lobortis viverra. Nam quis diam magna. Ut fermentum massa ut turpis vulputate lobortis. Donec rutrum, diam quis sagittis euismod, augue turpis convallis elit, at tincidunt nibh ipsum quis erat. Integer viverra lacinia sapien eget ornare. Nunc eget sem tempor, cursus leo non, congue arcu. Donec at tellus et lorem euismod malesuada non congue augue.
This is an h4 heading
Ut vestibulum, nisl quis tempor eleifend, eros lacus eleifend sem, eget tempus nibh quam ut sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam varius vitae leo vel laoreet. Etiam neque nisl, maximus sit amet odio interdum, feugiat mollis lacus. Etiam tellus metus, fermentum sit amet felis sit amet, sollicitudin aliquet sem. Nulla tempor, elit eu efficitur vulputate, sapien tellus consectetur ligula, vel viverra est odio vitae lacus. Nullam porta purus lacus, vel eleifend enim congue ac. Sed finibus purus non ultrices egestas. Vestibulum odio nisl, congue nec euismod a, finibus at tellus.
This is an h5 heading
Etiam in sapien luctus lacus tincidunt tristique auctor at diam. Nunc tempor ipsum vitae sapien tempor, in tempus magna tempor. Proin eros lorem, consectetur non fermentum at, maximus id justo. Nullam vitae iaculis lacus. Proin metus libero, condimentum eget turpis at, eleifend maximus risus. Nullam dictum vehicula odio, at vehicula turpis congue in. Pellentesque convallis laoreet urna, vel lacinia turpis scelerisque nec. Vivamus id ligula diam. Pellentesque a arcu eu nisi fermentum dictum. Aliquam mattis hendrerit dapibus. Phasellus sagittis sit amet enim quis sodales. Curabitur tincidunt sagittis venenatis.
This is an h6 heading
Proin feugiat nunc enim, sed consectetur nulla commodo eget. Donec a posuere augue. Fusce imperdiet sollicitudin arcu, at iaculis diam pretium nec. Proin ac pulvinar dui. Donec in lacus nec est elementum venenatis. Suspendisse purus magna, luctus semper urna eu, maximus vestibulum urna. Etiam quis efficitur nibh. Curabitur auctor tellus odio, a mollis est consectetur sit amet. Nullam vitae ipsum neque. Vestibulum condimentum et ipsum id cursus. Integer imperdiet porttitor tellus et feugiat. Vestibulum tincidunt dolor orci, ac rutrum eros interdum sed. In in nulla nec nisi tincidunt pharetra eu vel quam. Vestibulum sagittis magna vel urna rhoncus, vitae gravida ante rutrum. Sed non faucibus ante.
Colors
Colors help us not only be creative, but to FEEL creative.
@green
@blue
@blue-light
@black
@white
@gold
@green-dark
@blue-light
@cream
@gold-soft
@grey
@grey-light
@off-white
@facebook
@twitter
@pinterest
@instagram
Buttons
Each button starts off with the class .btn however, we’ve made variations of the .btn see below for class use on a single button. For Color Use blue, green, black, blue-light, gold, cream I’ve also embedded in the feature to change the font family for each button. This should be an added class feature freight
Buttons with Fill
btn btn-medium btn-filled insertcolorhere
Buttons without Fill
btn btn-medium btn-unfilled insertcolorhere
Small Buttons
btn btn-small btn-filled insertcolorhere
Medium Buttons
btn btn-medium btn-filled insertcolorhere
Large Buttons
btn btn-large btn-filled insertcolorhere
Buttons with Icon
btn btn-medium btn-filled insertcolorhere
Forms
Large Form
The parent container of the form has the class form-large
Oops! We could not locate your form.
Small Form
This will have all gfield’s on one line form-small
Oops! We could not locate your form.
Lists
Cover the basic ordered list and un-ordered list this will also dive into children of list items.
Unordered List
- Ordered List Item 1
- Ordered List Item 2
- Ordered List Item 2 But Wait, There’s More!
- Stuff just got un-ordered
- This is chaos
- THIS IS ANARCHY!
- CONSISTENCY IS BREAKING! AHH!
- Phew, we’re back to ordered list
- You crazy adding an unordered list in here
ordered List
- This is a list item and guess what? it’s AMAZING.
- This is a list item and guess what? it’s AMAZING.
- This is a list that has nests from.. within
- This is a nested ordered list!
- And it’s mind blowing
- stuff is about to go d
oln- Order Lists Within li’s it’s madness breaking out
- Ahh
- This is a list item and guess what? it’s AMAZING.
Blockquote
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
Call to Action
Lorem Ipsum dolor sit amet, consectetuer adipiscing elit.
Learn MoreIcons
content: "\e90c";
icon-godzillas-claw-remains
.icon-godzillas-claw-remains();
content: "\e908";
icon-chevron-down
.icon-chevron-down();
content: "\e90b";
icon-search
.icon-search();
content: "\e90a";
icon-speech-bubble
.icon-speech-bubble();
content: "\e909";
icon-chevron-down-thick
.icon-chevron-down-thick();
content: "\e907";
icon-long-arrow-down
.icon-long-arrow-down();
content: "\e906";
icon-check
.icon-check();
content: "\e902";
icon-x
.icon-x();
content: "\e900";
icon-caret-down
.icon-caret-down();
content: "\e901";
icon-caret-up
.icon-caret-up();
content: "\e90e";
icon-line
.icon-line();
content: "\e904";
icon-chevron-left
.icon-chevron-left();
content: "\e904";
icon-chevron-right
.icon-chevron-right();
content: "\e90d";
icon-map-pin
.icon-map-pin();
content: "\e905";
icon-equalizer
.icon-equalizer();
content: "\e90f";
icon-aoda-online
.icon-AODA();
content: "\e910";
icon-small-check
.icon-small-check();
Helpers
Helpers help the developers do there “thang” a little faster.
.no-dots();
This will automatically remove list style dots.
.grey , .grey-dark , .blue , .green , .green-dark , .blue-light , .black , .white
This will automatically remove list style dots.
.uppercase
Class Addition to any element with text.
.screen-reader-text
This will apply a less mixin to make the element visible on screen readers only.
.alignleft
This will apply a float on the element you add the .alignleft class to and this will also add a negative margin.
.alignright
This will apply a float on the element you add the .alignright class to and this will also add a positive margin.