Understanding CSS Template Layout

By Vipul Patel

The CSS3 Template layout module is a draft module which provides a high level view of layouts which is needed for positioning and alignment of widgets in a graphical user interface or the layout grid for a page.

From a presentation layer standpoint, web pages contain the grid definition for the page/window, as well as the styling (fonts, intents, colors).  Templates provides a way to decouple these from each other.

Template, also referred to as “layout grid”, defines slots where elements can be placed and this will enable scenarios which involve complex shapes and enables visual order of the elements to be different that the order of elements defined in the source document.

 

The layout policy, called template-based positioning, gives an element an invisible grid for aligning descendant elements.

 

Scenarios supported by template-based positioning:

  • Web pages, with multiple navigation bars in fixed positions
  • Web pages where alignment of labels and form fields is easier to define with the module instead of using properties of tables and margins
  • Web pages, where UI elements are aligned in complex ways which need to maintain their positioning when window is resized
  • Paged displays where there is limited display room for various kinds of content
  • Complex pages with multiple regions, where styling depends on region also.

 

In the draft specification, mapping is done with the ‘position’ property, which specifies which slot of template an element will go into.

Template is specified on the “display” property.

 

Here is an example of how template-based layout will work.

<style type="text/css">         // Line 1

  dl { display: "ab"            // Line 2

                "cd" }          // Line 3

  #sym1 { position: a }         // Line 4

  #lab1 { position: b }         // Line 5

  #sym2 { position: c }         // Line 6

  #lab2 { position: d }         // Line 7

</style>                        // Line 8

<dl>                            // Line 9

  <dt id=sym1>A                 // Line 10

  <dd id=lab1>A is een aapje    // Line 11

  <dt id=sym2>B                 // Line 12

  <dd id=lab2>B is de bakker    // Line 13

</dl>                           // Line 14

 

In the above example (which is the example quoted in the CSS3 draft specification), we see that there are 4 slots – a, b, c and d.

We see that on lines 2 and 3, we have specified the template to be applied for the “dl” element.

From line 4 through line 7, we see that we have specified the position for the elements.

Per lines 2 and 3, positions “a” and “b” will be on the first line and positions “c” and “d” will be on the second line.

 

 

“display” property

This property can take one of the following values: “inline”, “inline-block”, “inline-table”, “list-item”, “block”, “table”, “table-row-group”, “table-header-group”, “table-footer-group”, “table-row”, “table-column-group”, “table-column”, “table-cell” “table-caption” and “none”.

When the value of “none” is specified, the template is ignored.

 

“::slot” pseudo-element

The various slots of a template elements can be accessed individually using the slot() pseudo-element.

For example,

body { display: "aaa"

                "bcd" }

body::slot(b) { background: #FF0 }

 

In the above example, we are able to define the background for slot “b”.

                      

“chains” property

 

Slots are rectangular in shape. To achieve appearance of  non-rectangular shape, you need to chain the slots together. When chained, content this is positioned in the first slot of a chain is automatically  continued in the second slot if the first slot is full, and so on.

 

To break content between slots in a chain, you can use the “break-before”, “brake-after” and “break-inside” properties.  These properties can take values of “slot”, and “avoid-slot”.

 

Summary

In this article, we learned about the basics of the CSS3 template layout. I hope you have found the information useful.

 

About the author

Vipul Patel is a Program Manager currently working at Amazon Corporation. He has formerly worked at Microsoft in the Lync team and in the .NET team (in the Base Class libraries and the Debugging and Profiling team). He can be reached at vipul.patel@hotmail.com

 

References

http://www.w3.org/TR/css3-layout/

 



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date