Layouts

Common Layouts

Pure was crafted with the goal that it can be used in every web project. To showcase this, we've made some common layouts that leverage Pure. These layouts are responsive and don't require JavaScript (except for certain menu interactions).

Blog

A layout example that shows off a blog page with a list of posts.

• base
• grids
• buttons
• menus

ViewSource

Email

A layout example that shows off a responsive email layout.

• base
• grids
• buttons
• menus

ViewSource

Photo Gallery

A layout example that shows off a responsive photo gallery.

• base
• grids
• forms
• buttons
• menus

ViewSource

Landing Page

A layout example that shows off a responsive product landing page.

• base
• grids
• forms
• buttons
• menus

ViewSource

Pricing Table

A layout example that shows off a responsive pricing table.

• base
• grids
• buttons
• menus

ViewSource

Responsive Side Menu

A layout example with a side menu that hides on mobile, just like the Pure website.

• base
• grids
• menus

ViewSource

Responsive Horizontal-to-Vertical Menu

A set of horizontal menus that switch to vertical and which hide at small window widths.

• base
• grids
• menus

ViewSource

Responsive Horizontal-to-Scrollable Menu

Showcases a horizontal menu that hides at small window widths, and which scrolls when revealed.

• base
• menus

ViewSource