Layouts

Quickstart your next web project with these example 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).

Screenshot of Blog example layout

Blog

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

ViewSource

Screenshot of Email example layout

Email

A layout example that shows off a responsive email layout.

ViewSource

Screenshot of Photo Gallery example layout

Photo Gallery

A layout example that shows off a responsive photo gallery.

ViewSource

Screenshot of Landing Page example layout

Landing Page

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

ViewSource

Screenshot of Pricing Table example layout

Pricing Table

A layout example that shows off a responsive pricing table.

ViewSource

Screenshot of Responsive Side Menu example layout

Responsive Side Menu

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

ViewSource

Screenshot of Responsive Horizontal-to-Vertical Menu example layout

Responsive Horizontal-to-Vertical Menu

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

ViewSource

Screenshot of Responsive Horizontal-to-Scrollable Menu example layout

Responsive Horizontal-to-Scrollable Menu

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

ViewSource