C Tidd

CSS UI patterns
Text content

Structured headings and text

Structured text is content that we as control directly as developers: we write the exact markup that will be rendered, and we have the ability to exercise precise control over its semantics. Alternatively, we break down an object representing some data and render it into a well-defined template. In any case, this structured content can be displayed in various sizes and can be included in any content slot within a container or in some cases within other UI patterns.

Structured content is an exercise in balance. This content will touch every aspect of a UI, and making it too broad in the scope of its concerns will cause it to become a burden as a product grows. However, ignoring it as a standalone UI pattern means introducing inconsistency as we individually style business concerns. Fortunately, extracting this content as a pattern makes it discrete and directly manipulatable by us, which affords it flexibility.

Levels or sizes of text should be specified with classes applied to arbitrary HTML elements. No h1 or h2 selectors should apply text styles; instead, we can use the appropriate semantic heading level, paragraph, or other element, combined with whatever visual size and style of type we need, all orchestrated as structured text.

To allow flexibility in terms of layout, allowing us to use combinations of structured content in a variety of circumstances, neither these text classes nor the HTML text elements should have intrinsic margins or padding. Instead, we can streamline the scope of our text styles such that they only influence font-family, font-size, line-height, and possibly color. Assorted text modifiers should be provided to adjust font-style, font-weight, and color.

With these text styles, and as a general principle, aim to preemptively provide a reset back to the baseline. As an example, we may need standard text as a tagline within a large heading.

.text--large {
  font-size: 2.4rem;
  line-height: 1.2;
}
 
.text--medium {
  font-size: 2.4rem;
  line-height: 1.2;
}
 
.text--standard {
  font-size: 1.6rem;
  line-height: 1.5;
}
 
.text--small {
  font-size: 1.4rem;
  line-height: 1.5;
}
 
.text--italic {
  font-style: italic;
}
 
.text--roman {
  font-style: normal;
}
 
.text--bold {
  font-weight: 700;
}
 
.text--normal {
  font-weight: 400;
}
<h2 class="text text--large text--bold ">
  A Title
  <div class="text text--standard text--roman">
    With a smaller tagline
  </div>
</h2>

Structured text lists

The conventional ol or ul elements are typical ways to list content: a series of list items are presented vertically with each occupying its own row. We generally think of these elements as having decorations for their items: bullets for ul and numbers for ol.

These elements should have a global CSS reset applied to remove bullets and numbers, freeing them for use in listing patterns without side effects. The conventional text list styles can be reapplied through structured classes.

.list--unordered {
  list-style: disc;
}
 
.list--ordered {
  list-style: decimal;
}
<ul class="list list--unordered">
  <li>...</li>
  <li>...</li>
</ul>
 
<ol class="list list--ordered">
  <li>...</li>
  <li>...</li>
</ol>

Unstructured, user-entered content

Not all content is structured, nor should it be. Within a well-defined content region consisting solely of unstructured, user-entered content such as an article, blog post, or comment, element-based styles and margins can be applied to text elements.

You might consider having full-sized and small variations of user content styles to make them suitable for full-sized articles and brief comments. In the case of a small variation, a reduced set of heading sizes might be made available, enforced through the commenting system and automatically adjusted to the appropriate semantic levels to suit the website or application’s hierarchy.

.cms h1 {
  font-size: 2.4rem;
  line-height: 1.2;
}
 
.cms h2 {
  font-size: 2.1rem;
  line-height: 1.3;
}
 
.cms p,
.cms ul,
.cms ol {
  font-size: 1.6rem;
  line-height: 1.5;
}
 
.cms ul {
  margin-left: 3rem;
  list-style: disc;
}
 
.cms ol {
  margin-left: 3rem;
  list-style: decimal;
}
 
.cms :first-child {
  margin-top: 0;
}
 
.cms :last-child {
  margin-bottom: 0;
}
<h2 class="text text--large">{article.title}</h2>
<div class="space space--large"></div>
<div class="cms">
  {article.body}
</div>