The CSS3 Template layout module is a draft module that provides a high-level view of layouts, which is needed for positioning and alignment of widgets in a graphical user interface (GUI) 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 provide a way to decouple these from each other.
Templates, also referred to as “layout grids”, define slots where elements can be placed. This will enable scenarios which involve complex shapes and enables visual order of the elements to be different than the order of elements defined in the source document.
Read: HTML, CSS, and JavaScript Tools and Libraries
The layout policy, called template-based positioning, gives an element an invisible grid for aligning descendant elements.
Scenarios supported by template-based positioning include:
- 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 a 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 layouts will work in CSS and HTML:
<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.
Read: Color Manipulation with JavaScript
Working with the CSS “display” Property
The “display” 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.
The “::slot” pseudo-element in HTML
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”.
The HTML “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 CSS, HTML, and web development tutorial, we learned about the basics of the CSS3 template layout. I hope you have found the information useful.
Read more cascading style sheets (CSS) web development tutorials.
