Skip to content

Instantly share code, notes, and snippets.

Last active Oct 15, 2020
What would you like to do?
About Page documentation

Building the About Page(s)

Color Variables

Until we have something like postcss-custom-properties to create the fallback hex codes for IE, these will need to be manually updated in the about.css file.

  • --text: Used for the text color.
  • --background: This is the base background for section blocks.
  • --subtle-background: Used for section backgrounds if given the class has-subtle-background-color.
  • --nav-background: The nav banner background
  • --nav-color: The default nav text (active tabs use the accent color).
  • --accent-1, —accent-2, —accent-3: 3 accent colors used for the header, --accent-1 is also used for has-accent-background-color, nav link text.

Helper classes


The about page is a collection of rows of columns. A column can have text or images (or gifs, videos, etc). Each row needs to be its own section, so that the grid placement works in IE. Each row is called a section or block, and should have the class about__section. This block defaults to one column, but can have multiple columns with the classes has-2-columns, has-3-columns, has-4-columns.

Each section should have children with the class column. A .column has padding by default, but that can be removed with is-edge-to-edge. A section can optionally have a heading with is-section-header – this will span across all columns.

To create space between sections, an <hr /> element is used.

Colors & Typography

The .column or .about__section can have background colors by adding classes:

  • has-subtle-background-color: currently this makes the background a darker beige (color --subtle-background).
  • has-accent-background-color: currently this makes the background a bright red (color --accent-1).

The is-feature class can be added to highlight a section, it increases the font size and weight.


The following classes can be used on .column to align the content inside.

  • .alignleft
  • .alignright
  • .aligncenter
  • .is-vertically-aligned-top
  • .is-vertically-aligned-center
  • .is-vertically-aligned-bottom

Point Releases

When it comes to point releases, we'll use the new wrapper classes:

<div class="about__section changelog point-releases">
	<div class="column">
		<h3><?php _e( 'Maintenance and Security Releases' ); ?></h3>
		... p tags with strings as usual ...

<hr />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment