juice. · Pattern Library

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.

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

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.

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

Sections are made to hold information together.

All text here is meant to be displayed on the homepage, below the “shop now” call-to-action.

The “thank you” text is to be used as a confirmation of a purchase made. The “account confirmation” text is to be used after the account info form has been successfully filled out.

Navigation is to help direct you from one piece of information to another.

juice. Pattern Library

juice. Pattern Library

Patterns