Lists

Lists in HTML come in three flavors: unordered, ordered and description lists. BaseWeb has some pretty basic default styles for all three type and a variety of list mixins and classes for stylistic variation.

<ul>

The unordered list element represents a list of items, where the order of the items is not important. So if you changed the order, the meaning of the list would stay the same.

<ul>
  <li>...</li>
</ul>
  • List Item
  • List Item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List Item
  • List Item
  • List Item

<ol>

The ordered list element represents a list of items, where the items have been intentionally ordered, such that changing the order would change the meaning of the list.

<ol>
  <li>...</li>
</ol>
  1. List item one
  2. List item two
    1. Nested list item one
    2. Nested list item two
    3. Nested list item three
  3. List item three
  4. List item four
  5. List item five

<dl>

The description list element represents an association list consisting of zero or more name-value groups (a description list).

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>
Base
The lowest part or edge of something, especially the part on which it rests or is supported.
Web
An information system on the Internet that allows documents to be connected to other documents by hypertext links, enabling the user to search for information by moving from one document to another.

Variable Map

List variables are encompassed within the $lists map and are used throughout all list mixins to set default values.

$lists: (
  'output' : true,
  'class' : 'list',

  'nth' : odd,
  'margin' : 1rem 0,
  'padding' : 1rem,

  'background' : null,
  'background-stripe' : rgba($black, 0.025),
  'background-hover' : $yellow-50,
  'border' : 1px solid rgba($black, 0.1),
  'border-radius' : $border-radius,

) !default;

make-list

Creates the base styles for a list modifier mixin or class. Usually applied directly through a base list class, mixin or an extend placeholder. If list modifier classes are enabled, you are provided .list for your base button class.

@include make-list( $options: () );
Variable Type Default
$options Map $lists

Example Usage

Using the base list mixin for custom tables. This example shows us using a %base-list placeholder for the extend method.

%base-list {
  @include make-list();
}
.list-example-1 {
  @extend %base-list;
  ...
}
.list-example-2 {
  @extend %base-list;
  ...
}

add-list-rowed

Adds borders to a list that divide list items. Requires the use of base list styles through base list class, mixin or extend.

@include add-list-rowed( $options: () );
Variable Type Default
$options Map $lists

Example Usage

.custom-list {
  @include make-list();
  @include add-list-rowed();
}
<ul class="list rowed">...</ul>
  • List Item
  • List Item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List Item
  • List Item
  • List Item

In the case where you don’t want to create left and right padding on a list, you can pass a custom padding through the base list mixin make-list(('padding':10px 0)), or use the .flush class to make the list flush to both sides.

.custom-list {
  @include make-list(('padding':10px 0));
  @include add-list-rowed();
}
<ul class="list rowed flush">...</ul>
  • List Item
  • List Item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List Item
  • List Item
  • List Item

add-list-bordered

Adds borders to a list that wraps the list and divides list items. Requires the use of base list styles through base list class, mixin or extend.

@include add-list-bordered( $options: () );
Variable Type Default
$options Map $lists

Example Usage

.custom-list {
  @include make-list();
  @include add-list-bordered();
}
<ul class="list bordered">...</ul>
  • List Item
  • List Item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List Item
  • List Item
  • List Item

add-list-linked

Adds styles for a linked list where the padding is added to the anchor element instead of the list item.

@include add-list-linked( $options: () );
Variable Type Default
$options Map $lists

Example Usage

.custom-list {
  @include make-list();
  @include add-list-bordered();
  @include add-list-linked();
}
<ul class="list bordered linked">...</ul>

add-list-rounded

Gives a list rounded borders depending on parameters passed.

@include add-list-rounded( $radius, $options: () );
Variable Type Default
$radius Unit (pixel, percent) $lists('border-radius')
$options Map $lists

Example Usage

.custom-list {
  @include make-list();
  @include add-list-bordered();
  @include add-list-rounded();
}
<ul class="list bordered rounded">...</ul>
  • List Item
  • List Item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List Item
  • List Item
  • List Item

add-list-striped

Gives a list items alternating background colors.

@include add-list-striped( $nth, $options: () );
Variable Type Default
$nth Keyword (odd, even) $lists('nth')
$options Map $lists

Example Usage

.custom-list {
  @include make-list();
  @include add-list-bordered();
  @include add-list-striped();
}
<ul class="list rowed striped">...</ul>
  • List Item
  • List Item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List Item
  • List Item
  • List Item

add-list-hover

Gives list hover styles for list items.

@include add-list-hover( $bg-hover, $options: () );
Variable Type Default
$bg-hover Color $lists('background-hover')
$options Map $lists

Example Usage

.custom-list {
  @include make-list();
  @include add-list-bordered();
  @include add-list-hover();
}
<ul class="list rowed hover">...</ul>
  • List Item
  • List Item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List Item
  • List Item
  • List Item