Pew Pew · 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.

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

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

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.

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.

This is the header. It is to be used across the entire site.

These are all the types of navigations found on the site, including the main navigation, as well as the navigations that are not part of the header or footer.

This is the main navigation of the website. It should be used on a black background in the header, across the entire site.

This is the tool bar. It is located at the top of the header on every page.

{% pattern navigation/tool-bar number="2" %}

Field name							Data type						Example
`number` required							`number`						2

This is the product filters. It should not be used on the main website page or the checkout pages, and should only be used on pages that showcase the various products available for sale.

{% pattern navigation/product-filters icon="icons.svg#right-arrow" %}

Field name							Data type						Example
`icon` required							`image`						icons.svg#right-arrow

This is the page navigation. This should be used on the main products pages and the category pages, or any page that showcases a list of individual products in cards. It should be located at the bottom right of the page above the footer.

{% pattern navigation/page-nav arrow-l="icons.svg#left-arrow" arrow-r="icons.svg#right-arrow" %}

Field name							Data type						Example
`arrow-l` required							`image`						icons.svg#left-arrow
`arrow-r` required							`image`						icons.svg#right-arrow

This is the social navigation buttons. These buttons link to external sites for the social media pages. It is used in the footer only.

{% pattern navigation/social-nav facebook="icons.svg#facebook" twitter="icons.svg#twitter" pinterest="icons.svg#pinterest" %}

Field name	Data type	Example
`facebook` required	`image`	icons.svg#facebook
`twitter` required	`image`	icons.svg#twitter
`pinterest` required	`image`	icons.svg#pinterest

This is the footer navigation. It is to be used in the footer only, across the website.

Banners are used to delineate the various sections, promote site-wide deals, and call-to-actions.

A sectional banner is used to separate the various sections on the website. For this banner, no image is to be used.

{% pattern banners/basic title="New Arrivals" %}

Field name							Data type						Example
`title` required							`string`						"New Arrivals"

A call to action banner is used on the main page only. It is meant to showcase new arrlivals, sales, and the top selling products.

{% pattern banners/call-to-action title="Calling All Scavengers!" details="Come raid our new stock." %}

Field name	Data type	Example
`title` required	`string`	"Calling All Scavengers!"
`details` required	`string`	"Come raid our new stock."
`button_title`	`string`	"Buy Now"
`button_url`	`url`	/products/

The promotional banner is used to promote site wide sales and new items.

{% pattern banners/promotional-banner title="All stickers are 25% off!" details="Get some now, offer lasts until May 4th." href="/products/" %}

Field name	Data type	Example
`title` required	`string`	"All stickers are 25% off!"
`details` required	`string`	"Get some now, offer lasts until May 4th."
`href` required	`url`	/products/

This is a checkout banner. It is used on the checkout page to section the forms into shipping information and payment information.

{% pattern banners/checkout-banner num="1" title="Shipping Information" %}

Field name							Data type						Example
`num` required							`string`						"1"
`title` required							`string`						"Shipping Information"

This is the footer. It is to be used across the entire site.

Forms are used in situations with a ‘submit’ button. Each field should have a unique ‘id’ and ‘for’ in the form it is placed.

This is the basic form field. It is meant for single lines of text, and can be used where necessary. This field by default is not required, which can be used for optional fields such as ‘address line 2’.

{% pattern form/basic-form title="Address 2" id="address-2" type="text" placeholder="" %}

Field name	Data type	Example
`title` required	`string`	"Address 2"
`id` required	`string`	"address-2"
`type` required	`string`	"text"
`placeholder` required	`string`	""

This is the basic required form field. It is meant for single lines of text, and should be used for forms found in the checkout, sign up, and login pages. This field by default is required and inlcuded an error message when fields are submitted without being filled.

{% pattern form/required-basic title="Last Name" id="last-name" details="a last name" error="last-name-error" type="text" placeholder="" %}

Field name	Data type	Example
`title` required	`string`	"Last Name"
`id` required	`string`	"last-name"
`details` required	`string`	"a last name"
`error` required	`string`	"last-name-error"
`type` required	`string`	"text"
`placeholder` required	`string`	""

This is the standard checkbox.This checkbox by default is not required, which can be used for optional elements such as agreeing to receive emails, offers, and other non-contract agreements.

{% pattern form/basic-checkbox label="Would you like to receive promotional offers?" id="promo-offers" %}

Field name							Data type						Example
`label` required							`string`						"Would you like to receive promotional offers?"
`id` required							`string`						"promo-offers"

This is the basic required checkbox. This checkbox by default is required, which can be used for agreeing to the terms of service.

{% pattern form/required-checkbox label="Agree to Terms and Servies" id="tos" details="You must agree to the Terms and Services" error="tos-error" %}

Field name	Data type	Example
`label` required	`string`	"Agree to Terms and Servies"
`id` required	`string`	"tos"
`details` required	`string`	"You must agree to the Terms and Services"
`error` required	`string`	"tos-error"

This is the basic radio button. This radio button by default is required, which can be used for determining yes or no questions, or any question invloving multiple answer choices but only one option to pick.

{% pattern form/radio legend="Choose a Delivery Method" id1="std-ship" id2="2d-ship" id3="1d-ship" name="ship" label1="Standard Shipping" label2="2-Day Express Shipping" label3="1-Day Express Shipping" price1="5.99" price2="8.99" price3="11.99" description1="Normally ships in 4–5 business days, unless otherwise noted." description2="Normally ships in 2 business days, unless otherwise noted." description3="Normally ships in 1 business day, unless otherwise noted." details="You must select a delivery method" error="ship-error" %}

Field name	Data type	Example
`legend` required	`string`	"Choose a Delivery Method"
`id1` required	`string`	"std-ship"
`id2` required	`string`	"2d-ship"
`id3` required	`string`	"1d-ship"
`name` required	`string`	"ship"
`label1` required	`string`	"Standard Shipping"
`label2` required	`string`	"2-Day Express Shipping"
`label3` required	`string`	"1-Day Express Shipping"
`price1` required	`number`	5.99
`price2` required	`number`	8.99
`price3` required	`number`	11.99
`description1` required	`string`	"Normally ships in 4–5 business days, unless otherwise noted."
`description2` required	`string`	"Normally ships in 2 business days, unless otherwise noted."
`description3` required	`string`	"Normally ships in 1 business day, unless otherwise noted."
`details` required	`string`	"You must select a delivery method"
`error` required	`string`	"ship-error"

This is the region/country selection field. This field by default is required, and is found on the shipping and payment forms.

{% pattern form/select-region id="country" label="Country/Region" details="You must select a country or region" error="region-error" %}

Field name	Data type	Example
`id` required	`string`	"country"
`label` required	`string`	"Country/Region"
`details` required	`string`	"You must select a country or region"
`error` required	`string`	"region-error"

This is the size selection field. This field by default is required, and is found on the product pages.

{% pattern form/select-size id="size" label="Size" details="You must select a size" error="size-error" %}

Field name	Data type	Example
`id` required	`string`	"size"
`label` required	`string`	"Size"
`details` required	`string`	"You must select a size"
`error` required	`string`	"size-error"

This is the quantity selection field. This field by default is required, and is found on the product pages.

{% pattern form/select-quantity id="quant" title="Quantity" type="number" details="Please select a quantity" error="quant-error" %}

Field name	Data type	Example
`id` required	`string`	"quant"
`title` required	`string`	"Quantity"
`type` required	`string`	"number"
`details` required	`string`	"Please select a quantity"
`error` required	`string`	"quant-error"

This is an example of a fieldset with warnings.

{% pattern form/warning-fieldset formtitle="Checkout" formalert="There are some items that require your attention" %}

Field name							Data type						Example
`formtitle` required							`string`						"Checkout"
`formalert` required							`string`						"There are some items that require your attention"

This is the search field. It is used only in the header on medium and large screens on dark backgrounds.

The sections includes various groupings of information. The image sections and the text section should be used on the main page. The item summary and order summary sections should only be used on the checkout page.

This is a full image section. It is used to promote sales and new items to the website. This image section should be used on the main page and the product should be located to the left of the image.

{% pattern sections/full-img-section title="Select mugs up to 50% off!" details="Get them now, sale ends May 4th" image="mugs-banner.jpg" %}

Field name	Data type	Example
`title` required	`string`	"Select mugs up to 50% off!"
`details` required	`string`	"Get them now, sale ends May 4th"
`image` required	`image`	mugs-banner.jpg
`button_title`	`string`	"Buy Now"
`button_url`	`url`	/sale/

This is a text section. It is meant for multiple lines of text, and is used on pages such as an about page.

{% pattern sections/text-section title="About" details="A Star Wars themed merchandise site that jedi and sith alike can buy various apparel and collectibles. Will you follow the light or be consumed by the dark?" %}

Field name							Data type						Example
`title` required							`string`						"About"
`details` required							`string`						"A Star Wars themed merchandise site that jedi and sith alike can buy various apparel and collectibles. Will you follow the light or be consumed by the dark?"

This is the item summary section. It contains all the information about the product being purchased. It should only be used on the checkout page, to the left of the order summary.

{% pattern sections/item-summary image="wo-t-white-1.jpg" product-name="Bantha Fodder Tee - White" price="22.99" quantity="1" size="M" item-num="7429384601" icon="icons.svg#trash-icon" %}

Field name	Data type	Example
`image` required	`image`	wo-t-white-1.jpg
`product-name` required	`string`	"Bantha Fodder Tee - White"
`price` required	`value`	22.99
`quantity` required	`value`	1
`size` required	`string`	"M"
`item-num` required	`string`	"7429384601"
`icon` required	`string`	"icons.svg#trash-icon"

This is the order summary section. It contains all the information about the order being placed. It should only be used on the checkout page, to the right of the item summary.

{% pattern sections/order-summary subtotal="14.99" snh="5.99" tax="2.25" total="23.23" %}

Field name	Data type	Example
`subtotal` required	`value`	14.99
`snh` required	`value`	5.99
`tax` required	`value`	2.25
`total` required	`value`	23.23

This is a recommened products section. It is used at the bottom of products pages to display similar recommened products.

{% pattern sections/recommened-section data=product %}

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

Buttons should be used in situations where a dramrtic, obvious action is required. Try not to overuse buttons becasue they should be the primary call-to-action for a screen.

Default to using the basic button. It should be used in front of light backgounds.

{% pattern buttons/basic title="Add To Cart" url="/products/" %}

Field name							Data type						Example
`title` required							`string`						"Add To Cart"
`url` required							`url`						/products/

Default to using the basic icon button. It should be used in front of light backgounds.

{% pattern buttons/icon-button-basic title="Add To Cart" image="icons.svg#cart-icon" url="/products/" %}

Field name	Data type	Example
`title` required	`string`	"Add To Cart"
`image` required	`image`	icons.svg#cart-icon
`url` required	`url`	/products/

The ghost button is specifically for banners, where it will be placed in front of busy images.

{% pattern buttons/ghost title="Add To Cart" url="/products/" %}

Field name							Data type						Example
`title` required							`string`						"Add To Cart"
`url` required							`url`						/products/

The icon ghost button is specifically for banners, where it will be placed in front of busy images.

{% pattern buttons/icon-button-ghost title="Add To Cart" image="icons.svg#cart-icon" url="/products/" %}

Field name	Data type	Example
`title` required	`string`	"Add To Cart"
`image` required	`image`	icons.svg#cart-icon
`url` required	`url`	/products/

The light button should be used in front of dark backgounds.

{% pattern buttons/light title="Shop New Arrivals" url="/new-arrivals.html" %}

Field name							Data type						Example
`title` required							`string`						"Shop New Arrivals"
`url` required							`url`						/new-arrivals.html

The light icon button should be used in front of dark backgounds.

{% pattern buttons/icon-button-light title="Shop New Arrivals" image="icons.svg#cart-icon" url="/new-arrivals.html" %}

Field name	Data type	Example
`title` required	`string`	"Shop New Arrivals"
`image` required	`image`	icons.svg#cart-icon
`url` required	`url`	/new-arrivals.html

The submit button should only be used in situations where a form is being submitted.

{% pattern buttons/submit title="Submit" %}

Field name							Data type						Example
`title` required							`string`						"Submit"

The animated icon button is to be used as an alternaitve ghost button. Also it should be used in situations involving purchasing i.e. “Add To Cart” or “Buy Now” buttons.

{% pattern buttons/animated-icon title="Buy Now" image="icons.svg#cart-icon" url="/products/" %}

Field name	Data type	Example
`title` required	`string`	"Buy Now"
`image` required	`image`	icons.svg#cart-icon
`url` required	`url`	/products/

The product sections are all the elements found on the product details pages. These elements should only be used on the product details pages. The information contained describes all the deatils about a product and should be used in conjunction with a photo array. The photo array should always placed on the left, while the product details on the right.

This is the photo array section. It is to only be used on the product details pages, and should always be located to the left of the product details section.

{% pattern product-sections/photo-array data=product %}

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

This is the product details section. It is to only be used on the product details pages, and should always be located to the right of a photo array.

{% pattern product-sections/product-details data=product %}

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

Cards should be used for situations where text is to enhanced with images and for all products on pages other than their respective info page.

This is the standard product card. Each card should contain a product image, product title, and price.

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

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

This is a sale product card and is used for item that go on sale. Each card must contain a product image, product title, and original price and sale price.

{% pattern cards/sale-card data=product %}

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

This is a new product card and is used for new items added to the shop. Each card must contain a product image, product title, and original price and sale price.

{% pattern cards/new-card data=product %}

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

This is an icon card. It is used to describe some of the feature such as fast shipping.

{% pattern cards/icon-cards title="Fast Shipping" details="Delivered in less than 12 parsecs" image="icons.svg#cart-icon" %}

Field name	Data type	Example
`title` required	`string`	"Fast Shipping"
`details` required	`string`	"Delivered in less than 12 parsecs"
`image` required	`image`	icons.svg#cart-icon

This is a category card and is used to link to item categories such as men, womens, sale, shirts, etc.

{% pattern cards/category-card data=category %}

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

Pew Pew Pattern Library

Pew Pew Pattern Library

Patterns