MUSHROOM BOY · Pattern Library

Utilities

The grids generated by Gridifier provide an array of sizing options—with explicit classes—for each major breakpoint.

Mix & match classes for grids and units to make any responsive layout necessary for templates.

Below is a reference of all the layouts available for pages within the website.

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.

Typografier generates font-sizes and line-heights for different screen widths that are more appropriate for the available space.

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.

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.

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.

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.

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.

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.

A helpful accessibility feature that should be included immediately within the <body> tag on the top of most pages.

All the different utility classes available from within Modulifier.

The sprite sheet contains the following icons for use in the website. Combine the icons with Modulifier & Typografier classes for lots of variability.

Sample code for using SVG icon spritesheets mixed with a text label, using the below classes.

Classes that can be used on elements & combined to make nicely aligned icons and labels.

Icons sizes available from Modulifier & Typografier.

Fields and buttons that can be pieced together to create forms. They can also be added anywhere applicable.

Field for the user to input their full name.

Field for the user to input their email.

Field for the user to input their phone number.

Field for the user to input their Credit Card.

Field for the user to input their address.

Field for the user to input their province/state.

Field for the user to input their postal code number.

A button that allows the user to accept to be subscribed to the MUSHROOM BOY emailing list.

Field for the user to input a possible discount code. Use only in cart.

A warning that pops up when the user is missing some information or a field.

A field the shows up on the product card in the cart as well as in the product display page that allows the user to add or subtract the quantity of their order.

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.

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.

A card to be used on the homepage and links through to the shirts product page.

A card to be used on the homepage and links through to the hoodies product page.

A card to be used on the homepage and links through to the jackets product page.

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`

The card that shows off the users cart total.

The card that shows off the products inside of each of the product pages. Each product that is displayed in the cart gets an new card so that the x-button in the top corner can remove it from the cart if needed.

Banners are used that the top of the pages.

Banner that is used on the home page of the site.

Banner that is used on every other page of the site. (not used on home page)

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.

Buttons for the shirts pages.

Buttons for the jackets pages.

Buttons for the hoodies pages.

A button that is used to select the disired size of the product. All availables sizes are in this pattern.

For when a certain size is out of stock.

The button to be used on the product for the user to click to add the item to their order.

A button that leads the user to the checkout. Used on Cart Total Card.

To remove 1 from the quanitiy of an item in the cart.

To add 1 from the quanitiy of an item in the cart.

Button to add a discount in Cart Total Card.

Button that allows the customer to finalise their purchase.

Button that allows the user to submit their email for the newsletter sign up.

Button that allows the customer to view the full secret featured collection.

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.

The navigation that leads the user around the site no matter what page they are on.

MUSHROOM BOY Pattern Library

MUSHROOM BOY Pattern Library

Patterns

Brand

Logos

Colours

Typefaces