About Page documentation

readme.md

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

Layout

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.

Alignment

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

<hr />