Layout

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.

§ Scrolling

Set the overflow property with these utility classes:

.overflow:auto
Show scrollbars if needed
.overflow:scroll
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">
  <p>
      <label for=name>Name</label>
      <input type=text id=name name=name>
  </p>
  <p>
      <label for=adr>Address</label>
      <input type=text id=adr name=adr>
  </p>
</form>

§ Positioning

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