Lists

Frontbx lists allow you to to display a continuous group of text or images quickly with very little markup. Because HTML lists are used frequently across third-party libraries and plugins, Frontbx lists are styled with the .list base class.

• Basic example
• Nested lists
• List contents
• Dense list
• List overflow
• List controls
• States
• Selected lists
• CSS Customization
• JavaScript Instantiation

Basic example

To create a list, add the .list class to a <ul> and use the .list-item class to pad out items. Below is an example of a list in it's most basic form:

<ul class="list">
    <li class="list-item">Item 1</li>
    <li class="list-item">Item 2</li>
    <li class="list-item">Item 3</li>
    <li class="list-item">Item 4</li>
</ul>

Nested lists

To nest a list, add a list as sub-item immediately after a .list-item:

<ul class="list">
    <li class="list-item">Item 1</li>
    <li class="list-item">Item 2</li>
    <li>
        <span class="list-item">Item 3</span>
        <ul>
            <li class="list-item">Nested 1</li>
            <li class="list-item">Nested 2</li>
            <li class="list-item">Nested 3</li>
            <li class="list-item">Nested 4</li>
        </ul>
    </li>
    <li class="list-item">Item 4</li>
</ul>

List contents

List items come with handy .item-title and .item-subtitle helper to help delineate content:

<ul class="list">
    <li class="list-item">
        <div class="item-body">
            <div class="item-title">Amet proident.</div>
            <div class="item-subtitle">Officia cillum nisi ea velit.</div>
        </div>
    </li>
    ...
</ul>

List items can hold three helper elements .item-left, .item-body and .item-right to align content. They align as you would expect:

<ul class="list"> 
    <li class="list-item">
        <div class="item-left"><span class="fa fa-inbox color-gray-500"></span></div>
        <div class="item-body">Inbox</span>
        <div class="item-right"><span class="label">4</span></div>
    </li>
    ...
</ul>

<ul class="list"> 
    <li class="list-item">
        <div class="item-left">
            <div class="avatar">
                <img data-src="../../assets/img/trump-avatar.jpg" class="img-responsive js-lazyload lazyload grayscale" src="../../assets/img/trump-avatar_thumb.jpg" />
            </div>
        </div>
        <div class="item-body">
            <div class="item-title">The Don</div>
            <div class="item-subtitle">Strong economy, secure borders, less regulation! MAGA!!!</div>
        </div>
    </li>
    ...
</ul>

Dense list

For larger lists with multiple items, you can use the .list-dense modifier on .list to reduce the padding and text size:

<ul class="list list-dense">
    <li class="list-item">Item 1</li>
    <li class="list-item">Item 2</li>
    <li class="list-item">Item 3</li>
    <li class="list-item">Item 4</li>
    <li class="list-item">Item 5</li>
    <li class="list-item">Item 6</li>
</ul>

List overflow

Adding the .list-ellipsis modifier on .list enables text overflow ellipsis. Ensure your text is nested inside .item-body for this to work:

<ul class="list list-ellipsis">
    <li class="list-item">
        <div class="item-body">
            <div class="item-title">Amet proident.</div>
            <div class="item-subtitle">Officia cillum nisi ea velit.</div>
        </div>
    </li>
    ...
</ul>

List controls

A checkbox can either be a primary action or a secondary action. When a checkbox is nested item-left it serves as the primary primary action and the state indicator for the list item.

<ul class="list"> 
    <li class="list-item">
        <div class="item-left">
            <div class="form-field">
                <span class="checkbox checkbox-info">
                    <input type="checkbox" name="checkbox_1" id="checkbox_1" checked />
                    <label for="checkbox_1"></label>
                </span>
            </div>
        </div>
        <div class="item-body">
            <div class="item-title">The Don</div>
        </div>
    </li>
    ...
</ul>

When nested inside .item-right, a checkbox becomes a secondary action:

<ul class="list"> 
    <li class="list-item">
        <div class="item-left">
            <div class="avatar">
                <img data-src="../../assets/img/trump-avatar.jpg" class="img-responsive js-lazyload lazyload grayscale" src="../../assets/img/trump-avatar_thumb.jpg" />
            </div>
        </div>
        <div class="item-body">
            <div class="item-title">The Don</div>
        </div>
        <div class="item-right">
            <div class="form-field">
                <span class="checkbox checkbox-info">
                    <input type="checkbox" name="checkbox_4" id="checkbox_4"  />
                    <label for="checkbox_4"></label>
                </span>
            </div>
        </div>
    </li>
    ...
</ul>

States

List items come with a handful of convenient states to help with different use-cases. Add the classes .active .selected or .disabled to a list item to help provide context:

<ul class="list">
    <li class="list-item">Default</li>
    <li class="list-item hover">hover</li>
    <li class="list-item">Default</li>
    <li class="list-item active">.active</li>
    <li class="list-item">Default</li>
    <li class="list-item selected">.selected</li>
    <li class="list-item">Default</li>
    <li class="list-item disabled">.disabled</li>
</ul>

Selected lists

Add the .js-select-list class to any list to enable clickable selection.

 <ul class="list js-select-list">
    <li class="list-item selected">
        <div class="item-body">
            <div class="item-title">Amet proident.</div>
            <div class="item-subtitle">Officia cillum nisi ea velit.</div>
        </div>
    </li>
    <li class="list-item">
        <div class="item-body">
            <div class="item-title">Lorem ipsum sed ut mollit.</div>
            <div class="item-subtitle">Ut duis reprehenderit ad.</div>
        </div>
    </li>
    <li class="list-item">
        <div class="item-body">
            <div class="item-title">Minim velit laboris in aliquip.</div>
            <div class="item-subtitle">Esse et cillum magna.</div>
        </div>
    </li>
</ul>

Frontbx will fire a custom event on the list when an item is selected. The event.detail.item key will tell you which item has been selected

const list = document.getElementById('my-list')

list.addEventListener('list:selected', event => 
{
    const item = event.detail.item;

    // Do something here  
})

CSS Customization

List uses local CSS variables on .list along with Sass variables for enhanced component customization and styling. The base values are used by the UI to create all the styling. Values for the CSS variables are set via Sass, so pre-compilation customization is still supported too.

.custom-list
{
    --fbx-list-bg: var(--fbx-black);
    --fbx-list-color: var(--fbx-white);
    --fbx-list-item-color-hover: var(--fbx-white);
    --fbx-list-item-color-active: var(--fbx-theme-primary);
    --fbx-list-item-color-selected: var(--fbx-theme-primary);
    --fbx-list-item-bg-hover: var(--fbx-gray-900);
    --fbx-list-item-bg-active: var(--fbx-gray-900);
    --fbx-list-item-bg-selected: var(--fbx-gray-900);
    --fbx-list-divider-color: var(--fbx-gray-600);
}

Default values are set in the scss/_config.scss file in Frontbx's source.

scss/_config.scss

$list-bg:                       var(--fbx-white) !default;
$list-color:                    var(--fbx-gray-700) !default;
$list-font-size:                1.3rem !default;
$list-item-bg:                  transparent !default;
$list-item-color-hover:         var(--fbx-gray-700) !default;
$list-item-color-active:        var(--fbx-gray-700) !default;
$list-item-color-selected:      var(--fbx-white) !default;
$list-item-bg-hover:            var(--fbx-gray-200) !default;
$list-item-bg-active:           var(--fbx-theme-info-100) !default;
$list-item-bg-selected:         var(--fbx-theme-info) !default;
$list-item-pad-y:               10px !default;
$list-item-pad-x:               12px !default;
$list-divider-color:            var(--fbx-gray-200) !default;
$list-divider-space:            5px !default;

scss/components/list.scss

.list {
    --fbx-list-bg: var(--fbx-white);
    --fbx-list-color: var(--fbx-gray-700);
    --fbx-list-font-size: 1.3rem;
    --fbx-list-item-color-hover: var(--fbx-gray-700);
    --fbx-list-item-color-active: var(--fbx-gray-700);
    --fbx-list-item-color-selected: var(--fbx-white);
    --fbx-list-item-bg: transparent;
    --fbx-list-item-bg-hover: var(--fbx-gray-200);
    --fbx-list-item-bg-active: var(--fbx-theme-info-100);
    --fbx-list-item-bg-selected: var(--fbx-theme-info);
    --fbx-list-item-pad-y: 10px;
    --fbx-list-item-pad-x: 12px;
    --fbx-list-divider-color: var(--fbx-gray-200);
    --fbx-list-divider-space: 5px;
}

JavaScript Instantiation

List can be instantiated via JavaScript to generate dynamic content on the fly. To create a list dynamically, use Frontbx's Component.Create method either through frontbx.Dom() or the List Component directly:

let options =
{
    dense: false,
    selectable: true,
    ellipsis: false,
    items:
    [
        'Option One',
        {
            left: '<span class="fa fa-sun"></span>',
            body: 'Option Two'
        },
        {
            left: '<span class="fa fa-sun"></span>',
            body: 'Option 3',
            right: '<span class="fa fa-user"></span>',
        }
    ]
};

let container = document.querySelector('.my-container');

// Via Frontbx dom
frontbx.Dom().create('List', options, container);

// Or via Component directly
frontbx.Dom().component('List').create(options, container);

Below are the available options: