Preview

List: Default

Ready

Docs
HTML
Assets

$list-padding is applied as left padding.

By default is set to 0. When so, a “negative” padding is set using list-style-position: outside.

This sets the bullets outside the main flow of text. Even if not common on web design, this is considered the correct solution. For typographers, this is the way bulleted lists was always intended to be: read this article for more info on hanging punctuation.

Be warned: this also means you will need to be sure that overflow is possible and whitespace is present.

For unordered lists, square list-style-type is preferred (opinionated);

Inline lists

Other than using inline-list() mixin, you can use the helper class .list--inline to quickly delete the bullets/numbers and set the <li> elements to inline-block

Config example

References

Rhythm in web typography

Example




<div class="pl">
    <h4>Ordered list</h4>
    <ol>
        <li>Item a</li>
        <li>Item b</li>
        <li>Item c</li>
    </ol>

    <h4>Unordered list</h4>
    <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
    </ul>
</div>

Assets

Filesystem Path: src/components/html/list/_list.scss
Size: 533 Bytes


                                ol,
ul {
	padding-left: $list-padding;
	@if $list-padding == 0 {
		list-style-position: outside;
	}
	li {
		margin-bottom: $list-separator
	}

	ol,
	ul {
		@if $list-padding == 0 {
			// Ensure that child lists get a paddding even if we set them to 0
			padding-left: 1em;
		} @else {
			padding-left: $list-padding;
		}
		li {
			margin-bottom: $list-separator / 2;
		}
	}
}

ul {
	list-style-type: square;
}

dt {
	font-weight: bold();
	margin: 0;
}

dd {
	margin: 0 0 $spacer $spacer;
}

.list--inline {
	@include inline-list();
}