https://github.com/simonsmith/suitcss-utils-list

CSS list utilities
https://github.com/simonsmith/suitcss-utils-list

list suitcss utility

Last synced: 8 days ago
JSON representation

CSS list utilities

• Host: GitHub
• URL: https://github.com/simonsmith/suitcss-utils-list
• Owner: simonsmith
• License: mit
• Created: 2017-04-30T22:16:47.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-05-01T19:50:59.000Z (over 7 years ago)
• Last Synced: 2024-10-18T08:55:25.373Z (3 months ago)
• Topics: list, suitcss, utility
• Language: HTML
• Homepage: https://simonsmith.io/suitcss-utils-list/test/index.html
• Size: 31.3 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# SUIT CSS utilities: list

[![Build Status](https://travis-ci.org/simonsmith/suitcss-utils-list.svg?branch=master)](https://travis-ci.org/simonsmith/suitcss-utils-list)

SUIT CSS list utilities

* Read more about [SUIT CSS's design principles](https://github.com/suitcss/suit/).

## Installation

* [npm](http://npmjs.org/): `npm install suitcss-utils-list`

* Download: [zip](https://github.com/simonsmith/suitcss-utils-list/releases/latest)

## 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:

```css

:root {

  --list-indentSize: 25px;

}

```

## Usage

```html



  
An item

  


    


      
Nested item

    

  



```


Please refer to the README for [SUIT CSS utils](https://github.com/suitcss/utils/)

## Testing

Install [Node](http://nodejs.org) (comes with npm).

```

npm install

```

To generate a build:

```

npm run build

```

To lint code with [postcss-bem-linter](https://github.com/postcss/postcss-bem-linter) and [stylelint](http://stylelint.io/)

```

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+