Awesome
SUIT CSS utilities: list
SUIT CSS list utilities
- Read more about SUIT CSS's design principles.
Installation
Available classes
u-listReset
- Remove default margin and paddingu-listIndent
- Set the left indent. Default is40px
as found in browser defaultsu-listNone
- Remove list styleu-listBullet
- Bulleted list usingdisc
style typeu-listBulletNested
- Bulleted list usingcircle
style typeu-listSquare
- Square list styleu-listNumber
- Numbered list usingdecimal
style type
Configuration
The indent size can be changed:
:root {
--list-indentSize: 25px;
}
Usage
<ul class="u-listIndent u-listBullet">
<li>An item</li>
<li>
<ul class="u-listBulletNested">
<li>Nested item</li>
</ul>
</li>
</ul>
Please refer to the README for SUIT CSS utils
Testing
Install Node (comes with npm).
npm install
To generate a build:
npm run build
To lint code with postcss-bem-linter and stylelint
npm run lint
To generate the testing build.
npm run build-test
To watch the files for making changes to test:
npm run watch
Basic visual tests are in test/index.html
.
Browser support
- Google Chrome
- Opera
- Firefox
- Safari
- Internet Explorer 8+
- Android 4.1+
- iOS 6+
- Windows phone 8.1+