Divide

Sass mixins

Mixin	Purpose
divide-x($width: "DEFAULT")	Vertical dividers between children
divide-y($width: "DEFAULT")	Horizontal dividers between children
divide-style($style)	Divider border style
divide-color($name)	Divider colour

Utility classes

Divide Width

Class	Property on each child except the last
divide-x	border-right-width: 1px; other border widths: 0; border-style: solid
divide-y	border-bottom-width: 1px; other border widths: 0; border-style: solid
divide-x-{width} (0, 2, 4, 8)	border-right-width: {width}px; other border widths: 0
divide-y-{width} (0, 2, 4, 8)	border-bottom-width: {width}px; other border widths: 0

Divide Style

Class	Property on each child except the last
divide-solid	border-style: solid
divide-dashed	border-style: dashed
divide-dotted	border-style: dotted
divide-double	border-style: double
divide-none	border-style: none

Divide Colour

Class	Property on each child except the last
divide-{color}	border-color: {color}

Example

<ul class="divide-y">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>