list: divided

view source

Create a floated list with a dividing pseudo-element between list items.

use-name

scut-list-divided

type

mixin, with extension placeholder(s)

arguments

$divider

default

"|"
$space

default

0.5em

Spacing to separate your dividers (on both sides) from your list items.
$dir

default

left

The float direction.
$height
Manually set a height for the list items so that you can use tall dividers. See examples below.
$no-margin

default

true

If true, top and bottom margins will be removed from the list.

@content

A content block passed to this mixin will be applied to the dividing pseudo-elements.

A couple of common variations have their own placeholders:

%scut-list-bar
%scut-list-breadcrumb

But, of course, all things are possible.

The $height argument is kind of tricky: If you want a $divider taller than your list items, you need include a $height argument to ensure nice neat vertical alignment. See the example below.

Only the list's immediate children are divided (ul > li): Scut does not presume to know what you plan to do with sub-lists.

example

SCSS

.eg-list-bar {
  @include scut-list-divided;
  // or @extend %scut-list-bar;
}
.eg-list-breadcrumb {
  @include scut-list-divided("/");
  // or @extend %scut-list-breadcrumb;
}
.eg-list-divided-1 {
  @include scut-list-divided("...", 0, right, $no-margin: false);
}
.eg-list-divided-2 {
  @include scut-list-divided("", 0.5em, left, 3em) {
    background-color: $eg-dark;
    width: 1em;
  }
}

compiled CSS

.eg-list-bar {
  list-style-type: none;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
}
.eg-list-bar:after {
  content: "";
  display: table;
  clear: both;
}
.eg-list-bar > li {
  float: left;
}
.eg-list-bar > li + li:before {
  content: "|";
  display: inline-block;
  margin-left: 0.5em;
  margin-right: 0.5em;
}

.eg-list-breadcrumb {
  list-style-type: none;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
}
.eg-list-breadcrumb:after {
  content: "";
  display: table;
  clear: both;
}
.eg-list-breadcrumb > li {
  float: left;
}
.eg-list-breadcrumb > li + li:before {
  content: "/";
  display: inline-block;
  margin-left: 0.5em;
  margin-right: 0.5em;
}

.eg-list-divided-1 {
  list-style-type: none;
  padding-left: 0;
}
.eg-list-divided-1:after {
  content: "";
  display: table;
  clear: both;
}
.eg-list-divided-1 > li {
  float: right;
}
.eg-list-divided-1 > li + li:after {
  content: "...";
  display: inline-block;
  margin-left: 0;
  margin-right: 0;
}

.eg-list-divided-2 {
  list-style-type: none;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
}
.eg-list-divided-2:after {
  content: "";
  display: table;
  clear: both;
}
.eg-list-divided-2 > li {
  float: left;
}
.eg-list-divided-2 > li {
  height: 3em;
}
.eg-list-divided-2 > li:before {
  height: 3em;
  content: "";
  display: inline-block;
  vertical-align: middle;
  background-color: #002834;
  width: 1em;
}
.eg-list-divided-2 > li:first-child:before {
  width: 0;
  overflow: hidden;
}
.eg-list-divided-2 > li + li:before {
  margin-left: 0.5em;
  margin-right: 0.5em;
}

Result

list item 1
list item 2
list item 3

list item 1
list item 2
list item 3

list item 1
list item 2
list item 3