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.
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';
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: ")";
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)
);