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.
Layouts
Below is a reference of all the layouts available for pages within the website.
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
Brand
Logos
Colours
Typefaces
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>
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.
Forms
Fields and buttons that can be pieced together to create forms. They can also be added anywhere applicable.
A button that allows the user to accept to be subscribed to the MUSHROOM BOY emailing list.
{% pattern forms/mailing %}
Field for the user to input a possible discount code. Use only in cart.
{% pattern forms/discount %}
A warning that pops up when the user is missing some information or a field.
{% pattern forms/warning %}
Navigation, social links and copyright, holds all information that should appear at the bottom of every page. It stays the same from page to page.
{% pattern footer/footer %}
Cards
Cards should be used to display important groupings of informations and images.
A card to be used on the homepage and links through to the featured products page.
{% pattern cards/featured %}
A card to be used on the homepage and links through to the shirts product page.
{% pattern cards/shirtcard %}
A card to be used on the homepage and links through to the hoodies product page.
{% pattern cards/hoodie %}
A card to be used on the homepage and links through to the jackets product page.
{% pattern cards/jacket %}
A card to be used on the homepage and tells the user about the company.
{% pattern cards/about heading="ABOUT MUSHROOM BOY" text="place about the page in here" %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
heading
required
|
string
|
"ABOUT MUSHROOM BOY" | |||||||||||||||||||||
text
required
|
string
|
"place about the page in here" |
The card that shows off the product inside of each of the proudct pages.
{% pattern cards/product data=Product %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
data
required
|
object
|
Product
|
Banners
Banners are used that the top of the pages.
Buttons
Buttons sould be used in situations where a dramatic, obvious action is required. Try not to over use buttons because they should be the primary action for a screen.
A button that is used to select the disired size of the product. All availables sizes are in this pattern.
{% pattern buttons/size %}
The button to be used on the product for the user to click to add the item to their order.
{% pattern buttons/add %}
A button that leads the user to the checkout. Used on Cart Total Card.
{% pattern buttons/checkout %}
Button that allows the user to submit their email for the newsletter sign up.
{% pattern buttons/submit %}
Helps the user filters products if they are looking at all the products on the site. It goes in the top left corner of the page, under the navigation. In the code it goes above all the main content.
{% pattern secondarynav/productfilter %}
The navigation that leads the user around the site no matter what page they are on.
{% pattern header/nav %}