Skip to content

Instantly share code, notes, and snippets.

@ryelle

ryelle/readme.md

Last active Oct 15, 2020
Embed
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

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 />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.