CSS: styling atoms

Atoms need to look like they are part of the page where they are embedded, and yet they may also look similar (if not 100% similar) across different platforms. How do we deal with that, when each platform comes with its own set of visual features? With CSS, of course. In three ways:

First off, due to the cascading nature of CSS, when an atom is embedded in an article, it will automatically inherit all the styles defined by the platform: whether it's the site, the iOS or Android app. This already gets us very far in the "looks at home" direction.

Then there's the set of styles that are common across platforms and make the atom instantly recognisable. These styles are provided by the library: it is the responsibility of the host platform to read those styles and process them in a sound manner according to the platform's own technical infrastructure. For example, in frontend, the styles are loaded dynamically after the initial load if and only if the page contains at least one corresponding atom, rather than embedded statically on the server-side: this to reduce the size of the initial CSS.

Finally there's the question of reusing local styles via another means that using the cascade. This is where CSS variables come in. A good example are colours: the colour palette varies a lot across platforms and yet there is some level of consistency that can be provided using some kind of naming scheme. Pillars are some such. We don't want the library to hold on what a particular colour is, because with time a colour is bound to change and when that happens things will go out of sync. No, we want the platform to provide the value for a colour that makes sense when the atom is displayed rather than when its rendering was designed. To achieve that, all we need is to agree on a naming scheme and vocabulary. A trivial example would be to defined a colour for highlighting content and use it for some piece of text in an atom:

.atom__highlight {
  color: var(--c-highlight);
}

From our perspective, it doesn't matter at all what that colour will be; this is the responsibility for the platform which could provide either a value as specific as it wants it to be! It could be a global colour common across all pages, one for a particular pillar, one for a particular article: we don't care!

:root {
  --c-highlight: red;
}

.pillar-news {
  --c-highlight: blue;
}

.pillar-opinion {
  --c-highlight: orange;
}

So far, we have agreed on a dozen variables for typography and colours. They are:

• --f-serif-text, the main text typeface
• --f-serif-headline, the serif headline face
• --f-sans-serif-text, the text sans-serif typeface
• --c-pillar-news, the main News pillar colour
• --c-pillar-arts, the main Arts/Culture pillar colour
• --c-pillar-opinion, the main Opinion pillar colour
• --c-pillar-lifestyle, the main Life&Style pillar colour
• --c-pillar-sport, the main Sport pillar colour

More will be added in the future.