Web Pattern Library

Github Repo

Menu


Global styles

Global components


Template Structure


Bag, Wishlist, & Checkout

Home / Login

Marketing Modules

Product Listing & Detail

Size & Fit Guides

Personalization

My Account / History

Static pages


JavaScript Helpers

Web Pattern Library:

Column Layouts

As needed, simple 2,3,4 column grids are reused throughout layouts. Each configuration is a unique combination of content sections and the specific breakpoints that control their relative position (for example, from a stacked layout to inline).

Markup & Classes

Markup consists of a grouping element around 2 or more sections. We've used div elements in this example, but a configuration can use any valid nested html:

<div class="group group-2a">
  <div class="group-section-a">...</div>
  <div class="group-section-b">...</div>
</div>

Classes follow a standard naming convention:

Configurations

Note: for demo purposes sections on this page have fixed heights and background colors.

group-2a

80:20 with a 2% margin between sections at all breakpoints.

Section a. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Section b.

group-2b

Group 2b: 70:30 in source order with a 5% margin between sections

Section a. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Section b.

with 2% Margin

Section a. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Section b.

group-2c

Stacked, then @ 21.25em (340px) 50:50 in source order.

Section a. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Section b.

with 2% Margin

Section a. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Section b.

group-3a

Stacked, then @ 37.5em (600px) 33:33:33 in source order.

Section a. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Section b.
Section c.

group-3b

20:50:30 with equal heights at all breakpoints.

Section a. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Section b.
Section c.

group-3b-m

Stacked, then @ 20em (320px) 20:50:30 with a 1% margin.

Section a. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Section b.
Section c.