Mechanisms of creating layouts.

§ Centering

An element with class .center centers a single child element using display: grid; place-items: center.

.text-align:center center-aligns text.

§ Text Columns

The .textcolumns class creates multi-column text using the CSS column-width property. The column width can be set with the .colwidth-* classes.

§ Flow gap

The .flow-gap class adds vertical margins between its children.

§ Full-size

Add the .fullbleed class to make an element go outside its container and span the whole width of the viewport.

The .fullscreen class will size an element to fill the screen.

§ Layout utilities

Add some padding with .padding, or a margin with .margin.

Add padding or margin in specific axes with these classes:

Make an element full-width with the .width:100% class. Similarly with .height:100%.

The .big class makes things bigger, with special treatment for some elements:

The following is a big paragraph:

The following is a big button:

To get a smaller font size, use the .<small> masquerade.

The .nested-list class removes extraneous margins in nested lists.

<ul class="nested-list">

§ Scrolling

Set the overflow property with these utility classes:

Show scrollbars if needed
Always show scrollbars

§ Pseudo-tables

The .table class makes an element act like a table for the purposes of layout. The .row class can be used to create a table row, or you can make all descendants of an element into rows with .rows.

A form with aligned labels and inputs.
<form class="table rows">
      <label for=name>Name</label>
      <input type=text id=name name=name>
      <label for=adr>Address</label>
      <input type=text id=adr name=adr>

§ Positioning

Set display: block.
Set display: inline.
Set display: contents.
Set position: fixed.
Set position: sticky.
Set top: 0. Use together with .fixed or .sticky.
Set right: 0. See .top.
Set bottom: 0. See .top.
Set left: 0. See .top.
Set float: left.
Set float: right.