Styleguide - The A11Y Project

3 #Base Base

Sets the initial, document-level cascade.

Source: src/css/screen.scss, line 104

3.1 #Base.all all

Styles applied to every element.

Source: src/css/base/_all.scss, line 1

3.2 #Base.body body

Styles applied to the body element. Largely used to set what the site's em value is, as well as ensuring the site background behaves properly.

Source: src/css/base/_body.scss, line 1

3.3 #Base.Code Code

Styles applied to the code, kbd, pre, samp, and var elements. Used to set up consistent typography and prevent word breaks that would affect code compilation.

Source: src/css/base/_code.scss, line 1

3.3.1 #Base.Code.code code

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Initial styles applied to the code element without a class applied to it.

Example
npm start
Markup 
<code>npm start</code>
Source: src/css/base/_code.scss, line 27

3.3.2 #Base.Code.kbd kbd

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Initial styles applied to the kbd element without a class applied to it. The kbd element is helpful for describing things like keyboard shortcuts.

Example
Command + s
Markup 
<kbd>Command</kbd> + <kbd>s</kbd>
Source: src/css/base/_code.scss, line 37

3.3.3 #Base.Code.pre pre

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Initial styles applied to the pre element without a class applied to it.

Example 
FREEZE FRAME on Sue, with a confused expression on their face.
Markup 
<pre>FREEZE FRAME on Sue, with a confused expression on their face.</pre>
Source: src/css/base/_code.scss, line 57

3.3.4 #Base.Code.samp samp

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Initial styles applied to the samp element without a class applied to it. samp is used to describe sample output from a program.

Example
$ echo woof woof
Markup 
<code>
  $ echo woof
  <samp>woof</samp>
</code>
Source: src/css/base/_code.scss, line 72

3.3.5 #Base.Code.var var

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Initial styles applied to the var element without a class applied to it.

Example
$font-family-code
Markup 
<var>$font-family-code</var>
Source: src/css/base/_code.scss, line 89

3.4 #Base.Global Attributes Global Attributes

These attributes can be applied to any HTML element to control its behavior.

Source: src/css/base/_global-attributes.scss, line 1

3.4.1 #Base.Global Attributes.disabled Disabled

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Used for interactive element whose functionality has been conditionally turned off.

Example
Markup 
<button disabled>Send</button>
Source: src/css/base/_global-attributes.scss, line 8

3.4.2 #Base.Global Attributes.hidden Hidden

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Used for any element who should be completely removed from the document. See mixins.hide.

Example
Markup 
<div hidden>You shouldn't be able to see me!</div>
Source: src/css/base/_global-attributes.scss, line 24

3.4.3 #Base.Global Attributes.tabindex tabindex="-1"

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Used for any element that should programatically recieve keyboard focus.

Example

An element that can be tabbed to

Markup 
<h2 tabindex="-1">An element that can be tabbed to</h2>
Source: src/css/base/_global-attributes.scss, line 38

3.5 #Base.html html

Styles applied to the HTML element. Largely used to set initial cascade for site typography.

Source: src/css/base/_html.scss, line 1

3.6 #Base.Icons Icons

Controls site iconography. It is important to ensure that your icons purpose is clear and is properly announced by assistive technology. Make sure that icon imagery is universal, and can be understood regardless of location or level of technological literacy.

Source: src/css/base/_icons.scss, line 1

3.6.1 #Base.Icons.icon- icon-

Applies formatting to any class that contains icon-.

Source: src/css/base/_icons.scss, line 25

3.6.2 #Base.Icons.icon-sprite icon-sprite

Ensures icon sprites don't affect layout.

Source: src/css/base/_icons.scss, line 11

3.7 #Base.link links

Initial styles applied to anchor elements without a class applied to them. Link colors should be distinct for each state, and have a good color contrast ratio.

Source: src/css/base/_links.scss, line 1

3.8 #Base.Lists Lists

Lists are organized collections of related information.

Source: src/css/base/_lists.scss, line 1

3.8.1 #Base.Lists.definition dl { definition list

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Initial styles applied to definition lists without a class applied to them.

Example
Robust
Capable of performing without failure under a wide range of conditions.
Markup 
<dl>
  <dt>Robust</dt>
  <dd>Capable of performing without failure under a wide range of conditions.</dd>
</dl>
Source: src/css/base/_lists.scss, line 17

3.8.2 #Base.Lists.ordered ol { ordered list

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Initial styles applied to ordered lists without a class applied to them.

Example
  1. Salt
  2. Fat
  3. Acid
  4. Heat
Markup 
<ol>
  <li>Salt</li>
  <li>Fat</li>
  <li>Acid</li>
  <li>Heat</li>
</ol>
Source: src/css/base/_lists.scss, line 38

3.8.3 #Base.Lists.unordered ul { unordered list

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Initial styles applied to unordered lists without a class applied to them.

Example
  • Apples
  • Peaches
  • Pears
Markup 
<ul>
  <li>Apples</li>
  <li>Peaches</li>
  <li>Pears</li>
</ul>
Source: src/css/base/_lists.scss, line 58

3.9 #Base.paragraphs p { } paragraphs

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Initial styles applied to paragraph elements without a class applied to them.

Example

Jelly-like above the high wire, six quaking pachyderms kept the climax of the extravaganza in a dazzling state of flux.

Markup 
<p>Jelly-like above the high wire, six quaking pachyderms kept the climax of the extravaganza in a dazzling state of flux.</p>
Source: src/css/base/_paragraphs.scss, line 1

3.10 #Base.resets resets

Opinionated overrides of browser fallbacks.

Source: src/css/base/_resets.scss, line 1

3.11 #Base.table table

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Styles applied to the table element. Largely used to ensure sensible cell text alignment.

Example
Academy Awards for Best Picture
Film Year Production Company(s) Producer(s)
Ordinary People 1980 Paramount Ronald L. Schwary
Chariots of Fire 1981 Enigma Film Productions David Puttnam
Gandhi 1982 Columbia Richard Attenborough
Terms of Endearment 1983 Paramount James L. Brooks
Markup 
<table>
  <caption>Academy Awards for Best Picture</caption>
  <colgroup>
    <col>
    <col>
    <col span="2">
  </colgroup>
  <thead>
    <tr>
      <th scope="col">Film</th>
      <th scope="col">Year</th>
      <th scope="col">Production Company(s)</th>
      <th scope="col">Producer(s)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Ordinary People</th>
      <td>1980</td>
      <td>Paramount</td>
      <td>Ronald L. Schwary</td>
    </tr>
    <tr>
      <th scope="row">Chariots of Fire</th>
      <td>1981</td>
      <td>Enigma Film Productions</td>
      <td>David Puttnam</td>
    </tr>
    <tr>
      <th scope="row">Gandhi</th>
      <td>1982</td>
      <td>Columbia</td>
      <td>Richard Attenborough</td>
    </tr>
    <tr>
      <th scope="row">Terms of Endearment</th>
      <td>1983</td>
      <td>Paramount</td>
      <td>James L. Brooks</td>
    </tr>
  </tbody>
</table>
Source: src/css/base/_tables.scss, line 1