Layouts

Setting up the basic structure of a Web interface.

In the Markup Framework, layouts are a separate thing from grids. Layouts define the basic structure of a Web page, while grids are meant to be used to set out content within an existing layout zone. This makes layouts more flexible, since multiple responsive breakpoints are possible, which is tricky to achieve with generic grid structures.

All layouts are responsive, scaling "mobile first" from a simple one-column layout for small screens, to multi-column layouts for larger displays. View the demos and resize your browser window to see for yourself.

One-column layouts

One-column layout #01

A single column layout that scales to a maximum width of just 600px. Only the "main" zone is printed.

Demo | Download

One-column layout #02

A single column layout that scales to a maximum width of 1000px. The "navigation" zone follows the "main" zone in the order of the markup, and appears beneath the "main" zone on small screens. But for screen widths of 700px or more, the "navigation" zone jumps above the main zone, using absolute positioning. Only the "main" zone is printed.

Demo | Download

Two-column layouts

Fluid-fluid layout #01

For screen widths of 800px more, this snaps to a two-column layout. It mimics a three-column grid, the "main" zone spanning two columns and the "nameplate" and "navigation" zones occupying the third column. The layout scales to a maximum width of 1200px. Only the "main" zone is printed.

Demo | Download

Fluid-fluid layout #02

A similar layout to fluid-fluid #01, except the "nameplate" and "navigation" zones are floated to the left of the "main" zone.

Demo | Download

Fluid-fluid layout #03

This layout has just a single breakpoint, with the "aside" zone floated to the right of the "main" zone on screens wider than 799px. The layout is based on a five-column fluid grid, with column widths of 15% and a 6.25% gutter between columns. The "main" zone spans three columns, the "aside" zone two. The layout scales to a maximum width of 1200px. Only the "main" zone is printed.

Demo | Download

Fluid-fixed layout #01

This layout features a fluid "main" zone and a fixed-width "aside" zone on screens 800px or more wide. The layout scales to a maximum width of 1200px. Only the "main" and "aside" zones are printed.

Demo | Download

Fluid-fixed layout #02

This layout features a fluid "main" zone and a fixed-width "aside" zone on screens 800px or more wide. There is a second breakpoint at 1000px where the "nameplate" and "navigation" zones are floated adjacent to one another in a 25% / 75% fluid-column structure. The layout scales to a maximum width of 1200px. Only the "main" and "aside" zones are printed.

Demo | Download

Fixed-fluid layout #01

This is a similar layout to fluid-fixed #01 except the fixed-width "aside" zone is floated to the left of the "main" zone instead of the right. Despite this, the "aside" zone remains below the "main" zone in the order of the HTML markup.

Demo | Download

Fixed-fluid layout #02

This is an identical layout to fixed-fluid #01 except the "nameplate" and "navigation" zone are also arranged horizontally on screens 800px or more wide.

Demo | Download

Fixed-fluid layout #03

In this two-column layout, the "intro" zone is floated to the left of the "main" zone and given a fixed width when the screen size exceeds 799px. The layout scales to a maximum width of 1200px. Only the "intro" and "main" zones are printed.

Demo | Download

Three-column layouts

Fluid-fluid-fluid layout

For wide screens, the "intro", "main" and "aside" zones are arranged horizontally in three fluid-width columns. There are two breakpoints: 800px and 1200px. The layout scales to a maximum width of 1600px. Only the "intro" and "main" zones are printed.

Demo | Download

Fluid-fixed-fixed layout

This full-width layout features a fluid "main" zone on the left and two fixed-width "aside" zones to the right, on screens 1000px or more wide. Only the "main" zone is printed.

Demo | Download

Fluid-fluid-fixed layout

This full-width layout features a fluid "main" zone on the left, a fluid (20%) "aside" zone in the center, and a second fixed-width (200px) "aside" zone on the right. The responsive breakpoint is 1000px. Only the "main" zone is printed.

Demo | Download

Fluid-fixed-fluid layout

This full-width layout features a fluid "main" zone, a fixed-width (200px) "aside" zone in the center, and a second fluid-width (20%) "aside" zone on the far right. The responsive breakpoint is 1000px. Only the "main" zone is printed.

Demo | Download

Fixed-fluid-fixed layout

Another full-width layout with a single responsive breakpoint of 1000px, at which point the "main" zone becomes a fluid central column, the "intro" zone becomes a fixed-width column floated to the left, and the "aside" zone becomes a fixed-width column floated to the right. Only the "main" zone is printed.

Demo | Download

Miscellaneous layouts

Centered box

A small box, with fixed dimensions, is positioned in the dead centre of the screen. Useful for sign in screens and holding page messages.

Demo | Download

Framed preview

An iframe occupies the full screen, except for a narrow banner that sits across the top of the page.

Demo | Download