objects.list-inline's Introduction

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:

settings.defaults

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 [email protected]: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>

objects.list-inline's People

Contributors

Stargazers

Watchers

objects.list-inline's Issues

Gap between list items (not minified)

For those who aren't terribly familiar w/ the side effects of inline-block, I think it's worth mentioning that there will be a gap between list items if you don't minify your HTML. Example: http://jsfiddle.net/co39wren/

Could be renamed in list-inline-block and a real list-inline could be created

The actual name may be confusing.

If you have to tag a real content-related inline list like the following one :

<p>We are split in 4 groups:</p>
<ol>
    <li>2184, </li>
    <li>2185, </li>
    <li>2186, </li>
    <li>2187.</li>
</ol>

and want it rendered like that :
We are split in 4 groups: 2184, 2185, 2186, 2187., the most reasonable choice seems to be to use a class for the ol, named list-inline. The inline-block behavior is not suitable for this one because the liare still seen as blocks, and the words and spaces are not used any more in the calculation of the word wrapping behavior. Each list-item becomes a single blocky word, even if it is made of several actual words.

I understand that from a structural point of view (like when you need to style a navigation list), it makes sense to think about the list as an inline-list and thus provide an inline-blockstyle, but from a typographic point of view, an inline list should probably behave like a regular sentence, aligning actual words one after the other.

Wouldn’t it be interesting to create another object for the list-inline-block behavior and keep the inline-list behavior for typographic purposes ?

inuitcss / objects.list-inline Goto Github PK