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>
this code will render as:
And ‘voila’, it's simply works. You can go beyond and personalize the counters, see configuration to know 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)
);