Use generated content bullets on uls

[stoff]

Rationale

By using generated content we can insert a unicode bullet and normalize the appearance of bullets across all platforms.

Documentation needs

It would be good to document drawbacks - bullets on nested uls will appear the same - no switching to disc, etc. If this is desired, this style needs to be overridden for nested uls. For most applications, however, indentation seems to provide enough of a visual cue to convey the sense of 'nested-ness'.

Implementation notes

• assumes vertical rhythm is addressed elsewhere.
• float is on the :before to prevent a whitespace issue: whitespace at the beginning of the li will be rendered by most clients (correctly) because we're adding/generating content before it.

Snippet

$bulletWidth: em(18);
ul {
    list-style-image: none;
    list-style: none;
    margin-left: $bulletWidth;

    li:before {
        content: "\2022";
        display: inline-block;
        float: left;
        margin-left: -$bulletWidth;
        text-align: center;
        width: $bulletWidth;
    }
}

[elseloop]

:+1:

My only note is that in implementing it on a client site, I'm finding that changing li:before to havetext-align: left gives the bullets an orientation/spacing more closely matching browser defaults. If that's something you happen to be into.

[ajmueller]

:+1: This is awesome. @elseloop just implemented this on [client site name redacted] and it's awesome. One thing he did, which I really like, is make the variable a global in the typography file ($listIndentWidth: $baseFontSize;).

[ajmueller]

Pull request opened (#103). Please take a look and let me know of any issues you find.