aleut.objects.list-inline
v1.0.1
Published
A simple object to remove bullets and indents from lists (based on Harry Roberts inuitcss framework)
Downloads
9
Readme
List-inline
The List-inline object simply displays a list as one horizontal row.
Install using npm:
$ npm install --save-dev aleut.objects.list-inline
Usage
Basic usage of the List-inline object uses the required classes:
<ul class="o-list-inline">
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
</ul>
The only valid children of the .o-list-inline
node are li
s.
Options
Other, optional classes can supplement the required base classes:
.o-list-inline--delimited
: add a character to delimit list items.
For example:
<ul class="o-list-inline o-list-inline--delimited">
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
</ul>
If you wish to completely remove the whitespace between items, omit the closing
</li>
tag:
<ul class="o-list-inline">
<li>Foo
<li>Bar
<li>Baz
</ul>
Enable options
To enable the optional class set the variable to true
before you import
the _objects.list-inline.scss
-file.
$o-list-inline--delimited: false !default;
Modify options
To modify the character between items when you are using .o-list-inline--delimited
you specify that before you import the _objects.list-inline.scss
-file.
$o-list-inline-delimit-character: ",\00A0" !default;