Lists

‹ Back

Horizontal Spacing

Horizontally spacing out list items can be done by the list-horizontal mixin.

It takes the following default values:

$space: $x-small-unit
$border: false
$all: false
$element: "li"
$delegate: false

For example, basic spacing of list items horizontally by specifying the space as the first value.

  • Lorem
  • ipsum
  • dolor
  • sit
  • amet
<ul class="lists--example lists--example-1">
  <li>Lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
</ul>

.lists--example-1 {
  @include list-horizontal($small-unit);
}

Adding a border between list items by adding a border definition to the second value.

  • Lorem
  • ipsum
  • dolor
  • sit
  • amet
<ul class="lists--example lists--example-2">
  <li>Lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
</ul>

.lists--example-2 {
  @include list-horizontal($small-unit, 1px solid #ccc);
}

Adding borders to first and last items as well by passing the third value as true.

  • Lorem
  • ipsum
  • dolor
  • sit
  • amet
<ul class="lists--example lists--example-3">
  <li>Lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
</ul>

.lists--example-3 {
  @include list-horizontal($small-unit, 1px solid #ccc, true);
}

This mixin doesn't necessarily need to be used on a ul/ol and can really be applied to anything. You can use the $element variable to specify the children that will replace the lis.

You can delegate the padding to a child element inside the $element. For example you might want the padding on block-level anchor.

Vertical Spacing

The list-vertical takes the same options as list-horizontal:

$space: $x-small-unit
$border: false
$all: false
$element: "li"
$delegate: false

Vertically spacing some list items.

  • Lorem
  • ipsum
  • dolor
  • sit
  • amet
<ul class="lists--example lists--example-4">
  <li>Lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
</ul>

.lists--example-4 {
  @include list-vertical($small-unit);
}

Adding a border between items.

  • Lorem
  • ipsum
  • dolor
  • sit
  • amet
<ul class="lists--example lists--example-5">
  <li>Lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
</ul>

.lists--example-5 {
  @include list-vertical($small-unit, 1px solid #ccc);
}

Adding a border to first and last items.

  • Lorem
  • ipsum
  • dolor
  • sit
  • amet
<ul class="lists--example lists--example-6">
  <li>Lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
</ul>

.lists--example-6 {
  @include list-vertical($small-unit, 1px solid #ccc, true);
}

Flushing Lists

The list-flush mixin takes one value which is an English string representation of how you want it to flush. The available values are:

  • left
  • right
  • left and right
  • top
  • bottom
  • top and bottom
  • Lorem
  • ipsum
  • dolor
  • sit
  • amet
<ul class="lists--example lists--example-3b">
  <li>Lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
</ul>

.lists--example-3b {
  @include list-horizontal($small-unit, 1px solid #ccc);
  @include list-flush("left and right");
}

Making our vertical list flush on top and bottom

  • Lorem
  • ipsum
  • dolor
  • sit
  • amet
<ul class="lists--example lists--example-6b">
  <li>Lorem</li>
  <li>ipsum</li>
  <li>dolor</li>
  <li>sit</li>
  <li>amet</li>
</ul>

.lists--example-3b {
  @include list-vertical($small-unit, 1px solid #ccc);
  @include list-flush("top and bottom");
}