Evo

List Number

Highly customized ordered lists of numbers. Text Lists are more dependent upon HTML and CSS resets than other elements, particularly to control indents. Pseudo classes for space :before and :after are available in space-padding and space-margin.

evo-list-number

  1. List item level 1
  2. List item level 1 lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi suscipit autem accusantium quibusdam reiciendis incidunt sed, amet perspiciatis, sequi cum aperiam sunt excepturi corporis.
    1. List item level 2
    2. List item level 2 lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores consectetur, dolore laboriosam, porro cumque optio? Aliquid aperiam expedita, magni, cum ex, quaerat veritatis pariatur quibusdam nostrum omnis, suscipit itaque beatae.
    1. List item level 2
    2. List item level 2
      1. List item level 3
      2. List item level 3
  3. List item level 1
  4. List item level 1
 <ol class="evo-list-number">
  <li>List item level 1</li>
  <li>List item level 1 lorem ipsum dolor sit amet, consectetur adipisicing elit. 
  Nisi suscipit autem accusantium quibusdam reiciendis incidunt sed, amet perspiciatis, 
  sequi cum aperiam sunt excepturi corporis.</li>
    <ol>
      <li>List item level 2</li>
      <li>List item level 2 lorem ipsum dolor sit amet, consectetur adipisicing elit.
      Asperiores consectetur, dolore laboriosam, porro cumque optio? Aliquid aperiam expedita, 
      magni, cum ex, quaerat veritatis pariatur quibusdam nostrum omnis, suscipit itaque beatae.</li>
    </ol>
    <ol>
       <li>List item level 2</li>
       <li>List item level 2</li>
         <ol>
          <li>List item level 3</li>
          <li>List item level 3</li>
        </ol>
    </ol>
  <li>List item level 1</li>
  <li>List item level 1</li>
  </ol>

These are nested ordered <ol> lists. Create <ul> tags that contain <li> tags.

  1. List item level 1
  2. List item level 2
  3. List item level 3
 <ol class="evo-list-number-inverse">
  <li class="text-inverse">List item level 1</li>
  <li class="text-inverse">List item level 2</li>
  <li class="text-inverse">List item level 3</li>
  </ol>

For inverse style, apply the evo-list-number-inverse class to the <ol> tag. List variables can be adjusted in _evo_variables.scss

list-number

  1. List item level 1
  2. List item level 1 lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi suscipit autem accusantium quibusdam reiciendis incidunt sed, amet perspiciatis, sequi cum aperiam sunt excepturi corporis.
    1. List item level 2
    2. List item level 2 lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores consectetur, dolore laboriosam, porro cumque optio? Aliquid aperiam expedita, magni, cum ex, quaerat veritatis pariatur quibusdam nostrum omnis, suscipit itaque beatae.
    1. List item level 2
    2. List item level 2
      1. List item level 3
      2. List item level 3
  3. List item level 1
  4. List item level 1
<ol class="list-number>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ol>

This is an <ol> list with a customized number style. It is constructed in a simpler manner than the evo-list-number class above, and therefore may be easier to mix and modify with other classes. Number colors and fonts can be customized. Create an <ol> tag that contains <li> tags, and apply the list-number class. Change the number's font-family by mixing a class such as number-serif to the <ul> tag. Use the number-gray class make the numbers look more neutral. The number-circle class will create a circle shape behind the number. List variables can be adjusted in _evo_variables.scss

number-[type]

  1. List item 1
  2. List item 2
  3. List item 3

number-sans-serif

  1. List item 1
  2. List item 2
  3. List item 3

number-serif

  1. List item 1
  2. List item 2
  3. List item 3

number-monotype

  1. List item 1
  2. List item 2
  3. List item 3

number-cursive

  1. List item 1
  2. List item 2
  3. List item 3

number-fantasy

 <ol class="list-number number-fantasy">
  <li>List item level 1</li>
  <li>List item level 2</li>
  <li>List item level 3</li>
  </ol>

Set a generic type of font-family for the numbers, such as font-fantasy. These syncronize with the generic font-families defined in _evo_variables.scss

number-decimal

  1. List item 1
  2. List item 2
  3. List item 3

number-decimal

 <ol class="list-number number-decimal">
  <li>List item level 1</li>
  <li>List item level 2</li>
  <li>List item level 3</li>
  </ol>

Set list numbers to be the "number-decimal" style.

number-decimal-zero

  1. List item 1
  2. List item 2
  3. List item 3

number-decimal-zero

 <ol class="list-number number-decimal-zero">
  <li>List item level 1</li>
  <li>List item level 2</li>
  <li>List item level 3</li>
  </ol>

Set list numbers to be the "number-decimal-zero" style.

number-[color]

  1. List item 1
  2. List item 2
  3. List item 3

number-color which is the default evo-color.

  1. List item 1
  2. List item 2
  3. List item 3

number-black

  1. List item 1
  2. List item 2
  3. List item 3

number-gray-dark

  1. List item 1
  2. List item 2
  3. List item 3

number-gray

  1. List item 1
  2. List item 2
  3. List item 3

number-gray-light

  1. List item 1
  2. List item 2
  3. List item 3

number-white

<ol class="list-number number-white">
<li class="text-inverse">list item 1</li>
<li class="text-inverse">list item 2</li>
<li class="text-inverse">list item 3</li>
</ol>

White numbers demonstrated on inverse background.

number-[shape]

  1. List item 1
  2. List item 2
  3. List item 3

number-square which is the default shape.

  1. List item 1
  2. List item 2
  3. List item 3

number-rounded

  1. List item 1
  2. List item 2
  3. List item 3

number-circle

<ol class="evo-list-number number-white number-circle number-color-bg">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ol>

Change the shape of the space behind numbers, such as with the number-circle class. The number-rounded class can be adjusted from _evo_variables.scss

number-[color]-bg

  1. List item 1
  2. List item 2
  3. List item 3

number-color-bg which is the default evo-color.

  1. List item 1
  2. List item 2
  3. List item 3

number-black-bg

  1. List item 1
  2. List item 2
  3. List item 3

number-gray-dark-bg

  1. List item 1
  2. List item 2
  3. List item 3

number-gray-bg

  1. List item 1
  2. List item 2
  3. List item 3

number-gray-light-bg

<ol class="evo-list-number number-white number-square number-gray-light-bg">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ol>

Modify the background colors behind the numbers by following the above example.

  1. List item 1
  2. List item 2
  3. List item 3

number-white-bg

<ol class="evo-list-number-inverse number-square number-white-bg">
<li class="text-inverse">list item 1</li>
<li class="text-inverse">list item 2</li>
<li class="text-inverse">list item 3</li>
</ol>

White numbers demonstrated on inverse background and utilizing the evo-list-number-inverse class.

  1. List item 1
  2. List item 2
  3. List item 3

number-transparent-bg will help establish proper spacing.

<ol class="evo-list-number number-square number-transparent-bg">
<li class="text-inverse">list item 1</li>
<li class="text-inverse">list item 2</li>
<li class="text-inverse">list item 3</li>
</ol>

The transparent color works best if a shape is applied first, such as the number-square class.

number-nudge-[direction] experimental

  1. List item 1 default
  2. List item 2
  3. List item 3

evo-list-number number-serif text-size-6

  1. List item 1 with nudge
  2. List item 2
  3. List item 3

evo-list-number number-serif text-size-6 number-nudge-down

Apply these directional classes to help calibrate the alignment of your number classes. It is nearly impossible to predict the actual baseline alignments when mixing different fonts. Although you can adjust the position of the numbers in CSS, they can still shift to mis-alignment when changing the text size in the list, as demonstrated above. Try one of these number 'nudge' utility classes to align the baselines.

number-nudge-up-more number-nudge-up number-nudge-middle number-nudge-down number-nudge-down-more

mix examples

  1. List item 1
  2. List item 2
  3. List item 3
<ol class="evo-list-number number-white number-circle number-gray-bg number-serif text-size-6">
<li class="text-inverse">list item 1</li>
<li class="text-inverse">list item 2</li>
<li class="text-inverse">list item 3</li>
</ol>