This is a living document describing the names we have given to things. Why they're called what they're called.
In some cases where we have a robust metaphor we are able to take a unique approach to naming, a name of this type would be the only instance of it’s use. An example of this is in the names we have for our Viewports.
Each of our components has a
name. There maybe
variants of a component which is reflected as a suffix to the component name, and any variant may have a set of
options. The options are detailed in the documentation.
Producing names for our custom elements we prefix with
ns- the result of which is the following convention
An example of one of our custom elements is
|💚 Do's||💔 Dont's|
|Place the name as a prefix followed by a modifier using a hyphen to separate the two. ||Place the name as a suffix, it confuses the convention. |
|Adding a third part to describe in more detail different things. ||Name a thing by what it could represent ✏️ |
|Use a descriptive name for the content of the icon. This is clearly a pencil ✏️ |
Using a metaphor of popular sports games and the physical dimensions of the area of play to infer the width of the browser window.
Our headings use standard
We experimented with using the hierarchy of chess pieces:
Our paragraph styles use a standard naming convention.
We experimented with a 'pet' analogy:
Alternative animal 'naming' convention suggestions:
These names we inherited from the original brand concept and don't follow a metaphor.
Our colours are named with common colour names and have a suffix for the intensity.
|💚 Do's||💔 Dont's|
|Call this colour 🔷 blue-light||Call this colour 🔷 sky-blue|
Spacing is directly related to our typography and infers its sizing using modular scale. We have not yet implemented a naming convention for spacing, in our LESS we use our modular scale mixin which currently looks like:
In this example we have a
medium space across three viewports:
Each viewport will automatically adjust the dimensions of each of these sizes.
An example of a collection of names given to space (if we were to need 7!)
Our shadows currently have a strange naming convention
Changing the names of our shadows is open to suggestions.
The names of these are very much incomplete. This technique is inconsistent with our other naming styles.
This is based on
Alongside the concept of 'which corner(s)' are rounded, there are associated corner sizes to consider depending on how much of the percentage of the viewport the lozenge width consumes.
We currently have the following name given to the variants of our cards.
There has been a metaphor of
signposts discussed in the past where a
sign is a set of cards containing information and a
signpost is a set of cards that contain at least one a call to action.
We refer to
structure instead of
Structure is built with CSS Grid and utilises fraction
layout's are contained within a
panel, we can include more than one component or div element in a panel. See ns-panel documentation for more information
Currently we use
Sub-hub to refer to two types of brochure type pages.
These are also referred to across the business as their position in the information architecture:
Level 2 (where
Level 0 and
Level 1 currently use the same Page type)
Oli produced a metaphor of a shop to describe the different page types, it would be worth revisiting this to see if it's suitable.
At this point we're not using a 'templating' approach to constructing pages. We have any number of
panels that are placed together to build a page.
Additional page types will include those that are part of a journey. Some maybe repeatable across many different journeys e.g. 'Confirmation page' there maybe unique page types for specific journeys e.g. 'My Account page'
We use 6 different types of lists
We haven't produced names for our gradients. However, we have included them in our decorations.
Use the convention of the first colour (top) of the gradient as part of the name.
Decorations can be applied to our Panels We have two types of decoration, Mask and Circle
A mask can be applied to the top or the bottom of a panel.
These masks are combined in pairs to produce a shape. The names we have given them have been inherited by one of the masks, and therefore confuse matters.
If we place a 'mask' decoration on the panel at the top or bottom of our page the top or bottom mask will be removed.
A circle can be applied to the left or the right of a panel These are currently named
We could name our releases. Take a look at how Ionic name theirs.
Refer to Apple's MacOS, Andriod and others for examples...