Advanced Layout

I’d like to thank César Acebal and the University of Oviedo, Spain. César is a member of the W3C CSS Working Group and the author of the ALMCSS Advanced Layout proof of concept which made this chapter possible.

It’s been ten years since CSS1 was launched, and designers have done more with CSS than early adopters like me ever thought possible. In the right hands, CSS is capable of stunning results. Compared to the earliest layout examples from The Noodle Incident and Blue Robot’s Layout Reservoir, the designs featured every week on CSS gallery sites or in the CSS Zen Garden shows just how far CSS use has come.

CSS layouts have always been a compromise. The current CSS specifications were never designed to create the complex interfaces which the modern web now needs. Floats and positioning never intended as layout tools, and their problems go beyond fragility and positioned elements removed from the normal flow. Both floats and positioning depend on HTML source order, and although designers have worked hard to break the link between the source and visual hierarchy, these solutions always require presentational HTML to allow them to work reliably across web browsers.

A new visual model

When a layout is tied to source order, making changes to it requires changing the HTML. Fully separating content from the presentation will be essential if designers are to be able to move beyond basic column layouts. Advanced Layout is another new module in the CSS3 specification. It’s designed specifically to free designers from past limitations, and I think is one of the most exciting developments in CSS3.

Advanced Layout establishes a new visual model which divides a layout into slots and uses letters to place any element into a slot. Advanced Layout introduces a new display property which defines the number of horizontal fields with strings of letters. This next example creates three rows, each with two slots. Two other values, @ and ., define whether a slot is the default or contains only white space:

display:
"a b"
"c d"
"e f";

• Letter identifies a slot within the grid.
• @ identifies a default slot into which non-situated content can flow.
• . defines a slot which cannot have content added to it.

For greater control over a layout, use the same letter more than once to combine two or more slots into a larger slot:

display:
"a a"
"c c"
"e f";

Using floats to implement this simple layout would require the HTML order of elements to match the visual design. CSS positioning may be more reliable, but can easily break if someone resizes a browser window or changes the default text size. But, Advanced Layout is a robust solution which also keeps HTML meaningful and minimal

Advanced Layout can apply a grid to any element. Two strings split an element across two fields, where the intrinsic height is defined by its content, or by specifying an explicit height:

display:
"a a (intrinsic)"
"c c (intrinsic)"
"e f" (intrinsic);

Any element can be situated into a slot by referencing its identifying letter:

#content { position : a; }
#loaf { position: b; }
#bread { position: c; }
#cinnamon { position: d; }
#hazelnut { position: e; }
#pumpkin { position: f; }

No worries about floats dropping or positioning–clearing, just letters. It doesn’t get any simpler than that. Advanced Layout enables a new set of creative options, never before possible.

Designing with Advanced Layout

Implementing my next design using floats shouldn’t be challenging, but what if I need to change an element’s horizontal or vertical position? This would probably require changes to my HTML. Advanced Layout changes this, and breaks the link between content and visual order.

First, I develop four horizontal fields using four divisions. Their order should make sense to anyone reading my content without styles. To make sure the order is logical, preview the content without styles:

<div id="content">…</div>
<div id="content_main">…</div>
<div id="content_sub">…</div>
<div id="content_supp">…</div>

In each of these divisions, create columns using divisions which themselves contain a heading and an image.

<div id="content_main">
<div id="blue">…</div>
<div id="brick">…</div>
<div id="burrata">…</div>
</div>

To accomplish this design with floats or positioning might be complex, but with Advanced Layout it’s simple. Next, define the display property on the <body> element:

body { display :
“a (intrinsic)”
“b (intrinsic)”
“c (intrinsic)”
“d (intrinsic)”; }

Then, develop a sub-grid by giving each row its own display property to split it into columns:

#content { 
position: a; 
display: "1 2 3 (intrinsic)"; }

#content_main { 
position: b; 
display: "1 2 3 4 (intrinsic)"; }

#content_sub { 
position: b; 
display: "1 2 3 (intrinsic)"; }

#content_supp { 
position: b; 
display: "1 2 3 (intrinsic)"; }

Finally, place those divisions into any slot inside their parent:

#blue { 
position: a; 
display: "1"; }

#brick { 
position: a; 
display: "2"; }

#burrata { 
position: a; 
display: "3"; }

The result is a robust layout which accommodates changes in viewport width and text size without breaking.

Transcendance

You have seen how simple it will be to create a complex grid design with the Advanced Layout Module. The flexibility of placing content into any slot without changing the source order of the content makes the Advanced Layout Module impressive, and it will liberate designers from presentational thinking about markup and CSS.