Header
Address line 2
The Playpress Element Library is a set of rules and elemental building blocks that we use to build the Playpress website. It doubles as a test bed where we can see in one place the impact of changes we make.
We follow a set of look and feel rules to maintain consistency and create a coherent experience for customers.
We layer the look and feel on to the default styles of the browser.
We use:
1em
) for text size To ensure readable type, we:
We only set the font size on childless nodes to avoid compounding.
We generate our colours on a perceptually uniform scale using the Lab colour space.
We then represent these colours using HSL notation as this is the most human readable format currently available in browsers.
For each theme, we assign our colours to abstractions which we use in our elements.
To be accessible, we follow the standard convention that:
For consistency across dark and light themes, we use lighter colours for elevation.
We use these colours in 5% increments of opaqueness.
We size vertical space around text using the Minor Third scale, relative to the font size. Other space, we size (roughly) in powers of two, e.g. 2, 4, 8, 16 and so on.
We embrace the browser’s default of Flow Layout. We then responsibly enhance with layout modules like Grid, Flex and Multicol.
Elements are the building block of our websites.
Elements have a look, feel and behaviour that people expect, e.g. links are underlined and can be opened in a new tab, unlike buttons.
We use two types of elements:
There are over one hundred elements in HTML.
We section content using the article, aside, footer, heading, header, nav, main, section, address and br elements.
Header
We organise text content into blocks using the dl, ol, ul, li, dt, dd, p, div, hr, figure, figcaption, blockquote, q, cite and pre elements.
Blockquote
- Cite
preformatted
We add semantics to inline text using the a, abbr, b, strong, code, data, dfn, em, i, kbd, mark, s, samp, small, span, sub, sup, time, u, var and wbr elements.
This is a link.
This is underlined .
This text has a strikethrough.
Abbreviation: HTML
This is emphasised.
And this is strong.
This is in italics.
And this is in bold.
The mark element indicates a highlight.
The app said: Eat your veggies.
Small is for legal.
The chemical formula of water: H2O.
This text is superscripted.
A simple equation: x = y + 2.
Type the following in the Run dialog: cmd.
This is code: var i = 0;
.
We add images and multimedia using the audio, img, track and video elements.
We embed other content using the embed, iframe, object, picture and source elements.
By combining the picture and source elements, we can offer:
We add dynamic content using scripting and the canvas, noscript and script elements.
We demarcate edits using the del and ins elements.
This text has been deleted, here is the rest of the paragraph.
Normal text and some inserted text.
We construct tables using the table, caption, col, colgroup, tbody, td, tfoot, th, thead, and tr elements.
Table head 1 | Table head 2 |
---|---|
Table body table data 1 | Table body table data 2 |
Table foot table data 1 | Table foot table data 2 |
We build forms using the form, button, datalist, option, fieldset, input, label, legend, meter, select, optgroup, output, progress, and textarea elements.
We:
We avoid:
When using a button, we:
We add further interactivity using the details, summary and dialog elements.
Details content
There is a standard set of custom elements for interacting with websites that are understood by customers.
We build on top of these standards and conventions.
We avoid using a back link element as this functionality is available in the browser.
We design the main navigation last as it's unlikely to be seen on smaller viewports.
We use this element so that keyboard customers can tab to the main content.
We use this element so that customers can move back through pages and orientate themselves.
We use this element so that customers can move side-ways through pages.
We use this element so that customers can move forward through content.
We also use this element so that customers can move forward through content, but it's promoted in more detail than with the signpost element.
We use this element to call out content to customers.
Content
We use this element to provide input hints to customers.
Hint
We use this element to inform customers of a per-field error.
Hint
Error
We use this element to summarise a collection errors for customers.
There is a problem