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:

• .margin
• .margin-inline
• .margin-inline-start
• .margin-inline-end
• .margin-block
• .margin-block-start
• .margin-block-end
• .padding
• .padding-inline
• .padding-inline-start
• .padding-inline-end
• .padding-block
• .padding-block-start
• .padding-block-end

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:

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

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

<ul class="nested-list">
  <li>Items
    <ul>
      <li>...</li>
    </ul>
  <li>Widgets
    <ul>
      <li>...</li>
    </ul>
</ul>

§ 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.

<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.