Style guide — Global scope

Patterns that can be used anywhere on the site.

Here patterns inherit the default properties from the root element. Besides its own styles, patterns here will only be afected by the resets and some basic generic styles like font family and size.

Project component

Each project is .c-project component, and it's made of two main parts: a .c-project__header (which usually contains a link and a logo) and a .c-project__content piece. To provide a grid, a list of projects must be wrapped in a .c-project-list component. This will use floats and enhance the experience with flexbox.

Notice how the content is wrapped in a text scope to reuse the readability properties but base type size changes as it's provided by the parent component.

Post listing

This component (.c-post-list) lists a collection of resources (.c-post) with at least a title (.c-post__title) and a date. A description of the resource (.c-post__desc) is optional. For the date, the time element must be used with a W3C-valid formatted date in the datetime attribute.

The title must use the .u-visuallyhidden utility in a span to give a more complete meaning for screen readers.

Embeds

Usually embeds are given in the form of iframe elements. If the content is a video, it should be wrapped with a div element with the .c-embed class. This will make the iframe responsive, giving it fluid width an a fixed 16:9 aspect ratio. Here’s an example from vimeo:

Inline navigation

This is the kind of navigation that should be used on long pages. It is determined by a .l-nav--inline element that wraps around a unordered list (made of an ul with multiple li elements) of links (a).