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