Brand
Logos
Colours
Typefaces
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. See the documentation for all available classes.
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.
Grid
The grids generated by Gridifier provide an array of sizing options—with explicit classes—for each major breakpoint. See the documentation for all available classes.
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. See the documentation for all available classes.
List group
The list group system provides two classes: one for a vertical, stacking group of list items; and another for a horizontal, side-by-side group of list items.
Embed
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.
Media object
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.
Icons
The sprite sheet contains the following icons that are available for use in the website. Combine the icons with Modulifier classes for lots of variability. See the documentation for all available classes.
This banner is used on the home page to highlight the most important featured special.
<header class="banner pad-t-2 pad-b-2 gutter">
<div class="wrapper gutter pad-t-2">
<h1 class="push-1-2">Featured Item</h1>
<p class="giga text-fff">Description of featured item.</p>
<div>
<a class="btn btn-ghost giga" href="#">Shop now</a>
</div>
</div>
</header>
The buttons use the primary colour to highlight the buttons, allowing them to stand out.
- The primary button is to be used in standard sections and after large blocks of text.
- The secondary buttons are for coloured backgrounds or to create contrast for emphasis.
- The ghost button is used on banners and cards.
Buttons can be combined with font-size classes to make different sized buttons.
<a class="btn" href="#">Primary Button</a>
<a class="btn btn-secondary" href="#">Secondary Button</a>
<a class="btn btn-ghost" href="#">Ghost Button</a>
Cards
Cards are used to present important pieces of information such as products or deals. They are used to give the user a preview and an easy link to more information.
The category card is used on the home page to preview the different category of products that are available.
<a class="card relative" href="#">
<div class="embed embed-3by2">
<img class="embed-item" src="https://placehold.it/600x400" alt="">
</div>
<h3 class="absolute pin-br push-0 gutter-1-2 giga">Category Title</h3>
</a>
The product card is used for listing products for sale. They are linked to the products page.
<div class="card checkout-card grid grid-stretch relative island-1-4 content-fill" tabindex="0">
<div class="unit [ xs-1-4 ] island-1-4">
<div class="embed embed-1by1">
<img class="embed-item" src="https://placehold.it/100x100" alt="">
</div>
</div>
<div class="unit unit-content-distribute [ xs-3-4 ] island-1-4">
<h3 class="push-0 mega">Product Name</h3>
<p class="push-0 italic content-fill milli">Product Description</p>
<p class="push-0">$<span class="checkout-item-price">50.99</span></p>
<div class="product-quantity">
<label class="push-r-1-2 milli" for="product-quantity">Quantity</label>
<input class="milli" id="product-quantity" name="product-quantity" value="1">
</div>
<div class="absolute pin-tr island-1-2">
<a class="product-delete" href="#delete-item">
<i class="icon i-1rem">
<svg><use xlink:href="../../images/icons.svg#close"/></svg>
</i>
</a>
</div>
</div>
</div>
A confirmation overlay to confirm removal of products from cart.
<div class="delete-overlay">
<div class="card w-1 island absolute pin-c">
<p class="text-center">Are you sure you want to remove <span class="delete-item-name bold">Product 1</span> from your cart?</p>
<ul class="list-group-inline text-center push-0 milli">
<li class="gutter-1-2"><a class="btn delete-confirmed" href="#" tabindex="1">Yes</a></li>
<li class="gutter-1-2"><a class="btn btn-secondary delete-confirm-close" href="#" tabindex="1">No</a></li>
</ul>
</div>
</div>
The preview card is used to preview a highlighted special or product on the home page.
<a class="card relative" href="#">
<div class="embed embed-3by2">
<img class="embed-item" src="https://placehold.it/600x400" alt="">
</div>
<div class="card-overlay absolute w-1 h-1 island-1-2 pin-tl">
<h3 class="push-0">Get 25% Off</h3>
<p>Catan and other titles.</p>
<div>
<span class="btn btn-ghost">Shop Now</span>
</div>
</div>
</a>
The product card is used for listing products for sale. They are linked to the products page.
<a class="card content-fill unit-content-distribute" href="#">
<div class="embed embed-1by1">
<img class="embed-item" src="https://placehold.it/420x420" alt="" aria-label="#product-description-generic">
</div>
<div id="product-description-generic" class="island-1-2 unit-content-distribute content-fill prod-desc">
<h3 class="push-0 mega">Settlers of Catan</h3>
<p class="italic content-fill">Trade, build, settle.</p>
<p class="tera font-medium text-primary push-0">$50.99</p>
</div>
</a>
<div class="grid island-1-2 checkout-totals mega">
<div class="unit xs-1 m-1-2 unit-offset-m-1-2 island-1-2">
<dl class="grid">
<dt class="unit xs-1-2 push-0 pad-t-1-2 pad-b-1-2">Subtotal:</dt>
<dd class="unit xs-1-2 push-0 pad-t-1-2 pad-b-1-2">$131.96</dd>
<dt class="unit xs-1-2 push-0 pad-t-1-2 pad-b-1-2">Shipping:</dt>
<dd class="unit xs-1-2 push-0 pad-t-1-2 pad-b-1-2">$7.99</dd>
<dt class="unit xs-1-2 push-0 pad-t-1-2 pad-b">Taxes:</dt>
<dd class="unit xs-1-2 push-0 pad-t-1-2 pad-b">$18.19</dd>
<dt class="unit xs-1-2 push-0 checkout-total pad-t pad-b-1-2">Total:</dt>
<dd class="unit xs-1-2 push-0 checkout-total pad-t pad-b-1-2">$158.14</dd>
</dl>
</div>
</div>
Main footer to be used on all pages. Repeats important navigation items and also features social media links, contact, and legal information.
<footer id="footer" class="footer wrapper pad-t-2 pad-b-2" role="contentinfo">
<div class="grid grid-stretch gutter-1-2">
<div class="unit [ xs-1 m-1-2 ]">
<ul class="list-group push-0 island-1-4">
<li class="island-1-4">
<a class="inline-block" href="home.html">
<i class="icon i-logo">
<img src="../../images/logo.svg" alt="">
</i>
<span class="icon-label"><b>Top</b>Table</span>
</a>
</li>
<li class="island-1-4 milli"><a href="products.html">Products</a></li>
<li class="island-1-4 milli"><a href="#">Deals</a></li>
<li class="island-1-4 milli"><a href="#">News</a></li>
<li class="island-1-4 milli"><a href="#">Community</a></li>
</ul>
</div>
<div class="unit unit-content-distribute [ xs-1 m-1-2 ]">
<div>
<ul class="list-group-inline xs-hidden push-0">
<li class="island-1-4 valign-middle xs-hidden">
<a href="#">
<i class="icon i-social">
<svg><use xlink:href="../../images/icons.svg#search"/></svg>
</i>
</a>
</li>
<li class="island-1-4 valign-middle">
<a href="#">
<i class="icon i-social">
<svg><use xlink:href="../../images/icons.svg#cart"/></svg>
</i>
</a>
</li>
<li class="island-1-4 valign-middle xs-hidden">
<a href="#">
<i class="icon i-social">
<svg><use xlink:href="../../images/icons.svg#profile"/></svg>
</i>
</a>
</li>
</ul>
</div>
<div>
<ul class="list-group-inline nav-social push-0">
<li class="island-1-4 valign-middle">
<a href="#">
<i class="icon i-social">
<svg><use xlink:href="../../images/icons.svg#facebook"/></svg>
</i>
</a>
</li>
<li class="island-1-4 valign-middle">
<a href="#">
<i class="icon i-social">
<svg><use xlink:href="../../images/icons.svg#instagram"/></svg>
</i>
</a>
</li>
<li class="island-1-4 valign-middle">
<a href="#">
<i class="icon i-social">
<svg><use xlink:href="../../images/icons.svg#twitter"/></svg>
</i>
</a>
</li>
</ul>
<ul class="list-group-inline push-0 milli gutter-1-4 pad-b-1-4">
<li class="island-1-4">
<a href="#">Contact</a>
</li>
<li class="island-1-4">
<a href="#">Terms of Service</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
Forms
Form fields are used in a variety of settings. Their primary use is for the checkout form for ordering products, but they can also be used for the account login and search.
Used to set quantity of item and then adding it to cart on product description page.
<div class="product-quantity inline-block">
<label class="push-r-1-2 milli" for="product-quantity">Add to Cart</label>
<input class="milli" id="product-quantity" name="product-quantity" value="1">
</div>
Customized boxes for checkbox selectors.
<div class="push">
<input class="push-1-2" id="unchecked" name="checkbox-button-unchecked" type="checkbox">
<label for="unchecked">Unchecked</label>
</div>
<div class="push">
<input class="push-1-2" id="checked" name="checkbox-button-checked" type="checkbox" checked>
<label for="checked">Checked</label>
</div>
Basic form input used for numbers. Can be used for entering phone numbers, quantities, prices, etc.
<div class="push">
<input type="number" class="push-1-2" id="number-input" name="number-input" required>
<label for="number-input">Number Input</label>
<p class="error-message milli island-1-4 push-0" id="agree-error">
<i class="icon i-16"><svg><use xlink:href="images/icons.svg#error"/></svg></i>
<span class="icon-label">Please fill out this required field.</span>
</p>
</div>
Basic form input used for passwords.
<div class="push">
<input class="push-1-2" id="text-input" name="text-input" type="password" required>
<label for="text-input">Password Input</label>
<p class="error-message milli island-1-4 push-0" id="agree-error">
<i class="icon i-16"><svg><use xlink:href="images/icons.svg#error"/></svg></i>
<span class="icon-label">Please fill out this required field.</span>
</p>
</div>
Customized boxes for radio selectors.
<div class="push">
<input class="push-1-2" id="radio-unchecked" name="radio-button" type="radio">
<label for="radio-unchecked">Unchecked</label>
</div>
<div>
<input class="push-1-2" id="radio-checked" name="radio-button" type="radio" checked>
<label for="radio-checked">Checked</label>
</div>
Drop down menu for selecting a specific option.
<div class="push">
<select class="push-1-2" id="text-input" name="text-input" required>
<option value="">Select an option</option>
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
</select>
<label for="text-input">Select an item.</label>
<p class="error-message milli island-1-4 push-0" id="agree-error">
<i class="icon i-16"><svg><use xlink:href="images/icons.svg#error"/></svg></i>
<span class="icon-label">Please fill out this required field.</span>
</p>
</div>
Text input for large amounts of type. For example large paragraph responses, instructions, or reviews.
<div class="push">
<textarea class="push-1-2" id="text-area" name="text-area" required></textarea>
<label for="text-area">Text Area</label>
<p class="error-message milli island-1-4 push-0" id="agree-error">
<i class="icon i-16"><svg><use xlink:href="images/icons.svg#error"/></svg></i>
<span class="icon-label">Please fill out this required field.</span>
</p>
</div>
Basic form input used for text. Can be used for names, emails, addresses, etc.
<div class="push">
<input class="push-1-2" id="text-input" name="text-input">
<label for="text-input">Text Input</label>
<p class="error-message milli island-1-4 push-0" id="agree-error">
<i class="icon i-16"><svg><use xlink:href="images/icons.svg#error"/></svg></i>
<span class="icon-label">Please fill out this required field.</span>
</p>
</div>
Main header to be used across all pages. Works responsively on all screen sizes and features quick buttons for search, cart, and profile.
<header class="masthead" role="banner">
<div class="grid grid-middle wrapper island-1-2">
<div class="unit [ xs-1-2 m-3-4 ] gutter-1-2">
<a id="nav" class="inline-block push-r" href="home.html">
<i class="icon i-logo">
<img src="../../images/logo.svg" alt="">
</i>
<span class="icon-label giga"><b>Top</b>Table</span>
</a>
<nav role="navigation">
<ul class="list-group push-0">
<li class="island-1-2"><a class="prod kilo" href="products.html">Products</a></li>
<li class="island-1-2"><a class="kilo" href="#">Deals</a></li>
<li class="island-1-2"><a class="kilo" href="#">News</a></li>
<li class="island-1-2"><a class="kilo" href="#">Community</a></li>
<li class="ml-hidden">
<ul class="list-group-inline push-0 pad-t-1-2 pad-b-1-2">
<li class="island-1-2">
<a href="#">
<i class="icon i-social">
<svg><use xlink:href="../../images/icons.svg#search"/></svg>
</i>
</a>
</li>
<li class="island-1-2">
<a href="#">
<i class="icon i-social">
<svg><use xlink:href="../../images/icons.svg#profile"/></svg>
</i>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<ul class="list-group-inline push-0 text-right unit [ xs-1-2 m-1-4 ] island-1-4">
<li class="island-1-4 valign-middle xs-hidden search-container relative">
<input type="search" class="search milli" id="search" name="search" required>
<label class="search-label" for="search">
<i class="icon i-social">
<svg><use xlink:href="../../images/icons.svg#search"/></svg>
</i>
</label>
</li>
<li class="island-1-4 valign-middle">
<a class="cart" href="checkout.html">
<i class="icon i-social">
<svg><use xlink:href="../../images/icons.svg#cart"/></svg>
</i>
</a>
</li>
<li class="island-1-4 valign-middle xs-hidden">
<a href="#">
<i class="icon i-social">
<svg><use xlink:href="../../images/icons.svg#profile"/></svg>
</i>
</a>
</li>
<li class="valign-middle nav-tog">
<a class="nav-label block" href="#footer">
<span class="tog top"></span>
<span class="tog middle"></span>
<span class="tog bottom"></span>
</a>
</li>
</ul>
</div>
</header>
Navigation
Navigations help lead the user through the website and find information. They allow users to travel to different pages and filter results.
Bread crumbs show the path taken by users and give them and easy path to go back pages easily.
<ul class="bread-crumbs list-group-inline push-0 island">
<li><a class="bread-crumbs-all-products" href="#">Products</a></li>
<li class="bread-crumbs-category"><a href="#">All</a></li>
<li><a class="item" href="#">Settlers of Catan</a></li>
</ul>
Category selectors to filter different products in the product list.
<div class="grid gutter-1-2 wrapper pad-t pad-b">
<a href="#product-list" class="category-selector category-selected unit [ xs-1-3 m-1-6 ] island-1-2 text-center block" id="category-all">
<div class="island">
<div class="embed embed-1by1">
<img class="embed-item" src="../../images/logo.svg" alt="">
</div>
</div>
<p class="bold mega push-0">All</p>
</a>
<a href="#product-list" class="category-selector unit [ xs-1-3 m-1-6 ] island-1-2 text-center block" id="category-board-games">
<div class="embed embed-1by1">
<img class="embed-item" src="../../images/categories/category-board-games.jpg" alt="">
</div>
<p class="bold mega push-0">Board Games</p>
</a>
<a href="#product-list" class="category-selector unit [ xs-1-3 m-1-6 ] island-1-2 text-center block" id="category-card-games">
<div class="embed embed-1by1">
<img class="embed-item" src="../../images/categories/category-card-games.jpg" alt="">
</div>
<p class="bold mega push-0">Card Games</p>
</a>
<a href="#product-list" class="category-selector unit [ xs-1-3 m-1-6 ] island-1-2 text-center block" id="category-rpgs">
<div class="embed embed-1by1">
<img class="embed-item" src="../../images/categories/category-rpgs.jpg" alt="">
</div>
<p class="bold mega push-0">RPGs</p>
</a>
<a href="#product-list" class="category-selector unit [ xs-1-3 m-1-6 ] island-1-2 text-center block" id="category-dice">
<div class="embed embed-1by1">
<img class="embed-item" src="../../images/categories/category-dice.jpg" alt="">
</div>
<p class="bold mega push-0">Dice</p>
</a>
<a href="#product-list" class="category-selector unit [ xs-1-3 m-1-6 ] island-1-2 text-center block" id="category-other">
<div class="embed embed-1by1">
<img class="embed-item" src="../../images/categories/category-accessories.jpg" alt="">
</div>
<p class="bold mega push-0">Other</p>
</a>
</div>
Header and basic filter and search for the start of the product list.
<div class="grid grid-middle products pad-t-2">
<div class="unit [ xs-1 m-1-3 ]">
<h1 class="push-0">Products</h1>
</div>
<div class="unit [ xs-1 m-2-3 ] product-search-sort">
<div class="grid grid-middle">
<div class="unit [ xs-1 m-1-2 l-2-3 ]">
<label class="text-primary inline-block valign-middle kilo" for="product-sort">Sort:</label>
<select class="sort valign-middle" name="product-sort" id="product-sort">
<option>Most Popular</option>
<option>Highest to Lowest</option>
<option>Lowest to Highest</option>
<option>Newest Items</option>
</select>
</div>
<div class="unit [ xs-1 m-1-2 l-1-3 ]" role="search">
<input type="search" name="product-search">
</div>
</div>
</div>
</div>
The photo array is used to display different different photos of a product to highlight different features and pieces.
<div>
<div class="grid photo-array">
<div class="unit [ xs-1 ] photo-array-main island-1-2">
<a class="embed embed-1by1 photo-array-active block" href="#photo-array-focus">
<img class="embed-item pa-photo-main" src="https://placehold.it/100x100" alt="">
</a>
</div>
<div class="unit [ xs-1-2 s-1-4 ] island-1-2">
<a class="photo-array-btn block photo-array-btn-selected embed embed-1by1" href="#photo-array-1">
<img class="embed-item pa-photo-1" src="https://placehold.it/100x100" alt="">
</a>
</div>
<div class="unit [ xs-1-2 s-1-4 ] island-1-2">
<a class="photo-array-btn block embed embed-1by1" href="#photo-array-2">
<img class="embed-item pa-photo-2" src="https://placehold.it/200x200" alt="">
</a>
</div>
<div class="unit [ xs-1-2 s-1-4 ] island-1-2">
<a class="photo-array-btn block embed embed-1by1" href="#photo-array-3">
<img class="embed-item pa-photo-3" src="https://placehold.it/300x300" alt="">
</a>
</div>
<div class="unit [ xs-1-2 s-1-4 ] island-1-2">
<a class="photo-array-btn block embed embed-1by1" href="#photo-array-4">
<img class="embed-item pa-photo-4" src="https://placehold.it/400x400" alt="">
</a>
</div>
</div>
<div id="photo-array-focus" class="photo-array-focus">
<img src="https://placehold.it/100x100" alt="">
<a class="photo-array-focus-next" href="#">
<i class="icon i-3rem">
<svg><use xlink:href="../../images/icons.svg#next"/></svg>
</i>
<span class="icon-label hidden">Next</span>
</a>
<a class="photo-array-focus-previous" href="#">
<i class="icon i-3rem">
<svg><use xlink:href="../../images/icons.svg#previous"/></svg>
</i>
<span class="icon-label hidden">Previous</span>
</a>
<a class="photo-array-focus-close" href="#">
<i class="icon i-1-5rem">
<svg><use xlink:href="../../images/icons.svg#close"/></svg>
</i>
<span class="icon-label hidden">Close</span>
</a>
</div>
</div>
Sections can also be combined with section colour classes including section-highlight-light and section-highlight-medium which help differentiate them on a singular page. If only one section is on the page, use section-highlight-light. If there are multiple in a row, use section-highlight-light, then a <section> without the class section-highlight, then a section-highlight-medium, rotating through as needed.
<section id="section-name" class="pad-b-2 pad-t-2 section-highlight section-highlight-light">
<div class="grid grid-stretch gutter-1-2 pad-t-2 pad-b-2 wrapper">
<div class="unit unit-content-distribute [ xs-1 m-1-2 l-1-3 ] island-1-2">
<h2>Join our community!</h2>
<p class="content-fill">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<div>
<a class="btn btn-ghost" href="#">Learn more</a>
</div>
</div>
<div class="unit [ xs-1 m-1-2 l-2-3 ] island-1-2">
<div class="embed embed-4by3">
<img class="embed-item" src="https://placehold.it/800x600" alt="">
</div>
</div>
</div>
</section>
Tabs
Tabbed sections are to be used inside of a <section> with an appropriate section-highlight class. The tabbed section is used when multiple pages or categories of information are required to be displayed. Examples include product information and the checkout stages.
The tab bar is used to navigate between tab pages. The tab bar uses jQuery to read the href to target the proper page to display, therefore the tab bar each href must correspond with a tab page id.
<ul class="grid list-group section-tab-btns">
<li class="unit [ xs-1 s-1-3 ] text-center section-tab-selected"><a class="tab-button-1 section-tab-btn block island-1-4" href="#tab-page-1">Description</a></li>
<li class="unit [ xs-1 s-1-3 ] text-center"><a class="tab-button-2 section-tab-btn block island-1-4" href="#tab-page-2">Product Specs.</a></li>
<li class="unit [ xs-1 s-1-3 ] text-center"><a class="tab-button-3 section-tab-btn block island-1-4" href="#tab-page-3">Return Policy</a></li>
</ul>
The tab page code will vary depending on use. Each tab grouping can have up to three tab pages. Make sure to change the tab page id on each page beginning with #tab-page-1 through #tab-page-3.
For this pattern, view the pattern code and copy paste the html directly. Include the outer div with classes pad-t-2 and pad-b-2 for consistent spacing.
<div class="pad-t-2 pad-b-2">
<div id="tab-page-1" class="section-tab-page section-tab-page-active">
<h3>Insert Content Here</h3>
<p class="push-0">Remove or add elements as necessary for applicable tab container use.</p>
</div>
</div>