-
Headings
Here are the base styles for your typography.
Add class of
lauren
to use a replacement lauren ipsum font.Heading 1
Heading 2
Heading 3
Heading 4
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi doloribus soluta sapiente error ullam rerum, cumque, odit animi saepe minus.
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <p class="lauren">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi doloribus soluta sapiente error ullam rerum, cumque, odit animi saepe minus.</p>
-
Logo
All the icons are minified and smushed into a sprite that is included at the top of each page. You can then use an icon with the
<use>
tag.This allows us to both minimise loading time and still edit the SVG attributes.
<svg viewBox="0 0 400 400" class="icon__logo"> <use xlink:href="/imgs/sprite/icon-sprite.svg#icon__logo"></use> </svg>
-
Icons
All the icons are minified and smushed into a sprite that is included at the top of each page. You can then use an icon with the
<use>
tag.This allows us to both minimise loading time and still edit the SVG attributes.
<svg viewBox="0 0 250 156.493" class="icon__logo"> <use xlink:href="/imgs/sprite/icon-sprite.svg#icon__logo"></use> </svg> <svg viewBox="0 0 100 100" class="icon icon__view"> <use xlink:href="/imgs/sprite/icon-sprite.svg#icon__view"></use> </svg> <svg viewBox="0 0 100 100" class="icon icon__twitter"> <use xlink:href="/imgs/sprite/icon-sprite.svg#icon__twitter"></use> </svg> <svg viewBox="0 0 100 100" class="icon icon__facebook"> <use xlink:href="/imgs/sprite/icon-sprite.svg#icon__facebook"></use> </svg> <svg viewBox="0 0 100 100" class="icon icon__menu"> <use xlink:href="/imgs/sprite/icon-sprite.svg#icon__menu"></use> </svg> <svg viewBox="0 0 100 100" class="icon icon__home"> <use xlink:href="/imgs/sprite/icon-sprite.svg#icon__home"></use> </svg>
-
Grid
Here are some options.
None-responsive: The grid system is based on fractions. You can specify a column width by adding a class of
.column__c-of-12
; c is any number between 1 and 12.Responsive:
There are 4 options for a responsive grid.
Use column without any modifier for mobile size up to small.
small
: this is for small devices. You set using the brakpoint mixin. This has 12 columns. EG:.column__6-of-12--small
This will give a 50% element in the small size breakpointmedium
: this is for medium devices. You set using the brakpoint mixin. This has 12 columns.large
: this is for small devices. You set using the brakpoint mixin. This has 12 columns.<div class="grid"> <div class="column column__12-of-12"><span class="column_fill"></span></div> <div class="column column__12-of-12 column__12-of-12--small column__6-of-12--medium column__6-of-12--large"><span class="column_fill"></span></div> <div class="column column__12-of-12 column__12-of-12--small column__6-of-12--medium column__6-of-12--large"><span class="column_fill"></span></div> <div class="column column__12-of-12 column__12-of-12--small column__4-of-12--medium column__4-of-12--large"><span class="column_fill"></span></div> <div class="column column__12-of-12 column__12-of-12--small column__4-of-12--medium column__4-of-12--large"><span class="column_fill"></span></div> <div class="column column__12-of-12 column__12-of-12--small column__4-of-12--medium column__4-of-12--large"><span class="column_fill"></span></div> <div class="column column__12-of-12 column__6-of-12--small column__6-of-12--medium column__3-of-12--large"><span class="column_fill"></span></div> <div class="column column__12-of-12 column__6-of-12--small column__6-of-12--medium column__3-of-12--large"><span class="column_fill"></span></div> <div class="column column__12-of-12 column__6-of-12--small column__6-of-12--medium column__3-of-12--large"><span class="column_fill"></span></div> <div class="column column__12-of-12 column__6-of-12--small column__6-of-12--medium column__3-of-12--large"><span class="column_fill"></span></div> <div class="column column__12-of-12 column__4-of-12--small column__4-of-12--medium column__2-of-12--large"><span class="column_fill"></span></div> <div class="column column__12-of-12 column__4-of-12--small column__4-of-12--medium column__2-of-12--large"><span class="column_fill"></span></div> <div class="column column__12-of-12 column__4-of-12--small column__4-of-12--medium column__2-of-12--large"><span class="column_fill"></span></div> <div class="column column__12-of-12 column__4-of-12--small column__4-of-12--medium column__2-of-12--large"><span class="column_fill"></span></div> <div class="column column__12-of-12 column__4-of-12--small column__4-of-12--medium column__2-of-12--large"><span class="column_fill"></span></div> <div class="column column__12-of-12 column__4-of-12--small column__4-of-12--medium column__2-of-12--large"><span class="column_fill"></span></div> <div class="column column__6-of-12 column__4-of-12--small column__3-of-12--medium column__1-of-12--large"><span class="column_fill"></span></div> <div class="column column__6-of-12 column__4-of-12--small column__3-of-12--medium column__1-of-12--large"><span class="column_fill"></span></div> <div class="column column__6-of-12 column__4-of-12--small column__3-of-12--medium column__1-of-12--large"><span class="column_fill"></span></div> <div class="column column__6-of-12 column__4-of-12--small column__3-of-12--medium column__1-of-12--large"><span class="column_fill"></span></div> <div class="column column__6-of-12 column__4-of-12--small column__3-of-12--medium column__1-of-12--large"><span class="column_fill"></span></div> <div class="column column__6-of-12 column__4-of-12--small column__3-of-12--medium column__1-of-12--large"><span class="column_fill"></span></div> <div class="column column__6-of-12 column__4-of-12--small column__3-of-12--medium column__1-of-12--large"><span class="column_fill"></span></div> <div class="column column__6-of-12 column__4-of-12--small column__3-of-12--medium column__1-of-12--large"><span class="column_fill"></span></div> <div class="column column__6-of-12 column__4-of-12--small column__3-of-12--medium column__1-of-12--large"><span class="column_fill"></span></div> <div class="column column__6-of-12 column__4-of-12--small column__3-of-12--medium column__1-of-12--large"><span class="column_fill"></span></div> <div class="column column__6-of-12 column__4-of-12--small column__3-of-12--medium column__1-of-12--large"><span class="column_fill"></span></div> <div class="column column__6-of-12 column__4-of-12--small column__3-of-12--medium column__1-of-12--large"><span class="column_fill"></span></div> </div>
-
Form Radio
Here are some options.
This uses a svg to replace the default checkbox styles.
.radio Add class of radio to the input
<form action="#" autocomplete="off"> <ul class="radios"> <li> <input type="radio" class="radio" name="radio--01" id="radio--01-01"> <span></span> <label for="radio--01-01">Option 1</label> </li> <li> <input type="radio" class="radio" name="radio--01" id="radio--01-02"> <span></span> <label for="radio--01-02">Option 2</label> </li> <li> <input type="radio" class="radio" name="radio--01" id="radio--01-03"> <span></span> <label for="radio--01-03">Option 3</label> </li> <li> <input type="radio" class="radio" name="radio--01" id="radio--01-04"> <span></span> <label for="radio--01-04">Option 4</label> </li> </ul> </form>
-
Form Inputs
Here are some options.
.error This changes the input style to show the error.
.success This changes the input style to show sucess.
.message Add a div after the input and add the class of message.
disabled Add disabled to the input
<form action="#" autocomplete="off"> <ul class="form-fields"> <li> <label for="general">Text</label> <input type="text" name="general" id="general"> </li> <li class="success"> <label for="success">Success</label> <input type="text" name="success" id="success" value="A correct value"> <div class="message">Correct!</div> </li> <li class="error"> <label for="error">Inline errors</label> <input type="text" name="error" id="error" value="An incorrect value"> <div class="message">Not a valid response</div> </li> <li> <label for="disabled">Disabled</label> <input type="text" name="disabled" id="disabled" disabled> </li> <li> <label for="email">Email</label> <input type="email" name="email" id="email"> </li> <li> <label for="tel">Tel</label> <input type="tel" name="tel" id="tel"> </li> <li> <label for="password">Password</label> <input type="password" name="password" id="password"> </li> <li class="optional"> <label for="textarea">Text box</label> <textarea name="textarea" id="textarea" cols="30" rows="10"></textarea> </li> </ul> </form>
-
Form Checkboxes
Here are some options.
This uses a span element to style and sit over the input, feel free to style.
.checkbox Add class of checkbox to the input.
<form action="#" autocomplete="off"> <ul class="checkboxes"> <li> <input type="checkbox" class="checkbox" name="checkbox--01" id="checkbox--01-01"> <span></span> <label for="checkbox--01-01">Option 1</label> </li> <li> <input type="checkbox" class="checkbox" name="checkbox--01" id="checkbox--01-02"> <span></span> <label for="checkbox--01-02">Option 2</label> </li> <li> <input type="checkbox" class="checkbox" name="checkbox--01" id="checkbox--01-03"> <span></span> <label for="checkbox--01-03">Option 3</label> </li> <li> <input type="checkbox" class="checkbox" name="checkbox--01" id="checkbox--01-04"> <span></span> <label for="checkbox--01-04">Option 4</label> </li> </ul> </form>