Layouts
Below is a reference of all the layouts available for pages within the website.
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.
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
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.
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>
Brand
Logos
Colours
Typefaces
Headers
This page contains the headers used across all the website pages.
This header is to be used on the main page only and is already supplied in the front layout.
{% pattern header/header-main %}
Product Displays
These product display patterns are to be used on the product details page only. It contains the different types of product details used for different items and must all be used in conjuction with the photo array. The photo array must always placed on the left while the product details is on the right.
This photo array is to be use in conjuction with the products details page. It should not be used anywhere else and is always placed to the left of the product details.
{% pattern product-details/photo-array data=product %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
data
required
|
object
|
product
|
This page contains the footers used across all the website pages.
{% pattern footer/footer %}
Checkout
The page holds all the necessary pieces to build the checkout page website.
The items table holds all the items the user has chosen. It displays the basic information of the product. This include its title, the chosen size or colour, the quantity, price, and the subtotal. It should always be located at the top of the checkout page.
{% pattern checkout/items %}
The cart summary list contains the cost summary of all the items the user has chosen. The total price, shipping cost, taxes, and the total price. It should be located to the left of the checkout form, but at the bottom so the user can review to final price before paying.
{% pattern checkout/cart-summary %}
Buttons
Buttons are to be used for a sudden or dramatic change in information takes place, such as linking to a new page or submitting information. They are mainly seen in call to actions or form fields.
This basic button is used on white backgrounds to create contrast. It should only be used to link to other important areas of the website like promos.
{% pattern buttons/basic text="See More" url="#" aria="This link will bring you somewhere" %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
text
required
|
string
|
"See More" | |||||||||||||||||||||
url
required
|
string
|
"#" | |||||||||||||||||||||
aria
required
|
string
|
"This link will bring you somewhere" |
This light button is used on dark backgrounds to create contrast. It should only be used to link to other important areas of the website like promos.
{% pattern buttons/light text="See More" url="#" aria_label="This link will bring you somewhere" %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
text
required
|
string
|
"See More" | |||||||||||||||||||||
url
required
|
string
|
"#" | |||||||||||||||||||||
aria_label
required
|
string
|
"This link will bring you somewhere" |
The ghost button should only be used when you want draw a little more attention then just a regular button. It should be used carefully as it can be hard to see, it is recommended to be used on white or lighter backgrounds where there is sufficient contrast.
{% pattern buttons/ghost text="See More" url="#" aria_label="This link will bring you somewhere" %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
text
required
|
string
|
"See More" | |||||||||||||||||||||
url
required
|
string
|
"#" | |||||||||||||||||||||
aria_label
required
|
string
|
"This link will bring you somewhere" |
The attention button uses yellow background with drop shadow to draw the users attention. It should be used in situtations involding purchasing i.e. “add to cart” or “buy now”.
{% pattern buttons/attention text="Add To Cart" url="#" aria_label="This link will bring you somewhere" %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
text
required
|
string
|
"Add To Cart" | |||||||||||||||||||||
url
required
|
string
|
"#" | |||||||||||||||||||||
aria_label
required
|
string
|
"This link will bring you somewhere" |
The submit button is a special case scenario. It does not link to others pages but submits a form and is used in relation with an input field such as the search bar or a checkout screen.
{% pattern buttons/submit text="Submit" %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
text
required
|
string
|
"Submit" |
Banners
Banners are to be used sparingly as they can be higher resolution images.
The call to action banner should only be used on the front store page and only ever used with a search bar. It is a means for the user to search the website.
{% pattern banners/hero-banner heading="Rocket ship ready and fueled" banner="banner-example.jpg" %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
heading
required
|
string
|
"Rocket ship ready and fueled" | |||||||||||||||||||||
banner
required
|
string
|
"banner-example.jpg" |
The promotional banner is used to promote current deals and sales that the site has to offer, but can be found on every page at the top. This is allowed because it can never have an image with it.
{% pattern banners/promo-banner heading="All mugs are now 20% off!" description="Get it now, offer only lasts till February 12th" url="#" %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
heading
required
|
string
|
"All mugs are now 20% off!" | |||||||||||||||||||||
description
required
|
string
|
"Get it now, offer only lasts till February 12th" | |||||||||||||||||||||
url
required
|
string
|
"#" |
A Page banner is used for seperpate pages on the website, they do not include an image. They can include a button though. If it has a button the pattern code must include the button_text and button_url.
{% pattern banners/page-banner heading="All Products" %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
heading
required
|
string
|
"All Products" | |||||||||||||||||||||
button_text
|
string
|
"Learn More" | |||||||||||||||||||||
button_url
|
url
|
/products/ |
The image banner can be included on any page that is not the front page or the product related page. This can include about us page, updates page etc.
{% pattern banners/img-banner title="About Us" desc="The Puurfect site for every cat lover." url="/images/banners/banner-example.jpg" %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
title
required
|
string
|
"About Us" | |||||||||||||||||||||
desc
required
|
string
|
"The Puurfect site for every cat lover." | |||||||||||||||||||||
url
required
|
string
|
"/images/banners/banner-example.jpg" |
Cards
Cards are used to describe important bits of information quickly on the website.
This is the standard product card. It should always contain an image, title, product title and a price.
{% pattern cards/product-card data=product %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
data
required
|
object
|
product
|
This is a sale card and used when an item goes on sale. Must contain an image, title, product title, original price and a the current sale price.
{% pattern cards/sale-card data=product %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
data
required
|
object
|
product
|
A category card is used as link to different product sections on the website. The image should relate to the product itself.
{% pattern cards/category-card url="/products/" aria_label="Click this link to view all sorts of fun mugs here!" image="/images/products/product-catonaut-mug.jpg" category="Mugs" %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
url
required
|
string
|
"/products/" | |||||||||||||||||||||
aria_label
required
|
string
|
"Click this link to view all sorts of fun mugs here!" | |||||||||||||||||||||
image
required
|
url
|
/images/products/product-catonaut-mug.jpg | |||||||||||||||||||||
category
required
|
string
|
"Mugs" |
The Icon Card is used to display quick information on different aspects of the company. This can include where a product is made, shipping, return policies etc. It can also include a learn more option for the user to click on if more info is needed. Four of these cards will be located on the front page at the very bottom just above the footer.
{% pattern cards/icon-card icon="#leaf" aria_label="Click this link to learn more about our Canadian made products." title="True Canadian" desc="All products are 100% Canadian made. And all art is by our nations very talented artists." button_url="#" %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
icon
required
|
url
|
#leaf | |||||||||||||||||||||
aria_label
required
|
string
|
"Click this link to learn more about our Canadian made products." | |||||||||||||||||||||
title
required
|
string
|
"True Canadian" | |||||||||||||||||||||
desc
required
|
string
|
"All products are 100% Canadian made. And all art is by our nations very talented artists." | |||||||||||||||||||||
button_url
required
|
url
|
# |
An image card is used to display quick bits of information supported by an image, usually an illustration. It has no link nor button.
{% pattern cards/image-card aria_label="Click this link to view all sorts of fun mugs here!" image="/images/logo.svg" text="Catonaut is the best damn site you will ever see… Maybe." %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
aria_label
required
|
string
|
"Click this link to view all sorts of fun mugs here!" | |||||||||||||||||||||
image
required
|
string
|
"/images/logo.svg" | |||||||||||||||||||||
text
required
|
string
|
"Catonaut is the best damn site you will ever see… Maybe." |
Sections
These sections are to be used on the main page. They will contain information involving new items, deals and art work that the site will provide for future circumstances.
The sectional banner is used to promote new items or events that the website will offer. It should be used on the front page as a section and contains a larger image to support the width. and the product must be located on the left side of the image.
{% pattern sectional/sectional-banner heading="Brand new mugs starting at 20% off!" desc="Get them now, deal only lasts till February 12th" image="/images/section-example.jpg" aria_label="This is an image of the new Catonaut ceramic mug" %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
heading
required
|
string
|
"Brand new mugs starting at 20% off!" | |||||||||||||||||||||
desc
required
|
string
|
"Get them now, deal only lasts till February 12th" | |||||||||||||||||||||
image
required
|
url
|
/images/section-example.jpg | |||||||||||||||||||||
aria_label
required
|
string
|
"This is an image of the new Catonaut ceramic mug" |
The half sections are used when the image is not a full banner and are only found on the front page. It also uses an outlined button so that it brings more attention.
{% pattern sectional/half-section heading="Brand new mugs starting at 20% off!" desc="Get them now, deal only lasts till February 12th" image="/images/products/product-catonaut-mug.jpg" aria_label="This is an image of the new Catonaut ceramic mug" %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
heading
required
|
string
|
"Brand new mugs starting at 20% off!" | |||||||||||||||||||||
desc
required
|
string
|
"Get them now, deal only lasts till February 12th" | |||||||||||||||||||||
image
required
|
url
|
/images/products/product-catonaut-mug.jpg | |||||||||||||||||||||
aria_label
required
|
string
|
"This is an image of the new Catonaut ceramic mug" | |||||||||||||||||||||
button_text
|
string
|
"Learn More" | |||||||||||||||||||||
button_url
|
url
|
/products/ | |||||||||||||||||||||
button_aria
|
string
|
"This link will lead you somewhere" |
This text section can be used for multiple lines of text. It is typically used for describing things such an about us or other things relating to the sites content. It can inculde a regular button but no imagery, but bear in mind that it would not be good for promoting items.
{% pattern sectional/text-sec title="About Us" text="Catonaut is for the internet who loves cats and love products with cats on them even more! No one loves our little feline friends more than us. So start your crazy cat collection today with all of this beautiful art." %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
title
required
|
string
|
"About Us" | |||||||||||||||||||||
text
required
|
string
|
"Catonaut is for the internet who loves cats and love products with cats on them even more! No one loves our little feline friends more than us. So start your crazy cat collection today with all of this beautiful art." |
The image section is used as seperator of content and can be filled with any image needed. It contains no text or buttons and is stricly meant for seperating purposes.
{% pattern sectional/image-sec url="/images/banners/cat-banner.jpg" aria_label="Out anjoying the sun." %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
url
required
|
string
|
"/images/banners/cat-banner.jpg" | |||||||||||||||||||||
aria_label
required
|
string
|
"Out anjoying the sun." |
Navigations
These are common navigation found on the website that are not part of the header or footer.
This is the main navigation used in the header for the website and no where else.
{% pattern navigations/main-nav %}
This navigation allows the user to quickly locate where they are on the page and quickly access previous pages they have been through.
{% pattern navigations/breadcrumbs %}
The page navigator allows the user to cycle through more then one page of products. They have numbers to jump directly to a page or simple left and right controls to go forward or back from their current position. Their never be more than nine numbers visible at any time.
{% pattern navigations/page-nav %}
The social navigation is used for quick access to the sites social presence on the web. It should only ever be used in the footer.
{% pattern navigations/social-nav %}
The Filter bar is only found on the product pages and is used to filter out options available for that product. It is always located to the left side of the content and should be a column of its own.
{% pattern navigations/sidebar %}
This tool bar is located on every page of the website along with the header. It gives the user quick access to login in, sign up or access their cart. It should always be found at the top of page unless there is a promotion banner, then it is found directly underneath it.
{% pattern navigations/tool-bar %}
Forms
Forms are to be used in realtion with a submit button. Every id field must be unique to the form it is placed in.
This is a standard required input field for short lines of text. It should only be found in the checkout, sign-up or log-in page. It can be used as a name field or an address field.
{% pattern forms/basic-field-req label="Full Name" id="1" warning_msg="Please enter your full name here." %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
label
required
|
string
|
"Full Name" | |||||||||||||||||||||
id
required
|
string
|
"1" | |||||||||||||||||||||
warning_msg
required
|
string
|
"Please enter your full name here." | |||||||||||||||||||||
placeholder
|
string
|
"Enter your full name here" |
This is a standard input field meant for short lines of text. It can be used where necessary. A good example for this is a second address line that would not be required.
{% pattern forms/basic-field label="Address Line 2" id="1" %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
label
required
|
string
|
"Address Line 2" | |||||||||||||||||||||
id
required
|
string
|
"1" | |||||||||||||||||||||
placeholder
|
string
|
"Enter your full name here" |
A standard phone number field. Should only be found on the checkout page.
{% pattern forms/telephone %}
This is a standard email field. This can be found on the checkout and sign-up page.
{% pattern forms/email %}
This date picker field is for choosing specific dates. It should only be found on the checkout page as an expirey date for credit cards.
{% pattern forms/date-picker %}
This is a password field. This is to be used in the sign-up form or log-in page.
{% pattern forms/password %}
This is a select field geared towards provinces. This can be found on the checkout page.
{% pattern forms/province %}
A selction field with multiple items to choose from. Should be used on a products page and checkout page.
{% pattern forms/select data=product %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
data
required
|
object
|
product
|
This a text field area that can be used for multiple lines of text. Should be used primarly for comment fields or text areas.
{% pattern forms/text-field %}
This is a standard checkbox. This should be used in the checkout page or in with the sign-up form to recieve emails, offers and other non-contract agreements.
{% pattern forms/checkbox label="Want to recieve promotional offers?" id="1" %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
label
required
|
string
|
"Want to recieve promotional offers?" | |||||||||||||||||||||
id
required
|
string
|
"1" |
This checkbox is to be used when it is required to be checked in order to continue. A common place for this is during the checkout process.
{% pattern forms/checkbox-required label="Agree to Terms & Services" id="1" warning_msg="You must accept the Terms & Services in order to continue." %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
label
required
|
string
|
"Agree to Terms & Services" | |||||||||||||||||||||
id
required
|
string
|
"1" | |||||||||||||||||||||
warning_msg
required
|
string
|
"You must accept the Terms & Services in order to continue." |
This quantity field used to determine how many of an item the customer may want. It can be found on the products page before adding to cart or even on the checkout page if the customer decides they want less or more.
{% pattern forms/quantity %}
Field name | Data type | Example | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
hidden
|
string
|
"visually-hidden" |
Radio buttons are used to determine yes or no questions or any question that invloves multiple answers but only one option to pick.
{% pattern forms/radio %}
This is a standard fieldset with warning messages included, try clicking submit without entering any information.
{% pattern forms/fieldset %}
This search field is to be used only on the main page of the website, inside the hero banner. It can not be used anywhere else.
{% pattern forms/search %}