A.(c)a)D.(e)m.(i)C.(a) - CSS custom counters with SASS magic

How to use it right out the box

Add academica.css stylesheet to your head

<link rel="stylesheet" href="css/academica.css">

Add the class academica to your ol

<ol class="academica">
  <li>Titre 1
    <ol class="academica">
      <li>Subtitle a</li>
      <li>Subtitle b</li>
    </ol>
  </li>
  <li>Titre 2</li>
  <li>...</li>
</ol>

the code above will render as:

And ‘voila’, it's simply works.
You can go beyond and personalize the counters, see configuration to know more.
Or Inspect the demo page to figure out more.

Configuration

Variables

You can override the default css variables before importing the variables

//The class used on the first ol. ('.academica' is the default value)
$class: '.my-awesome-list';

//Separator for simple list. ("." is the default value)
$main-separator: ".";

//Do you want counter on your headings (Hn)? (true is the default value)
$headings-counter: true;

//Indentation for headings. (10px is the default value)
$headings-indent: 1.5em;

//Do you want counter on your organized lists (OLs). (true is the default value)
$list-counter: true;

@import 'academica.variables';

Simple theming

For simple counters just use as many css's list-style-type as needed.

$counters: upper-roman, upper-alpha, decimal, lower-alpha, decimal, lower-alpha, lower-roman;

Available list-style-type:

Separator for simple list

$main-separator: ")";

Advanced theming

Unleash the power of academica with themes: Import the default harvard theme or create yours.

@import 'academica.harvard.theme';

for more configuration use this type of configuration

 $counters: (
   (pre-counter: "",  counter-style: 'upper-roman', separator: "."), //  I.
   (pre-counter: "",  counter-style: 'upper-alpha', separator: "."), //  A.
   (pre-counter: "",  counter-style: 'decimal',     separator: "."), //  1.
   (pre-counter: "",  counter-style: 'lower-alpha', separator: "."), //  a.
   (pre-counter: "",  counter-style: 'decimal',     separator: ")"), //  1)
   (pre-counter: "(", counter-style: 'lower-alpha', separator: ")"), // (a)
   (pre-counter: "(", counter-style: 'lower-roman', separator: ")")  // (i)
 );