SUIT CSS utilities: list

SUIT CSS list utilities

• Read more about SUIT CSS's design principles.

Installation

• npm: npm install suitcss-utils-list
• Download: zip

Available classes

• u-listReset - Remove default margin and padding
• u-listIndent - Set the left indent. Default is 40px as found in browser defaults
• u-listNone - Remove list style
• u-listBullet - Bulleted list using disc style type
• u-listBulletNested - Bulleted list using circle style type
• u-listSquare - Square list style
• u-listNumber - Numbered list using decimal 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+