Brand
Logos
Colours
Typefaces
Grid
The grids generated by Gridifier provide an array of sizing options—with explicit classes—for each major breakpoint.
Grid sizes
Utility classes
Mix & match classes for grids and units to make any responsive layout necessary for templates.
Icons
The sprite sheet contains the following icons for use in the website. Combine the icons with Modulifier & Typografier classes for lots of variability.
Icons
Sample code for using SVG icon spritesheets mixed with a text label, using the below classes.
<a class="icon-link exa" href="#">
<i class="icon i-1">
<svg><use xlink:href="/images/icons.svg#icon-id"></use></svg>
</i>
<span class="icon-label">Icon label</span>
</a>
Icon classes
Classes that can be used on elements & combined to make nicely aligned icons and labels.
Layouts
Below is a reference of all the layouts available for pages within the website.
Modules
Modulifier generates a series of simple, default CSS components that can be used throughout the site, or as basic building blocks for more complex patterns.
Images & embed containers
Embed containers should be used for all content images, enforcing aspect ratios but also giving browsers a placeholder for the graphic before it loads to prevent unnecessary text reflows.
<div class="embed embed-4by3">
<img class="embed-item" src="/images/4by3.jpg" alt="">
</div>
Media objects
A simple pattern that provides and image beside some text—good for comments with avatars and many other situations. Will usually be combined into larger patterns.
<div class="media">
<div class="media-img">
<img src="/images/square.jpg" alt="">
</div>
<div class="media-body">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
Skip links
A helpful accessibility feature that should be included immediately within the <body> tag on the top of most pages.
<ul class="skip-links">
<li><a href="#main">Jump to main content</a></li>
<li><a href="#nav">Jump to main navigation</a></li>
<li><a href="#pause">Pause all animations</a></li>
</ul>
Typography
The modular typography uses a system generated by Typografier. There are multiple sizes and spacing classes available—all based on the font-size and line-height to create a harmonious vertical rhythm.
Size adjustments
Typografier generates font-sizes and line-heights for different screen widths that are more appropriate for the available space.
Vertical spacing
The vertical spacing classes generated by Typografier provide a range of different sizes for both top & bottom padding and bottom margins. These same sizes would be applied to the island classes.
Horizontal spacing
The horizontal spacing classes generated by Typografier provide range of different sizes for left & right padding. These same sizes would be applied to the island classes.
Font sizes
There are multiple font-sizes available based on a typographic scale. The font-sizes and line-heights increase as the screen gets wider to better use the available space.
Utility classes
Utilities
There are many utility classes available to all patterns & pages that help to quickly style elements without contributing to extra code duplication.
Buttons
Buttons should be used in situations where a dramatic, obvious action is required. Try not to over use buttons because they should be the primary call-to-action for a screen.
Default to using the basic button. It should always be used in front of light backgrounds.
{% pattern buttons/basic text="Rescue a Diplodocus" %}| Field name | Data type | Example | |||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
text
required
|
string
|
"Rescue a Diplodocus" | |||||||||||||||||||||
{% pattern cards/image data=Dino %}| Field name | Data type | Example | |||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
data
required
|
object
|
Dino
|
|||||||||||||||||||||
{% pattern header/header %}