1 Bases Bases

1.1 Bases.Links Links

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

Default link style.

Examples
Default styling
This is a link
:visited
visited state
This is a link
Markup 
<a href="#" class="[modifier class]">This is a link</a>
Source: _bases/_link.scss, line 1

1.2 Bases.Lists List

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

Default style for ordered and unordered lists.

Example
  • Item 0
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • An other item but with more text to show you how the list element will look like it a sentence need to go to a new line.

  • Wath if some paragraphs are in the list?

    • Item 0
    • Item 1
    • Item 2
    • Item 3
    • Item 4
    • Item 5
      • Item 0
      • Item 1
      • Item 2
      • Item 3
      • Item 4
      • Item 5
  1. Item 0
  2. Item 1
  3. Item 2
  4. Item 3
  5. Item 4
  6. Item 5
  7. An other item but with more text to show you how the list element will look like it a sentence need to go to a new line.

  8. Wath if some paragraphs are in the list?

    1. Item 0
    2. Item 1
    3. Item 2
    4. Item 3
    5. Item 4
    6. Item 5
      1. Item 0
      2. Item 1
      3. Item 2
      4. Item 3
      5. Item 4
      6. Item 5
Markup 
  <ul>
          <li>Item 0</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
        <li> An other item but with more text to show you how the list element will look like it a sentence need to go to a new line.</li>
    <li>
      <p>Wath if some paragraphs are in the list?</p>
    </li>
    <li>
      <ul>
                  <li>Item 0</li>
                  <li>Item 1</li>
                  <li>Item 2</li>
                  <li>Item 3</li>
                  <li>Item 4</li>
                  <li>Item 5</li>
                  <li>
            <ul>
                              <li>Item 0</li>
                              <li>Item 1</li>
                              <li>Item 2</li>
                              <li>Item 3</li>
                              <li>Item 4</li>
                              <li>Item 5</li>
                          </ul>
          </li>
      </ul>
    </li>
  </ul>
  <ol>
          <li>Item 0</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
        <li> An other item but with more text to show you how the list element will look like it a sentence need to go to a new line.</li>
    <li>
      <p>Wath if some paragraphs are in the list?</p>
    </li>
    <li>
      <ol>
                  <li>Item 0</li>
                  <li>Item 1</li>
                  <li>Item 2</li>
                  <li>Item 3</li>
                  <li>Item 4</li>
                  <li>Item 5</li>
                  <li>
            <ol>
                              <li>Item 0</li>
                              <li>Item 1</li>
                              <li>Item 2</li>
                              <li>Item 3</li>
                              <li>Item 4</li>
                              <li>Item 5</li>
                          </ol>
          </li>
      </ol>
    </li>
  </ol>
Source: _bases/_list.scss, line 1

1.3 Bases.Typography Typography

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

Typographic rules.

Example

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph, body text: in quibus hoc primum est in quo admirer, cur in gravissimis rebus non delectet eos sermo patrius, cum idem fabellas Latinas ad verbum e Graecis expressas non inviti legant. quis enim tam inimicus paene nomini Romano est, qui Ennii Medeam aut Antiopam Pacuvii spernat aut reiciat, quod se isdem Euripidis fabulis delectari dicat, Latinas litteras oderit.

Example of a small text

Example of a abbr

Markup: _bases/_typography.twig 
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Paragraph, body text: in quibus hoc primum est in quo admirer, cur in gravissimis rebus non delectet eos sermo patrius, cum idem fabellas Latinas ad verbum e Graecis expressas non inviti legant. quis enim tam inimicus paene nomini Romano est, qui Ennii Medeam aut Antiopam Pacuvii spernat aut reiciat, quod se isdem Euripidis fabulis delectari dicat, Latinas litteras oderit.</p>
<p>Example of a <small>small text</small></p>
<p>Example of a <abbr title="abbreviation">abbr</abbr></p>
Source: _bases/_typography.scss, line 1