Skip to content

Commit d61815c

Browse files
simonsmithsimonsmith
committed
Initial commit
0 parents  commit d61815c

12 files changed

+2836
-0
lines changed

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
build

‎.travis.yml

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
language: node_js
2+
sudo: false
3+
node_js:
4+
- "stable"

‎CHANGELOG.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
### HEAD
2+
3+
### 0.1.0 (April 30, 2017)
4+
5+
* Public release.

‎LICENSE.md

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
Copyright (c) Simon Smith
2+
3+
Permission is hereby granted, free of charge, to any person obtaining a copy of
4+
this software and associated documentation files (the "Software"), to deal in
5+
the Software without restriction, including without limitation the rights to
6+
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
7+
of the Software, and to permit persons to whom the Software is furnished to do
8+
so, subject to the following conditions:
9+
10+
The above copyright notice and this permission notice shall be included in all
11+
copies or substantial portions of the Software.
12+
13+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19+
SOFTWARE.

‎README.md

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
# SUIT CSS utilities: list
2+
3+
[![Build Status](https://travis-ci.org/simonsmith/suitcss-utils-list.svg?branch=master)](https://travis-ci.org/simonsmith/suitcss-utils-list)
4+
5+
SUIT CSS list utilities
6+
7+
* Read more about [SUIT CSS's design principles](https://github.com/suitcss/suit/).
8+
9+
## Installation
10+
11+
* [npm](http://npmjs.org/): `npm install suitcss-utils-list`
12+
* Download: [zip](https://github.com/simonsmith/suitcss-utils-list/releases/latest)
13+
14+
## Available classes
15+
16+
* `u-listIndent` - Set the left indent. Default is `40px` as found in browser
17+
defaults
18+
* `u-listNone` - Remove list style
19+
* `u-listBullet` - Bulleted list using `disc` style type
20+
* `u-listBulletNested` - Bulleted list using `circle` style type
21+
* `u-listSquare` - Square list style
22+
* `u-listNumber` - Numbered list using `decimal` style type
23+
24+
### Configuration
25+
26+
The indent size can be changed:
27+
28+
```css
29+
:root {
30+
--list-indentSize: 25px;
31+
}
32+
```
33+
34+
## Usage
35+
36+
```html
37+
<ul class="u-listIndent u-listBullet">
38+
<li>An item</li>
39+
<li>
40+
<ul class="u-listBulletNested">
41+
<li>Nested item</li>
42+
</ul>
43+
</li>
44+
</ul>
45+
```
46+
47+
Please refer to the README for [SUIT CSS utils](https://github.com/suitcss/utils/)
48+
49+
## Testing
50+
51+
Install [Node](http://nodejs.org) (comes with npm).
52+
53+
```
54+
npm install
55+
```
56+
57+
To generate a build:
58+
59+
```
60+
npm run build
61+
```
62+
63+
To lint code with [postcss-bem-linter](https://github.com/postcss/postcss-bem-linter) and [stylelint](http://stylelint.io/)
64+
65+
```
66+
npm run lint
67+
```
68+
69+
To generate the testing build.
70+
71+
```
72+
npm run build-test
73+
```
74+
75+
To watch the files for making changes to test:
76+
77+
```
78+
npm run watch
79+
```
80+
81+
Basic visual tests are in `test/index.html`.
82+
83+
## Browser support
84+
85+
* Google Chrome
86+
* Opera
87+
* Firefox
88+
* Safari
89+
* Internet Explorer 8+

‎index.css

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import "./lib/list.css";

‎index.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
require('./lib/list.css');

‎lib/list.css

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
/**
2+
* @define utilities
3+
*/
4+
5+
:root {
6+
--list-indentSize: 40px;
7+
}
8+
9+
/*
10+
* Set the left indent. Browser default is 40px
11+
*/
12+
13+
.u-listIndent {
14+
padding-left: var(--list-indentSize) !important;
15+
}
16+
17+
/*
18+
* Remove all list style
19+
*/
20+
21+
.u-listNone {
22+
list-style-type: none !important;
23+
}
24+
25+
/*
26+
* Solid bullets
27+
* `Bullet` is used instead of `Disc` for easier understanding of visual style
28+
*/
29+
30+
.u-listBullet {
31+
list-style-type: disc !important;
32+
}
33+
34+
/*
35+
* Hollow bullets found on nested lists
36+
*/
37+
38+
.u-listBulletNested {
39+
list-style-type: circle !important;
40+
}
41+
42+
/*
43+
* Square list style
44+
*/
45+
46+
.u-listSquare {
47+
list-style-type: square !important;
48+
}
49+
50+
/*
51+
* Numbered list style
52+
*/
53+
54+
.u-listNumber {
55+
list-style-type: decimal !important;
56+
}

‎package.json

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"name": "suitcss-utils-list",
3+
"version": "0.1.0",
4+
"description": "List utilities for SUIT CSS",
5+
"keywords": [
6+
"browser",
7+
"css-utilities",
8+
"suitcss",
9+
"list",
10+
"style"
11+
],
12+
"homepage": "https://github.com/simonsmith/suitcss-utils-list#readme",
13+
"bugs": "https://github.com/simonsmith/suitcss-utils-list/labels/bug",
14+
"license": "MIT",
15+
"author": "Simon Smith",
16+
"files": [
17+
"index.css",
18+
"index.js",
19+
"lib"
20+
],
21+
"style": "index.css",
22+
"repository": {
23+
"type": "git",
24+
"url": "git://github.com/simonsmith/suitcss-utils-list"
25+
},
26+
"scripts": {
27+
"build": "npm run setup && npm run preprocess",
28+
"build-test": "npm run setup && npm run preprocess-test",
29+
"lint": "suitcss index.css build/lint.css",
30+
"preprocess": "suitcss index.css build/build.css",
31+
"preprocess-test": "suitcss -i test test/test.css build/test.css",
32+
"setup": "npm install",
33+
"watch": "npm run preprocess-test -- -w -v",
34+
"test": "npm run lint"
35+
},
36+
"devDependencies": {
37+
"suitcss-components-test": "*",
38+
"suitcss-preprocessor": "^4.0.0"
39+
}
40+
}

‎test/index.html

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<!doctype html>
2+
<meta charset="utf-8">
3+
<title>List [utility] - SUIT CSS</title>
4+
<meta name="viewport" content="initial-scale=1, width=device-width">
5+
<link rel="stylesheet" href="../build/test.css">
6+
<style>
7+
.dev-highlight {
8+
background: lightblue;
9+
}
10+
.reset-list {
11+
padding: 0;
12+
}
13+
</style>
14+
<div class="Test">
15+
<h1 class="Test-title">SUIT CSS: <a href="https://github.com/simonsmith/suit-utils-flex">list</a> tests</h1>
16+
17+
<h2 class="Test-describe">.u-listNone</h2>
18+
<h3 class="Test-it">it should not render any list style on parent list</h3>
19+
<div class="Test-run dev-highlight">
20+
<ul class="u-listNone">
21+
<li>ul item 1</li>
22+
<li>ul item 2</li>
23+
<li>
24+
<ul>
25+
<li>&gt; ul item 1</li>
26+
<li>&gt; ul item 2</li>
27+
</ul>
28+
</li>
29+
<li>ul item 3</li>
30+
</ul>
31+
</div>
32+
33+
<h2 class="Test-describe">.u-listBullet</h2>
34+
<h3 class="Test-it">it should render solid bullet circles</h3>
35+
<div class="Test-run dev-highlight">
36+
<ul class="u-listBullet">
37+
<li>ul item 1</li>
38+
<li>ul item 2</li>
39+
<li>ul item 3</li>
40+
</ul>
41+
</div>
42+
43+
<h2 class="Test-describe">.u-listBulletNested</h2>
44+
<h3 class="Test-it">it should render hollow bullet circles</h3>
45+
<div class="Test-run dev-highlight">
46+
<ul class="u-listBulletNested">
47+
<li>ul item 1</li>
48+
<li>ul item 2</li>
49+
<li>ul item 3</li>
50+
</ul>
51+
</div>
52+
53+
<h2 class="Test-describe">.u-listNumber</h2>
54+
<h3 class="Test-it">it should render decimal numbers</h3>
55+
<div class="Test-run dev-highlight">
56+
<ul class="u-listNumber">
57+
<li>ul item 1</li>
58+
<li>ul item 2</li>
59+
<li>ul item 3</li>
60+
</ul>
61+
</div>
62+
63+
<h2 class="Test-describe">.u-listSquare</h2>
64+
<h3 class="Test-it">it should render solid bullet squares</h3>
65+
<div class="Test-run dev-highlight">
66+
<ul class="u-listSquare">
67+
<li>ul item 1</li>
68+
<li>ul item 2</li>
69+
<li>ul item 3</li>
70+
</ul>
71+
</div>
72+
73+
<h2 class="Test-describe">.u-listIndent</h2>
74+
<h3 class="Test-it">it should set the default left padding on a list</h3>
75+
<div class="Test-run dev-highlight">
76+
<ul class="u-listIndent reset-list">
77+
<li>ul item 1</li>
78+
<li>ul item 2</li>
79+
<li>ul item 3</li>
80+
</ul>
81+
</div>
82+
83+
</div>

‎test/test.css

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@import "suitcss-components-test";
2+
@import "../index.css";

0 commit comments

Comments
 (0)