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
backgroundcolorline-heightfont-familyfont-sizefont-weight- OS X font smoothing—optional
Links
- Apply a link text colour for the default and hover/focus states.
- Apply a text underline either for the default state or for the hover/focus states, and depending on what state the underline is applied to remove or apply it on hover/focus.
- Apply an optional transition for the link text colour when the hover/focus states are applied.
What's configurable
colorboth default and hover/focus statestext-underlineboth default and hover/focus statestransition-durationoptionaltransition-timing-functionoptional
Example
<a href="#">A link</a>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-colorborder-top-styleborder-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>Images
Make images responsive, i.e., keep images from scaling beyond the width of their parent container.
No configurable options
Example
<!-- Responsive image constrained in a container -->
<div class="l-container">
<img src="img/test-img-shell.png" alt="">
</div>