Skip to content

aleutcss/objects.list-inline

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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>

Example of o-list-inline

The only valid children of the .o-list-inline node are lis.

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>

Example of o-list-inline options

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;

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • CSS 100.0%