├── .gitignore
├── index.html
├── LICENSE.txt
├── package.json
├── css
├── column-rule-width.css
├── column-rule-width.min.css
├── css-column-rule-width.min.css
└── css-column-rule-width.css
├── src
└── css-column-rule-width.css
└── README.md
/.gitignore:
--------------------------------------------------------------------------------
1 | # List of files for git to ignore
2 |
3 | .DS_Store
4 | .AppleDouble
5 | .LSOverride
6 |
7 | # Icon must end with two \r
8 | Icon
9 |
10 |
11 | # Thumbnails
12 | ._*
13 |
14 | # Files that might appear on external disk
15 | .Spotlight-V100
16 | .Trashes
17 |
18 | # Directories potentially created on remote AFP share
19 | .AppleDB
20 | .AppleDesktop
21 | Network Trash Folder
22 | Temporary Items
23 | .apdisk
24 |
25 | # Vim
26 | Session.vim
27 |
28 | # Node
29 | node_modules/*
30 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | css - column rule width
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | npm install --save-dev css-column-rule-width
17 |
18 |
19 |
20 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
1 | ISC License (ISC)
2 | Copyright (c) 2018, Adam Morse
3 |
4 | Permission to use, copy, modify, and/or distribute this software for any
5 | purpose with or without fee is hereby granted, provided that the above
6 | copyright notice and this permission notice appear in all copies.
7 |
8 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
9 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
10 | FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
11 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
12 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
13 | OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
14 | PERFORMANCE OF THIS SOFTWARE.
15 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "css-column-rule-width",
3 | "style": "column-rule-width.css",
4 | "version": "1.0.8",
5 | "homepage": "http://github.com/mrmrs/css-column-rule-width",
6 | "description": "Css module of single purpose classes for column rule width",
7 | "keywords": [
8 | "css",
9 | "oocss",
10 | "column-rule-width"
11 | ],
12 | "css-column-rule-width": {
13 | "type": "git",
14 | "url": "http://github.com/mrmrs/css-column-rule-width.git"
15 | },
16 | "bugs": {
17 | "url": "https://github.com/mrmrs/css-column-rule-width/issues",
18 | "email": "hi@mrmrs.cc"
19 | },
20 | "author": {
21 | "name": "Adam Morse",
22 | "email": "hi@mrmrs.cc",
23 | "url": "http://mrmrs.cc"
24 | },
25 | "contributors": [
26 | {
27 | "name": "Adam Morse",
28 | "email": "hi@mrmrs.cc"
29 | }
30 | ],
31 | "license": "MIT",
32 | "devDependencies": {
33 | "tachyons-cli": "^1.3.0"
34 | },
35 | "scripts": {
36 | "start": "tachyons src/css-column-rule-width.css > css/css-column-rule-width.css && tachyons src/css-column-rule-width.css --minify > css/css-column-rule-width.min.css && tachyons src/css-column-rule-width.css --generate-docs --package=../../package.json > readme.md"
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/css/column-rule-width.css:
--------------------------------------------------------------------------------
1 | /*
2 | COLUMN RULE WIDTH
3 | */
4 |
5 | .crw-thin { column-rule-width: thin; }
6 | .crw-med { column-rule-width: medium; }
7 | .crw-thick { column-rule-width: thick; }
8 |
9 | .crw-1 { column-rule-width: 1px; }
10 | .crw-2 { column-rule-width: 2px; }
11 | .crw-3 { column-rule-width: 3px; }
12 | .crw-4 { column-rule-width: 4px; }
13 | .crw-5 { column-rule-width: 5px; }
14 | .crw-10 { column-rule-width: 10px; }
15 | .crw-20 { column-rule-width: 20px; }
16 |
17 | .crw-i { column-rule-width: inherit; }
18 |
19 | @media screen and (min-width: 48em) {
20 | .crw-thin-ns { column-rule-width: thin; }
21 | .crw-med-ns { column-rule-width: medium; }
22 | .crw-thick-ns { column-rule-width: thick; }
23 | .crw-1-ns { column-rule-width: 1px; }
24 | .crw-2-ns { column-rule-width: 2px; }
25 | .crw-3-ns { column-rule-width: 3px; }
26 | .crw-4-ns { column-rule-width: 4px; }
27 | .crw-5-ns { column-rule-width: 5px; }
28 | .crw-10-ns { column-rule-width: 10px; }
29 | .crw-20-ns { column-rule-width: 20px; }
30 | .crw-i-ns { column-rule-width: inherit; }
31 | }
32 |
33 | @media screen and (min-width:48em) and (max-width: 64em) {
34 | .crw-thin-m { column-rule-width: thin; }
35 | .crw-med-m { column-rule-width: medium; }
36 | .crw-thick-m { column-rule-width: thick; }
37 | .crw-1-m { column-rule-width: 1px; }
38 | .crw-2-m { column-rule-width: 2px; }
39 | .crw-3-m { column-rule-width: 3px; }
40 | .crw-4-m { column-rule-width: 4px; }
41 | .crw-5-m { column-rule-width: 5px; }
42 | .crw-10-m { column-rule-width: 10px; }
43 | .crw-20-m { column-rule-width: 20px; }
44 | .crw-i-m { column-rule-width: inherit; }
45 | }
46 |
47 | @media screen and (min-width: 64em) {
48 | .crw-thin-l { column-rule-width: thin; }
49 | .crw-med-l { column-rule-width: medium; }
50 | .crw-thick-l { column-rule-width: thick; }
51 | .crw-1-l { column-rule-width: 1px; }
52 | .crw-2-l { column-rule-width: 2px; }
53 | .crw-3-l { column-rule-width: 3px; }
54 | .crw-4-l { column-rule-width: 4px; }
55 | .crw-5-l { column-rule-width: 5px; }
56 | .crw-10-l { column-rule-width: 10px; }
57 | .crw-20-l { column-rule-width: 20px; }
58 | .crw-i-l { column-rule-width: inherit; }
59 | }
60 |
61 |
--------------------------------------------------------------------------------
/css/column-rule-width.min.css:
--------------------------------------------------------------------------------
1 | /*
2 | COLUMN RULE WIDTH
3 | */
4 |
5 | .crw-thin { column-rule-width: thin; }
6 | .crw-med { column-rule-width: medium; }
7 | .crw-thick { column-rule-width: thick; }
8 |
9 | .crw-1 { column-rule-width: 1px; }
10 | .crw-2 { column-rule-width: 2px; }
11 | .crw-3 { column-rule-width: 3px; }
12 | .crw-4 { column-rule-width: 4px; }
13 | .crw-5 { column-rule-width: 5px; }
14 | .crw-10 { column-rule-width: 10px; }
15 | .crw-20 { column-rule-width: 20px; }
16 |
17 | .crw-i { column-rule-width: inherit; }
18 |
19 | @media screen and (min-width: 48em) {
20 | .crw-thin-ns { column-rule-width: thin; }
21 | .crw-med-ns { column-rule-width: medium; }
22 | .crw-thick-ns { column-rule-width: thick; }
23 | .crw-1-ns { column-rule-width: 1px; }
24 | .crw-2-ns { column-rule-width: 2px; }
25 | .crw-3-ns { column-rule-width: 3px; }
26 | .crw-4-ns { column-rule-width: 4px; }
27 | .crw-5-ns { column-rule-width: 5px; }
28 | .crw-10-ns { column-rule-width: 10px; }
29 | .crw-20-ns { column-rule-width: 20px; }
30 | .crw-i-ns { column-rule-width: inherit; }
31 | }
32 |
33 | @media screen and (min-width:48em) and (max-width: 64em) {
34 | .crw-thin-m { column-rule-width: thin; }
35 | .crw-med-m { column-rule-width: medium; }
36 | .crw-thick-m { column-rule-width: thick; }
37 | .crw-1-m { column-rule-width: 1px; }
38 | .crw-2-m { column-rule-width: 2px; }
39 | .crw-3-m { column-rule-width: 3px; }
40 | .crw-4-m { column-rule-width: 4px; }
41 | .crw-5-m { column-rule-width: 5px; }
42 | .crw-10-m { column-rule-width: 10px; }
43 | .crw-20-m { column-rule-width: 20px; }
44 | .crw-i-m { column-rule-width: inherit; }
45 | }
46 |
47 | @media screen and (min-width: 64em) {
48 | .crw-thin-l { column-rule-width: thin; }
49 | .crw-med-l { column-rule-width: medium; }
50 | .crw-thick-l { column-rule-width: thick; }
51 | .crw-1-l { column-rule-width: 1px; }
52 | .crw-2-l { column-rule-width: 2px; }
53 | .crw-3-l { column-rule-width: 3px; }
54 | .crw-4-l { column-rule-width: 4px; }
55 | .crw-5-l { column-rule-width: 5px; }
56 | .crw-10-l { column-rule-width: 10px; }
57 | .crw-20-l { column-rule-width: 20px; }
58 | .crw-i-l { column-rule-width: inherit; }
59 | }
60 |
61 |
--------------------------------------------------------------------------------
/src/css-column-rule-width.css:
--------------------------------------------------------------------------------
1 | /*
2 | COLUMN RULE WIDTH
3 | */
4 |
5 | .crw-thin { column-rule-width: thin; }
6 | .crw-med { column-rule-width: medium; }
7 | .crw-thick { column-rule-width: thick; }
8 |
9 | .crw-1 { column-rule-width: 1px; }
10 | .crw-2 { column-rule-width: 2px; }
11 | .crw-3 { column-rule-width: 3px; }
12 | .crw-4 { column-rule-width: 4px; }
13 | .crw-5 { column-rule-width: 5px; }
14 | .crw-10 { column-rule-width: 10px; }
15 | .crw-20 { column-rule-width: 20px; }
16 |
17 | .crw-i { column-rule-width: inherit; }
18 |
19 | @media screen and (min-width: 48em) {
20 | .crw-thin-ns { column-rule-width: thin; }
21 | .crw-med-ns { column-rule-width: medium; }
22 | .crw-thick-ns { column-rule-width: thick; }
23 | .crw-1-ns { column-rule-width: 1px; }
24 | .crw-2-ns { column-rule-width: 2px; }
25 | .crw-3-ns { column-rule-width: 3px; }
26 | .crw-4-ns { column-rule-width: 4px; }
27 | .crw-5-ns { column-rule-width: 5px; }
28 | .crw-10-ns { column-rule-width: 10px; }
29 | .crw-20-ns { column-rule-width: 20px; }
30 | .crw-i-ns { column-rule-width: inherit; }
31 | }
32 |
33 | @media screen and (min-width:48em) and (max-width: 64em) {
34 | .crw-thin-m { column-rule-width: thin; }
35 | .crw-med-m { column-rule-width: medium; }
36 | .crw-thick-m { column-rule-width: thick; }
37 | .crw-1-m { column-rule-width: 1px; }
38 | .crw-2-m { column-rule-width: 2px; }
39 | .crw-3-m { column-rule-width: 3px; }
40 | .crw-4-m { column-rule-width: 4px; }
41 | .crw-5-m { column-rule-width: 5px; }
42 | .crw-10-m { column-rule-width: 10px; }
43 | .crw-20-m { column-rule-width: 20px; }
44 | .crw-i-m { column-rule-width: inherit; }
45 | }
46 |
47 | @media screen and (min-width: 64em) {
48 | .crw-thin-l { column-rule-width: thin; }
49 | .crw-med-l { column-rule-width: medium; }
50 | .crw-thick-l { column-rule-width: thick; }
51 | .crw-1-l { column-rule-width: 1px; }
52 | .crw-2-l { column-rule-width: 2px; }
53 | .crw-3-l { column-rule-width: 3px; }
54 | .crw-4-l { column-rule-width: 4px; }
55 | .crw-5-l { column-rule-width: 5px; }
56 | .crw-10-l { column-rule-width: 10px; }
57 | .crw-20-l { column-rule-width: 20px; }
58 | .crw-i-l { column-rule-width: inherit; }
59 | }
60 |
61 |
--------------------------------------------------------------------------------
/css/css-column-rule-width.min.css:
--------------------------------------------------------------------------------
1 | .crw-thin{-webkit-column-rule-width:thin;-moz-column-rule-width:thin;column-rule-width:thin}.crw-med{-webkit-column-rule-width:medium;-moz-column-rule-width:medium;column-rule-width:medium}.crw-thick{-webkit-column-rule-width:thick;-moz-column-rule-width:thick;column-rule-width:thick}.crw-1{-webkit-column-rule-width:1px;-moz-column-rule-width:1px;column-rule-width:1px}.crw-2{-webkit-column-rule-width:2px;-moz-column-rule-width:2px;column-rule-width:2px}.crw-3{-webkit-column-rule-width:3px;-moz-column-rule-width:3px;column-rule-width:3px}.crw-4{-webkit-column-rule-width:4px;-moz-column-rule-width:4px;column-rule-width:4px}.crw-5{-webkit-column-rule-width:5px;-moz-column-rule-width:5px;column-rule-width:5px}.crw-10{-webkit-column-rule-width:10px;-moz-column-rule-width:10px;column-rule-width:10px}.crw-20{-webkit-column-rule-width:20px;-moz-column-rule-width:20px;column-rule-width:20px}.crw-i{-webkit-column-rule-width:inherit;-moz-column-rule-width:inherit;column-rule-width:inherit}@media screen and (min-width:48em){.crw-thin-ns{-webkit-column-rule-width:thin;-moz-column-rule-width:thin;column-rule-width:thin}.crw-med-ns{-webkit-column-rule-width:medium;-moz-column-rule-width:medium;column-rule-width:medium}.crw-thick-ns{-webkit-column-rule-width:thick;-moz-column-rule-width:thick;column-rule-width:thick}.crw-1-ns{-webkit-column-rule-width:1px;-moz-column-rule-width:1px;column-rule-width:1px}.crw-2-ns{-webkit-column-rule-width:2px;-moz-column-rule-width:2px;column-rule-width:2px}.crw-3-ns{-webkit-column-rule-width:3px;-moz-column-rule-width:3px;column-rule-width:3px}.crw-4-ns{-webkit-column-rule-width:4px;-moz-column-rule-width:4px;column-rule-width:4px}.crw-5-ns{-webkit-column-rule-width:5px;-moz-column-rule-width:5px;column-rule-width:5px}.crw-10-ns{-webkit-column-rule-width:10px;-moz-column-rule-width:10px;column-rule-width:10px}.crw-20-ns{-webkit-column-rule-width:20px;-moz-column-rule-width:20px;column-rule-width:20px}.crw-i-ns{-webkit-column-rule-width:inherit;-moz-column-rule-width:inherit;column-rule-width:inherit}}@media screen and (min-width:48em) and (max-width:64em){.crw-thin-m{-webkit-column-rule-width:thin;-moz-column-rule-width:thin;column-rule-width:thin}.crw-med-m{-webkit-column-rule-width:medium;-moz-column-rule-width:medium;column-rule-width:medium}.crw-thick-m{-webkit-column-rule-width:thick;-moz-column-rule-width:thick;column-rule-width:thick}.crw-1-m{-webkit-column-rule-width:1px;-moz-column-rule-width:1px;column-rule-width:1px}.crw-2-m{-webkit-column-rule-width:2px;-moz-column-rule-width:2px;column-rule-width:2px}.crw-3-m{-webkit-column-rule-width:3px;-moz-column-rule-width:3px;column-rule-width:3px}.crw-4-m{-webkit-column-rule-width:4px;-moz-column-rule-width:4px;column-rule-width:4px}.crw-5-m{-webkit-column-rule-width:5px;-moz-column-rule-width:5px;column-rule-width:5px}.crw-10-m{-webkit-column-rule-width:10px;-moz-column-rule-width:10px;column-rule-width:10px}.crw-20-m{-webkit-column-rule-width:20px;-moz-column-rule-width:20px;column-rule-width:20px}.crw-i-m{-webkit-column-rule-width:inherit;-moz-column-rule-width:inherit;column-rule-width:inherit}}@media screen and (min-width:64em){.crw-thin-l{-webkit-column-rule-width:thin;-moz-column-rule-width:thin;column-rule-width:thin}.crw-med-l{-webkit-column-rule-width:medium;-moz-column-rule-width:medium;column-rule-width:medium}.crw-thick-l{-webkit-column-rule-width:thick;-moz-column-rule-width:thick;column-rule-width:thick}.crw-1-l{-webkit-column-rule-width:1px;-moz-column-rule-width:1px;column-rule-width:1px}.crw-2-l{-webkit-column-rule-width:2px;-moz-column-rule-width:2px;column-rule-width:2px}.crw-3-l{-webkit-column-rule-width:3px;-moz-column-rule-width:3px;column-rule-width:3px}.crw-4-l{-webkit-column-rule-width:4px;-moz-column-rule-width:4px;column-rule-width:4px}.crw-5-l{-webkit-column-rule-width:5px;-moz-column-rule-width:5px;column-rule-width:5px}.crw-10-l{-webkit-column-rule-width:10px;-moz-column-rule-width:10px;column-rule-width:10px}.crw-20-l{-webkit-column-rule-width:20px;-moz-column-rule-width:20px;column-rule-width:20px}.crw-i-l{-webkit-column-rule-width:inherit;-moz-column-rule-width:inherit;column-rule-width:inherit}}
2 |
3 |
--------------------------------------------------------------------------------
/css/css-column-rule-width.css:
--------------------------------------------------------------------------------
1 | /*
2 | COLUMN RULE WIDTH
3 | */
4 | .crw-thin { -webkit-column-rule-width: thin; -moz-column-rule-width: thin; column-rule-width: thin; }
5 | .crw-med { -webkit-column-rule-width: medium; -moz-column-rule-width: medium; column-rule-width: medium; }
6 | .crw-thick { -webkit-column-rule-width: thick; -moz-column-rule-width: thick; column-rule-width: thick; }
7 | .crw-1 { -webkit-column-rule-width: 1px; -moz-column-rule-width: 1px; column-rule-width: 1px; }
8 | .crw-2 { -webkit-column-rule-width: 2px; -moz-column-rule-width: 2px; column-rule-width: 2px; }
9 | .crw-3 { -webkit-column-rule-width: 3px; -moz-column-rule-width: 3px; column-rule-width: 3px; }
10 | .crw-4 { -webkit-column-rule-width: 4px; -moz-column-rule-width: 4px; column-rule-width: 4px; }
11 | .crw-5 { -webkit-column-rule-width: 5px; -moz-column-rule-width: 5px; column-rule-width: 5px; }
12 | .crw-10 { -webkit-column-rule-width: 10px; -moz-column-rule-width: 10px; column-rule-width: 10px; }
13 | .crw-20 { -webkit-column-rule-width: 20px; -moz-column-rule-width: 20px; column-rule-width: 20px; }
14 | .crw-i { -webkit-column-rule-width: inherit; -moz-column-rule-width: inherit; column-rule-width: inherit; }
15 | @media screen and (min-width: 48em) {
16 | .crw-thin-ns { -webkit-column-rule-width: thin; -moz-column-rule-width: thin; column-rule-width: thin; }
17 | .crw-med-ns { -webkit-column-rule-width: medium; -moz-column-rule-width: medium; column-rule-width: medium; }
18 | .crw-thick-ns { -webkit-column-rule-width: thick; -moz-column-rule-width: thick; column-rule-width: thick; }
19 | .crw-1-ns { -webkit-column-rule-width: 1px; -moz-column-rule-width: 1px; column-rule-width: 1px; }
20 | .crw-2-ns { -webkit-column-rule-width: 2px; -moz-column-rule-width: 2px; column-rule-width: 2px; }
21 | .crw-3-ns { -webkit-column-rule-width: 3px; -moz-column-rule-width: 3px; column-rule-width: 3px; }
22 | .crw-4-ns { -webkit-column-rule-width: 4px; -moz-column-rule-width: 4px; column-rule-width: 4px; }
23 | .crw-5-ns { -webkit-column-rule-width: 5px; -moz-column-rule-width: 5px; column-rule-width: 5px; }
24 | .crw-10-ns { -webkit-column-rule-width: 10px; -moz-column-rule-width: 10px; column-rule-width: 10px; }
25 | .crw-20-ns { -webkit-column-rule-width: 20px; -moz-column-rule-width: 20px; column-rule-width: 20px; }
26 | .crw-i-ns { -webkit-column-rule-width: inherit; -moz-column-rule-width: inherit; column-rule-width: inherit; }
27 | }
28 | @media screen and (min-width:48em) and (max-width: 64em) {
29 | .crw-thin-m { -webkit-column-rule-width: thin; -moz-column-rule-width: thin; column-rule-width: thin; }
30 | .crw-med-m { -webkit-column-rule-width: medium; -moz-column-rule-width: medium; column-rule-width: medium; }
31 | .crw-thick-m { -webkit-column-rule-width: thick; -moz-column-rule-width: thick; column-rule-width: thick; }
32 | .crw-1-m { -webkit-column-rule-width: 1px; -moz-column-rule-width: 1px; column-rule-width: 1px; }
33 | .crw-2-m { -webkit-column-rule-width: 2px; -moz-column-rule-width: 2px; column-rule-width: 2px; }
34 | .crw-3-m { -webkit-column-rule-width: 3px; -moz-column-rule-width: 3px; column-rule-width: 3px; }
35 | .crw-4-m { -webkit-column-rule-width: 4px; -moz-column-rule-width: 4px; column-rule-width: 4px; }
36 | .crw-5-m { -webkit-column-rule-width: 5px; -moz-column-rule-width: 5px; column-rule-width: 5px; }
37 | .crw-10-m { -webkit-column-rule-width: 10px; -moz-column-rule-width: 10px; column-rule-width: 10px; }
38 | .crw-20-m { -webkit-column-rule-width: 20px; -moz-column-rule-width: 20px; column-rule-width: 20px; }
39 | .crw-i-m { -webkit-column-rule-width: inherit; -moz-column-rule-width: inherit; column-rule-width: inherit; }
40 | }
41 | @media screen and (min-width: 64em) {
42 | .crw-thin-l { -webkit-column-rule-width: thin; -moz-column-rule-width: thin; column-rule-width: thin; }
43 | .crw-med-l { -webkit-column-rule-width: medium; -moz-column-rule-width: medium; column-rule-width: medium; }
44 | .crw-thick-l { -webkit-column-rule-width: thick; -moz-column-rule-width: thick; column-rule-width: thick; }
45 | .crw-1-l { -webkit-column-rule-width: 1px; -moz-column-rule-width: 1px; column-rule-width: 1px; }
46 | .crw-2-l { -webkit-column-rule-width: 2px; -moz-column-rule-width: 2px; column-rule-width: 2px; }
47 | .crw-3-l { -webkit-column-rule-width: 3px; -moz-column-rule-width: 3px; column-rule-width: 3px; }
48 | .crw-4-l { -webkit-column-rule-width: 4px; -moz-column-rule-width: 4px; column-rule-width: 4px; }
49 | .crw-5-l { -webkit-column-rule-width: 5px; -moz-column-rule-width: 5px; column-rule-width: 5px; }
50 | .crw-10-l { -webkit-column-rule-width: 10px; -moz-column-rule-width: 10px; column-rule-width: 10px; }
51 | .crw-20-l { -webkit-column-rule-width: 20px; -moz-column-rule-width: 20px; column-rule-width: 20px; }
52 | .crw-i-l { -webkit-column-rule-width: inherit; -moz-column-rule-width: inherit; column-rule-width: inherit; }
53 | }
54 |
55 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # css-column-rule-width 1.0.6
2 |
3 | Css module of single purpose classes for column rule width
4 |
5 | #### Stats
6 |
7 | 434 | 44 | 132
8 | ---|---|---
9 | bytes | selectors | declarations
10 |
11 | ## Installation
12 |
13 | #### With [npm](https://npmjs.com)
14 |
15 | ```
16 | npm install --save-dev css-column-rule-width
17 | ```
18 |
19 | Learn more about using css installed with npm:
20 | * https://webpack.github.io/docs/stylesheets.html
21 | * https://github.com/defunctzombie/npm-css
22 |
23 | #### With Git
24 |
25 | http:
26 | ```
27 | git clone https://github.com/tachyons-css/css-column-rule-width
28 | ```
29 |
30 | ssh:
31 | ```
32 | git clone git@github.com:tachyons-css/css-column-rule-width.git
33 | ```
34 |
35 | ## Usage
36 |
37 | #### Using with [Postcss](https://github.com/postcss/postcss)
38 |
39 | Import the css module
40 |
41 | ```css
42 | @import "css-column-rule-width";
43 | ```
44 |
45 | Then process the css using the [`tachyons-cli`](https://github.com/tachyons-css/tachyons-cli)
46 |
47 | ```sh
48 | $ npm i -g tachyons-cli
49 | $ tachyons path/to/css-file.css > dist/t.css
50 | ```
51 |
52 | #### Using the css
53 |
54 | ##### CDN
55 | The easiest and most simple way to use the css is to use the cdn hosted version. Include it in the head of your html with:
56 |
57 | ```
58 |
59 | ```
60 |
61 | ##### Locally
62 | The built css is located in the `css` directory. It contains an unminified and minified version.
63 | You can either cut and paste that css or link to it directly in your html.
64 |
65 | ```html
66 |
67 | ```
68 |
69 | #### Development
70 |
71 | The source css files can be found in the `src` directory.
72 | Running `$ npm start` will process the source css and place the built css in the `css` directory.
73 |
74 | ## The css
75 |
76 | ```css
77 | /*
78 | COLUMN RULE WIDTH
79 | */
80 | .crw-thin { -webkit-column-rule-width: thin; -moz-column-rule-width: thin; column-rule-width: thin; }
81 | .crw-med { -webkit-column-rule-width: medium; -moz-column-rule-width: medium; column-rule-width: medium; }
82 | .crw-thick { -webkit-column-rule-width: thick; -moz-column-rule-width: thick; column-rule-width: thick; }
83 | .crw-1 { -webkit-column-rule-width: 1px; -moz-column-rule-width: 1px; column-rule-width: 1px; }
84 | .crw-2 { -webkit-column-rule-width: 2px; -moz-column-rule-width: 2px; column-rule-width: 2px; }
85 | .crw-3 { -webkit-column-rule-width: 3px; -moz-column-rule-width: 3px; column-rule-width: 3px; }
86 | .crw-4 { -webkit-column-rule-width: 4px; -moz-column-rule-width: 4px; column-rule-width: 4px; }
87 | .crw-5 { -webkit-column-rule-width: 5px; -moz-column-rule-width: 5px; column-rule-width: 5px; }
88 | .crw-10 { -webkit-column-rule-width: 10px; -moz-column-rule-width: 10px; column-rule-width: 10px; }
89 | .crw-20 { -webkit-column-rule-width: 20px; -moz-column-rule-width: 20px; column-rule-width: 20px; }
90 | .crw-i { -webkit-column-rule-width: inherit; -moz-column-rule-width: inherit; column-rule-width: inherit; }
91 | @media screen and (min-width: 48em) {
92 | .crw-thin-ns { -webkit-column-rule-width: thin; -moz-column-rule-width: thin; column-rule-width: thin; }
93 | .crw-med-ns { -webkit-column-rule-width: medium; -moz-column-rule-width: medium; column-rule-width: medium; }
94 | .crw-thick-ns { -webkit-column-rule-width: thick; -moz-column-rule-width: thick; column-rule-width: thick; }
95 | .crw-1-ns { -webkit-column-rule-width: 1px; -moz-column-rule-width: 1px; column-rule-width: 1px; }
96 | .crw-2-ns { -webkit-column-rule-width: 2px; -moz-column-rule-width: 2px; column-rule-width: 2px; }
97 | .crw-3-ns { -webkit-column-rule-width: 3px; -moz-column-rule-width: 3px; column-rule-width: 3px; }
98 | .crw-4-ns { -webkit-column-rule-width: 4px; -moz-column-rule-width: 4px; column-rule-width: 4px; }
99 | .crw-5-ns { -webkit-column-rule-width: 5px; -moz-column-rule-width: 5px; column-rule-width: 5px; }
100 | .crw-10-ns { -webkit-column-rule-width: 10px; -moz-column-rule-width: 10px; column-rule-width: 10px; }
101 | .crw-20-ns { -webkit-column-rule-width: 20px; -moz-column-rule-width: 20px; column-rule-width: 20px; }
102 | .crw-i-ns { -webkit-column-rule-width: inherit; -moz-column-rule-width: inherit; column-rule-width: inherit; }
103 | }
104 | @media screen and (min-width:48em) and (max-width: 64em) {
105 | .crw-thin-m { -webkit-column-rule-width: thin; -moz-column-rule-width: thin; column-rule-width: thin; }
106 | .crw-med-m { -webkit-column-rule-width: medium; -moz-column-rule-width: medium; column-rule-width: medium; }
107 | .crw-thick-m { -webkit-column-rule-width: thick; -moz-column-rule-width: thick; column-rule-width: thick; }
108 | .crw-1-m { -webkit-column-rule-width: 1px; -moz-column-rule-width: 1px; column-rule-width: 1px; }
109 | .crw-2-m { -webkit-column-rule-width: 2px; -moz-column-rule-width: 2px; column-rule-width: 2px; }
110 | .crw-3-m { -webkit-column-rule-width: 3px; -moz-column-rule-width: 3px; column-rule-width: 3px; }
111 | .crw-4-m { -webkit-column-rule-width: 4px; -moz-column-rule-width: 4px; column-rule-width: 4px; }
112 | .crw-5-m { -webkit-column-rule-width: 5px; -moz-column-rule-width: 5px; column-rule-width: 5px; }
113 | .crw-10-m { -webkit-column-rule-width: 10px; -moz-column-rule-width: 10px; column-rule-width: 10px; }
114 | .crw-20-m { -webkit-column-rule-width: 20px; -moz-column-rule-width: 20px; column-rule-width: 20px; }
115 | .crw-i-m { -webkit-column-rule-width: inherit; -moz-column-rule-width: inherit; column-rule-width: inherit; }
116 | }
117 | @media screen and (min-width: 64em) {
118 | .crw-thin-l { -webkit-column-rule-width: thin; -moz-column-rule-width: thin; column-rule-width: thin; }
119 | .crw-med-l { -webkit-column-rule-width: medium; -moz-column-rule-width: medium; column-rule-width: medium; }
120 | .crw-thick-l { -webkit-column-rule-width: thick; -moz-column-rule-width: thick; column-rule-width: thick; }
121 | .crw-1-l { -webkit-column-rule-width: 1px; -moz-column-rule-width: 1px; column-rule-width: 1px; }
122 | .crw-2-l { -webkit-column-rule-width: 2px; -moz-column-rule-width: 2px; column-rule-width: 2px; }
123 | .crw-3-l { -webkit-column-rule-width: 3px; -moz-column-rule-width: 3px; column-rule-width: 3px; }
124 | .crw-4-l { -webkit-column-rule-width: 4px; -moz-column-rule-width: 4px; column-rule-width: 4px; }
125 | .crw-5-l { -webkit-column-rule-width: 5px; -moz-column-rule-width: 5px; column-rule-width: 5px; }
126 | .crw-10-l { -webkit-column-rule-width: 10px; -moz-column-rule-width: 10px; column-rule-width: 10px; }
127 | .crw-20-l { -webkit-column-rule-width: 20px; -moz-column-rule-width: 20px; column-rule-width: 20px; }
128 | .crw-i-l { -webkit-column-rule-width: inherit; -moz-column-rule-width: inherit; column-rule-width: inherit; }
129 | }
130 | ```
131 |
132 | ## Contributing
133 |
134 | 1. Fork it
135 | 2. Create your feature branch (`git checkout -b my-new-feature`)
136 | 3. Commit your changes (`git commit -am 'Add some feature'`)
137 | 4. Push to the branch (`git push origin my-new-feature`)
138 | 5. Create new Pull Request
139 |
140 | ## Authors
141 |
142 | * [mrmrs](http://mrmrs.io)
143 | * [johno](http://johnotander.com)
144 |
145 | ## License
146 |
147 | ISC
148 |
149 |
--------------------------------------------------------------------------------