Lists
‹ BackHorizontal 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 li
s.
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"); }