inuit-list-inline

A simple object to remove bullets and indents from lists

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
inuit-list-inline
600.2.28 years ago8 years agoMinified + gzip package size for inuit-list-inline in KB

Readme

List-inline
The List-inline object simply displays a list as one horizontal row.

Dependencies

inuitcss’ List-inline object depends on one other inuitcss module:

If you install the List-inline object using Bower, you will get these dependencies at the same time. If not using Bower, please be sure to install and @import these dependencies in the relevant way.

Installation

The recommended installation method is Bower, but you can install the List-inline module via a Git Submodule, or copy and paste.

Install using Bower:

$ bower install --save inuit-list-inline

Install using npm:

$ npm install --save inuit-list-inline
Once installed, @import into your project in its Objects layer:
@import "bower_components/inuit-list-inline/objects.list-inline";

Install as a Git Submodule

$ git submodule add git@github.com:inuitcss/objects.list-inline.git
Once installed, @import into your project in its Objects layer:
@import "objects.list-inline/objects.list-inline";

Install via file download

The least recommended option for installation is to simply download _objects.list-inline.scss into your project and @import it into your project in its Objects layer.

Usage

Basic usage of the List-inline object uses the required classes:
<ul class="list-inline">
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
</ul>
The only valid children of the .list-inline node are lis.

Options

Other, optional classes can supplement the required base classes:
  • .list-inline--delimited: add a character to delimit list items.

For example:
<ul class="list-inline  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="list-inline">
    <li>Foo
    <li>Bar
    <li>Baz
</ul>