Vitamin Bee · Pattern Library

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.

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.

Below is a reference of all the includes 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.

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

The header should been seen in this state on all pages.

Forms are used for purchasing only, as there is not a sign up or subscribe option for this site. The varying fields are kept within the base colour theme, with rounded corners that are seen in other pictoral elements around the sites.

Basic text input for forms, which is required to submit.

{% pattern forms/basic-required-form label="Text Field" placeholder="eg. Write Text Here" %}

Field name							Data type						Example
`label` required							`string`						"Text Field"
`placeholder` required							`string`						"eg. Write Text Here"

Basic text input for forms, to provide small pieces of optional information.

{% pattern forms/basic-form label="Basic Text Field" placeholder="eg. Write Text Here" %}

Field name							Data type						Example
`label` required							`string`						"Basic Text Field"
`placeholder` required							`string`						"eg. Write Text Here"

Input for email addresses, included as part of the purchasing process to confirm shipments, purchases and link customers to the “bee-monthly” newsletter.

{% pattern forms/email-form label="Email Address" placeholder="yourname@email.com" %}

Field name							Data type						Example
`label` required							`string`						"Email Address"
`placeholder` required							`string`						"yourname@email.com"

Input allowing customers to provide a phone number, if they are interested in being contacted in this way in addition to email, concerning their purchase.

{% pattern forms/phone-form label="Telephone Number" %}

Field name							Data type						Example
`label` required							`string`						"Telephone Number"

Radio buttons can be used for establishing more information about the customer, and confirming their consent to being emailed by the company.

{% pattern forms/radio-form legend="Would you like to be signed up for our bee-monthly email newsletter?" %}

Field name							Data type						Example
`legend` required							`string`						"Would you like to be signed up for our bee-monthly email newsletter?"

A larger area in which customers can type more qualifying information. Would be used in the checkout process to request special instructions for the purchase and deliver process.

{% pattern forms/textarea-form label="Write more text here. " %}

Field name							Data type						Example
`label` required							`string`						"Write more text here. "

Allows customers to choose from multiple options. This is to be used for a product size picker (ie. which size honey jar they wish to purchase), or a province picker in the checkout.

{% pattern forms/selector-form label="Which item are you interested in?" item1="Item 1" item2="Item 2" item3="Item 3" %}

Field name	Data type	Example
`label` required	`string`	"Which item are you interested in?"
`item1` required	`string`	"Item 1"
`item2` required	`string`	"Item 2"
`item3` required	`string`	"Item 3"

This picker is to be used to select the quantity of items to be purchased when adding a product to the cart.

{% pattern forms/number-form label="Quantity" %}

Field name							Data type						Example
`label` required							`string`						"Quantity"

A checkbox, that has no link in the label field.

{% pattern forms/checkbox-form label="I would like to receive email updates from Vitamin Bee!" %}

Field name							Data type						Example
`label` required							`string`						"I would like to receive email updates from Vitamin Bee!"

Primary use is at the end of the purchasing form, to verify the customer has read terms of use.

{% pattern forms/checkbox-form-w-link label="I have read and agree to the " link="/legal/" link-label="terms and conditions." error-label="Please read the terms and conditions and accept." %}

Field name	Data type	Example
`label` required	`string`	"I have read and agree to the "
`link` required	`string`	"/legal/"
`link-label` required	`string`	"terms and conditions."
`error-label` required	`string`	"Please read the terms and conditions and accept."

Any field input that has required information (this will be almost all of them) needs to provide an alert if customers do not properly submit their information. Submitting this sample form without the required inputs being filled will show the error messages.

Cards are used throughout the site, primary over banners and as product links. They are all shaped like honeycomb to thematically match the products being sold.

A dark overlay card, to be used on lighter images. Displays on the right side of banners.

{% pattern cards/card-dark h1="WELCOME to the bee box" h1-alt="testerino" h2="Vitamin Bee is Ottawa’s one stop resource for all-natural, raw honey products." icon="honey-dipper" btn="See Shop" link="#" %}

Field name	Data type	Example
`h1` required	`string`	"WELCOME to the bee box"
`h1-alt` required	`string`	"testerino"
`h2` required	`string`	"Vitamin Bee is Ottawa’s one stop resource for all-natural, raw honey products."
`icon` required	`string`	"honey-dipper"
`btn` required	`string`	"See Shop"
`link` required	`url`	#

A light overlay card, to be used on darker images. Displays on the left side of banners.

{% pattern cards/card-light h1="An all-natural family business" h2="For over 40 years, our family has been curating a wide array of honey flavours." icon="beehive" btn="Learn More" link="#" %}

Field name	Data type	Example
`h1` required	`string`	"An all-natural family business"
`h2` required	`string`	"For over 40 years, our family has been curating a wide array of honey flavours."
`icon` required	`string`	"beehive"
`btn` required	`string`	"Learn More"
`link` required	`url`	#

This card has a series of buttons on it, as a way to navigate easily from the full product list page.

{% pattern cards/card-w-btns icon="bee" link="#" %}

Field name							Data type						Example
`icon` required							`string`						"bee"
`link` required							`url`						#

These cards are used as links to individual product pages. Each one has a coloured overlay to showcase the icon and hover state “View Product” button. Each product has an individual icon associated to it.

{% pattern cards/product-link data=Product %}

Field name							Data type						Example
`data` required							`object`						`Product`

This card will be used in lieu of a product image on an individual product page, assuming the product is either new, or on sale.

{% pattern cards/product-special image="honey/honey-orange.png" alt="Our product: Honey with Orange in a Jar." alt-special="On Sale" icon="sale" link="#" %}

Field name	Data type	Example
`image` required	`string`	"honey/honey-orange.png"
`alt` required	`string`	"Our product: Honey with Orange in a Jar."
`alt-special` required	`string`	"On Sale"
`icon` required	`string`	"sale"
`link` required	`url`	#

The footer should been seen in this state on all pages.

Banners are how images are displayed on the site, unless they are a product. Each has an overlay card to link to relevant content.

This banner image should have an image that is lighter, so as to have the best contrast with the card overlay. Ideally, it will also feature a subject that is closer to the left so the subject is not covered by the card.

{% pattern banners/banner-dark-card img="main-1" h1="WELCOME to the bee box" h2="Vitamin Bee is Ottawa’s one stop resource for all-natural, raw honey products." icon="honey-dipper" btn="See Shop" border-color="primary-dark" %}

Field name	Data type	Example
`img` required	`string`	"main-1"
`h1` required	`string`	"WELCOME to the bee box"
`h2` required	`string`	"Vitamin Bee is Ottawa’s one stop resource for all-natural, raw honey products."
`icon` required	`string`	"honey-dipper"
`btn` required	`string`	"See Shop"
`border-color` required	`string`	"primary-dark"
`link`	`url`	/shop/

This banner image should have an image that is darker, so as to have the best contrast with the card overlay. Ideally, it will also feature a subject that is closer to the right so the subject is not covered by the card.

{% pattern banners/banner-light-card img="main-2" h1="An all-natural family business" h2="For over 40 years, our family has been curating a wide array of honey flavours." icon="beehive" border-color="primary" btn="Learn More" %}

Field name	Data type	Example
`img` required	`string`	"main-2"
`h1` required	`string`	"An all-natural family business"
`h2` required	`string`	"For over 40 years, our family has been curating a wide array of honey flavours."
`icon` required	`string`	"beehive"
`border-color` required	`string`	"primary"
`btn` required	`string`	"Learn More"
`link`	`url`	/shop/

This banner image should have an image that is darker, so as to have the best contrast with the card overlay. Ideally, it will also feature a subject that is closer to the right so the subject is not covered by the card. This card is not nearly as frequent as the regular overlays, and should not be featured on any page that is linked in the three buttons that show on the card.

{% pattern banners/banner-btns img="shop-2" icon="bee" border-color="primary-light" %}

Field name	Data type	Example
`img` required	`string`	"shop-2"
`icon` required	`string`	"bee"
`border-color` required	`string`	"primary-light"
`link`	`url`	/shop/

A display of some common sections on the site.

The product information is displayed on every product page, to provide information for customers.

{% pattern sections/product-info data=page %}

Field name							Data type						Example
`data` required							`object`						`page`

This section is unique as it is the only banner on the site that does not use the hexagonal overlay card. It is to be used to encourage customers to sign up for a newsletter.

{% pattern sections/subscribe image="honey/honey-alfalfa.png" %}

Field name							Data type						Example
`image` required							`string`						"honey/honey-alfalfa.png"

This sidebar appears on individual product pages, to indicate to customers what items they have already placed in their carts.

{% pattern sections/cart-view icon="coffee" product-name="Honey with Coffee" product-quantity="2 x $8.99" product-name2="Honey with Orange" product-quantity2="1 x $8.99" icon2="orange" subtotal="$26.97" %}

Field name	Data type	Example
`icon` required	`string`	"coffee"
`product-name` required	`string`	"Honey with Coffee"
`product-quantity` required	`string`	"2 x $8.99"
`product-name2` required	`string`	"Honey with Orange"
`product-quantity2` required	`string`	"1 x $8.99"
`icon2` required	`string`	"orange"
`subtotal` required	`string`	"$26.97"

This sidebar appears on the cart page, to show what is in the cart while the customer inputs their credit card and purchasing information.

{% pattern sections/cart-contents icon="coffee" product-name="Honey with Coffee" product-quantity="2 x $8.99" product-name2="Honey with Orange" product-quantity2="1 x $8.99" icon2="orange" subtotal="$26.97" total="$44.97" %}

Field name	Data type	Example
`icon` required	`string`	"coffee"
`product-name` required	`string`	"Honey with Coffee"
`product-quantity` required	`string`	"2 x $8.99"
`product-name2` required	`string`	"Honey with Orange"
`product-quantity2` required	`string`	"1 x $8.99"
`icon2` required	`string`	"orange"
`subtotal` required	`string`	"$26.97"
`total` required	`string`	"$44.97"

These section headers separate the shop contents to easily view everything, and to keep things organized.

{% pattern sections/shop-section-headers h3="Honey" icon="honeypot-main" id="honey" %}

Field name	Data type	Example
`h3` required	`string`	"Honey"
`icon` required	`string`	"honeypot-main"
`id` required	`string`	"honey"

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.

Primary button, to be used in most situations.

{% pattern buttons/main btn="View Product" link="#" %}

Field name							Data type						Example
`btn` required							`string`						"View Product"
`link` required							`string`						"#"

Alternate option to the main, to be used for actions that are of particular significance on a page ie. “Add to Cart”.

{% pattern buttons/main-alt btn-alt="Learn More" link="#" %}

Field name							Data type						Example
`btn-alt` required							`string`						"Learn More"
`link` required							`string`						"#"

Solid colour button, used only for actions involving the checkout process. This includes the “Checkout” and “Place Order” buttons.

{% pattern buttons/solid solid="CHECKOUT" link="#" %}

Field name							Data type						Example
`solid` required							`string`						"CHECKOUT"
`link` required							`string`						"#"

This icon link is used for specific icon instances when only an icon is need to signify a link tag, such as for social media or the cart.

{% pattern buttons/icon-link image="cart" link="#" %}

Field name							Data type						Example
`image` required							`string`						"cart"
`link` required							`string`						"#"

There are various navigations on the site, which are either visible on every page, or part of a product page.

This search navigation is seen at the top of the heading banner, on every screen.

{% pattern navigations/search-bar-nav cart-amount="2" %}

Field name							Data type						Example
`cart-amount` required							`string`						"2"

This navigation is used only in the header, to be seen on every page.

Breadcrumbs are seen at the top of product pages, to indicate what section is being displayed.

{% pattern navigations/breadcrumbs shop-category="body" product="After Sun Soother" %}

Field name							Data type						Example
`shop-category` required							`string`						"body"
`product` required							`string`						"After Sun Soother"

The page number navigation is to be used when there are multiple pages or images to be displayed.

This navigation is used only in the footer, to be seen on every page.

Vitamin Bee Pattern Library

Vitamin Bee Pattern Library

Patterns