Base

Here we provide very basic styling that most UI's will need. These styles are applied at the most global level being applied via element selectors, except for {Headings} which are scoped to classes (see that section for the info).

Everything in Base needs to be easily overridden which is really easy to do as everything in Base sits right at the bottom in terms of specificity.

Root element (<html>)

  • Apply global typography styles.
  • Apply OS X font smoothing: optional styles for fonts on OS X to make them look more consistent with other systems that do not render text using sub-pixel anti-aliasing.
  • Apply a background colour.
What's configurable
  • background
  • color
  • line-height
  • font-family
  • font-size
  • font-weight
  • OS X font smoothing—optional

Example

A link 
<a href="#">A link</a>
View source code

Horizontal rule

  • Apply styles for a better looking and cross-browser consistent horizontal rule.
  • The rule is rendered with a border.
What's configurable
  • border-top-color
  • border-top-style
  • border-top-width

Example

Turpis urna, est parturient, mattis auctor scelerisque lundium? Facilisis ultrices! Mauris, vel urna cum. Adipiscing.

Nunc dis dis phasellus, porttitor elementum, augue tristique purus diam et tincidunt odio enim nunc rhoncus.

<p>Turpis urna, est parturient, mattis auctor scelerisque lundium? Facilisis ultrices! Mauris, vel urna cum. Adipiscing.</p>
<hr>
<p>Nunc dis dis phasellus, porttitor elementum, augue tristique purus diam et tincidunt odio enim nunc rhoncus.</p>
View source code

Images

  • Make images responsive, i.e., keep images from scaling beyond the width of their parent container.
  • Provide a way to turn the default responsive styles off for any images within embeddable third-party widgets—particularly Google Maps—as their images cannot be responsive. For Google Maps, Shell uses two of the possible map container selectors from Google, and for other third-party widgets Shell provides a generic container selector.

No configurable options

Example

<!-- Responsive image constrained in a container -->
<div class="l-container">
    <img src="https://unsplash.it/900/400/?random" alt="">
</div>

<!-- Remove responsive image styles for third-party widgets -->
<div class="remove-responsive-images">
    <img src="https://unsplash.it/900/400/?random" alt="">
</div>

<div class="map_canvas">
    <img src="https://unsplash.it/900/400/?random" alt="">
</div>

<div id="map_canvas">
    <img src="https://unsplash.it/900/400/?random" alt="">
</div>
View source code