├── .gitignore
├── index.html
├── LICENSE.txt
├── package.json
├── css
├── column-count.css
├── column-count.min.css
├── css-column-count.min.css
└── css-column-count.css
├── src
└── css-column-count.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 count
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | npm install --save-dev css-column-count
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-count",
3 | "style": "column-count.css",
4 | "version": "1.0.8",
5 | "homepage": "http://github.com/mrmrs/css-column-count",
6 | "description": "Css module of single purpose classes for column count",
7 | "keywords": [
8 | "css",
9 | "oocss",
10 | "column-count"
11 | ],
12 | "css-column-count": {
13 | "type": "git",
14 | "url": "http://github.com/mrmrs/css-column-count.git"
15 | },
16 | "bugs": {
17 | "url": "https://github.com/mrmrs/css-column-count/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-count.css > css/css-column-count.css && tachyons src/css-column-count.css --minify > css/css-column-count.min.css && tachyons src/css-column-count.css --generate-docs --package=../../package.json > readme.md"
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/css/column-count.css:
--------------------------------------------------------------------------------
1 | /*
2 | COLUMN COUNT
3 | */
4 |
5 | .cc-1 { column-count: 1; }
6 | .cc-2 { column-count: 2; }
7 | .cc-3 { column-count: 3; }
8 | .cc-4 { column-count: 4; }
9 | .cc-5 { column-count: 5; }
10 | .cc-6 { column-count: 6; }
11 | .cc-7 { column-count: 7; }
12 | .cc-8 { column-count: 8; }
13 | .cc-9 { column-count: 9; }
14 | .cc-10 { column-count: 10; }
15 | .cc-11 { column-count: 11; }
16 | .cc-12 { column-count: 12; }
17 | .cc-13 { column-count: 13; }
18 | .cc-14 { column-count: 14; }
19 | .cc-15 { column-count: 15; }
20 | .cc-16 { column-count: 16; }
21 | .cc-auto { column-count: auto; }
22 |
23 | @media screen and (min-width: 48em) {
24 | .cc-1-ns { column-count: 1; }
25 | .cc-2-ns { column-count: 2; }
26 | .cc-3-ns { column-count: 3; }
27 | .cc-4-ns { column-count: 4; }
28 | .cc-5-ns { column-count: 5; }
29 | .cc-6-ns { column-count: 6; }
30 | .cc-7-ns { column-count: 7; }
31 | .cc-8-ns { column-count: 8; }
32 | .cc-9-ns { column-count: 9; }
33 | .cc-10-ns { column-count: 10; }
34 | .cc-11-ns { column-count: 11; }
35 | .cc-12-ns { column-count: 12; }
36 | .cc-13-ns { column-count: 13; }
37 | .cc-14-ns { column-count: 14; }
38 | .cc-15-ns { column-count: 15; }
39 | .cc-16-ns { column-count: 16; }
40 | .cc-auto-ns { column-count: auto; }
41 | }
42 |
43 | @media screen and (min-width:48em) and (max-width: 64em) {
44 | .cc-1-m { column-count: 1; }
45 | .cc-2-m { column-count: 2; }
46 | .cc-3-m { column-count: 3; }
47 | .cc-4-m { column-count: 4; }
48 | .cc-5-m { column-count: 5; }
49 | .cc-6-m { column-count: 6; }
50 | .cc-7-m { column-count: 7; }
51 | .cc-8-m { column-count: 8; }
52 | .cc-9-m { column-count: 9; }
53 | .cc-10-m { column-count: 10; }
54 | .cc-11-m { column-count: 11; }
55 | .cc-12-m { column-count: 12; }
56 | .cc-13-m { column-count: 13; }
57 | .cc-14-m { column-count: 14; }
58 | .cc-15-m { column-count: 15; }
59 | .cc-16-m { column-count: 16; }
60 | .cc-auto-m { column-count: auto; }
61 | }
62 |
63 | @media screen and (min-width: 64em) {
64 | .cc-1-l { column-count: 1; }
65 | .cc-2-l { column-count: 2; }
66 | .cc-3-l { column-count: 3; }
67 | .cc-4-l { column-count: 4; }
68 | .cc-5-l { column-count: 5; }
69 | .cc-6-l { column-count: 6; }
70 | .cc-7-l { column-count: 7; }
71 | .cc-8-l { column-count: 8; }
72 | .cc-9-l { column-count: 9; }
73 | .cc-10-l { column-count: 10; }
74 | .cc-11-l { column-count: 11; }
75 | .cc-12-l { column-count: 12; }
76 | .cc-13-l { column-count: 13; }
77 | .cc-14-l { column-count: 14; }
78 | .cc-15-l { column-count: 15; }
79 | .cc-16-l { column-count: 16; }
80 | .cc-auto-l { column-count: auto; }
81 |
82 | }
83 |
84 |
--------------------------------------------------------------------------------
/css/column-count.min.css:
--------------------------------------------------------------------------------
1 | /*
2 | COLUMN COUNT
3 | */
4 |
5 | .cc-1 { column-count: 1; }
6 | .cc-2 { column-count: 2; }
7 | .cc-3 { column-count: 3; }
8 | .cc-4 { column-count: 4; }
9 | .cc-5 { column-count: 5; }
10 | .cc-6 { column-count: 6; }
11 | .cc-7 { column-count: 7; }
12 | .cc-8 { column-count: 8; }
13 | .cc-9 { column-count: 9; }
14 | .cc-10 { column-count: 10; }
15 | .cc-11 { column-count: 11; }
16 | .cc-12 { column-count: 12; }
17 | .cc-13 { column-count: 13; }
18 | .cc-14 { column-count: 14; }
19 | .cc-15 { column-count: 15; }
20 | .cc-16 { column-count: 16; }
21 | .cc-auto { column-count: auto; }
22 |
23 | @media screen and (min-width: 48em) {
24 | .cc-1-ns { column-count: 1; }
25 | .cc-2-ns { column-count: 2; }
26 | .cc-3-ns { column-count: 3; }
27 | .cc-4-ns { column-count: 4; }
28 | .cc-5-ns { column-count: 5; }
29 | .cc-6-ns { column-count: 6; }
30 | .cc-7-ns { column-count: 7; }
31 | .cc-8-ns { column-count: 8; }
32 | .cc-9-ns { column-count: 9; }
33 | .cc-10-ns { column-count: 10; }
34 | .cc-11-ns { column-count: 11; }
35 | .cc-12-ns { column-count: 12; }
36 | .cc-13-ns { column-count: 13; }
37 | .cc-14-ns { column-count: 14; }
38 | .cc-15-ns { column-count: 15; }
39 | .cc-16-ns { column-count: 16; }
40 | .cc-auto-ns { column-count: auto; }
41 | }
42 |
43 | @media screen and (min-width:48em) and (max-width: 64em) {
44 | .cc-1-m { column-count: 1; }
45 | .cc-2-m { column-count: 2; }
46 | .cc-3-m { column-count: 3; }
47 | .cc-4-m { column-count: 4; }
48 | .cc-5-m { column-count: 5; }
49 | .cc-6-m { column-count: 6; }
50 | .cc-7-m { column-count: 7; }
51 | .cc-8-m { column-count: 8; }
52 | .cc-9-m { column-count: 9; }
53 | .cc-10-m { column-count: 10; }
54 | .cc-11-m { column-count: 11; }
55 | .cc-12-m { column-count: 12; }
56 | .cc-13-m { column-count: 13; }
57 | .cc-14-m { column-count: 14; }
58 | .cc-15-m { column-count: 15; }
59 | .cc-16-m { column-count: 16; }
60 | .cc-auto-m { column-count: auto; }
61 | }
62 |
63 | @media screen and (min-width: 64em) {
64 | .cc-1-l { column-count: 1; }
65 | .cc-2-l { column-count: 2; }
66 | .cc-3-l { column-count: 3; }
67 | .cc-4-l { column-count: 4; }
68 | .cc-5-l { column-count: 5; }
69 | .cc-6-l { column-count: 6; }
70 | .cc-7-l { column-count: 7; }
71 | .cc-8-l { column-count: 8; }
72 | .cc-9-l { column-count: 9; }
73 | .cc-10-l { column-count: 10; }
74 | .cc-11-l { column-count: 11; }
75 | .cc-12-l { column-count: 12; }
76 | .cc-13-l { column-count: 13; }
77 | .cc-14-l { column-count: 14; }
78 | .cc-15-l { column-count: 15; }
79 | .cc-16-l { column-count: 16; }
80 | .cc-auto-l { column-count: auto; }
81 |
82 | }
83 |
84 |
--------------------------------------------------------------------------------
/src/css-column-count.css:
--------------------------------------------------------------------------------
1 | /*
2 | COLUMN COUNT
3 | */
4 |
5 | .cc-1 { column-count: 1; }
6 | .cc-2 { column-count: 2; }
7 | .cc-3 { column-count: 3; }
8 | .cc-4 { column-count: 4; }
9 | .cc-5 { column-count: 5; }
10 | .cc-6 { column-count: 6; }
11 | .cc-7 { column-count: 7; }
12 | .cc-8 { column-count: 8; }
13 | .cc-9 { column-count: 9; }
14 | .cc-10 { column-count: 10; }
15 | .cc-11 { column-count: 11; }
16 | .cc-12 { column-count: 12; }
17 | .cc-13 { column-count: 13; }
18 | .cc-14 { column-count: 14; }
19 | .cc-15 { column-count: 15; }
20 | .cc-16 { column-count: 16; }
21 | .cc-auto { column-count: auto; }
22 |
23 | @media screen and (min-width: 48em) {
24 | .cc-1-ns { column-count: 1; }
25 | .cc-2-ns { column-count: 2; }
26 | .cc-3-ns { column-count: 3; }
27 | .cc-4-ns { column-count: 4; }
28 | .cc-5-ns { column-count: 5; }
29 | .cc-6-ns { column-count: 6; }
30 | .cc-7-ns { column-count: 7; }
31 | .cc-8-ns { column-count: 8; }
32 | .cc-9-ns { column-count: 9; }
33 | .cc-10-ns { column-count: 10; }
34 | .cc-11-ns { column-count: 11; }
35 | .cc-12-ns { column-count: 12; }
36 | .cc-13-ns { column-count: 13; }
37 | .cc-14-ns { column-count: 14; }
38 | .cc-15-ns { column-count: 15; }
39 | .cc-16-ns { column-count: 16; }
40 | .cc-auto-ns { column-count: auto; }
41 | }
42 |
43 | @media screen and (min-width:48em) and (max-width: 64em) {
44 | .cc-1-m { column-count: 1; }
45 | .cc-2-m { column-count: 2; }
46 | .cc-3-m { column-count: 3; }
47 | .cc-4-m { column-count: 4; }
48 | .cc-5-m { column-count: 5; }
49 | .cc-6-m { column-count: 6; }
50 | .cc-7-m { column-count: 7; }
51 | .cc-8-m { column-count: 8; }
52 | .cc-9-m { column-count: 9; }
53 | .cc-10-m { column-count: 10; }
54 | .cc-11-m { column-count: 11; }
55 | .cc-12-m { column-count: 12; }
56 | .cc-13-m { column-count: 13; }
57 | .cc-14-m { column-count: 14; }
58 | .cc-15-m { column-count: 15; }
59 | .cc-16-m { column-count: 16; }
60 | .cc-auto-m { column-count: auto; }
61 | }
62 |
63 | @media screen and (min-width: 64em) {
64 | .cc-1-l { column-count: 1; }
65 | .cc-2-l { column-count: 2; }
66 | .cc-3-l { column-count: 3; }
67 | .cc-4-l { column-count: 4; }
68 | .cc-5-l { column-count: 5; }
69 | .cc-6-l { column-count: 6; }
70 | .cc-7-l { column-count: 7; }
71 | .cc-8-l { column-count: 8; }
72 | .cc-9-l { column-count: 9; }
73 | .cc-10-l { column-count: 10; }
74 | .cc-11-l { column-count: 11; }
75 | .cc-12-l { column-count: 12; }
76 | .cc-13-l { column-count: 13; }
77 | .cc-14-l { column-count: 14; }
78 | .cc-15-l { column-count: 15; }
79 | .cc-16-l { column-count: 16; }
80 | .cc-auto-l { column-count: auto; }
81 |
82 | }
83 |
84 |
--------------------------------------------------------------------------------
/css/css-column-count.min.css:
--------------------------------------------------------------------------------
1 | .cc-1{-webkit-column-count:1;-moz-column-count:1;column-count:1}.cc-2{-webkit-column-count:2;-moz-column-count:2;column-count:2}.cc-3{-webkit-column-count:3;-moz-column-count:3;column-count:3}.cc-4{-webkit-column-count:4;-moz-column-count:4;column-count:4}.cc-5{-webkit-column-count:5;-moz-column-count:5;column-count:5}.cc-6{-webkit-column-count:6;-moz-column-count:6;column-count:6}.cc-7{-webkit-column-count:7;-moz-column-count:7;column-count:7}.cc-8{-webkit-column-count:8;-moz-column-count:8;column-count:8}.cc-9{-webkit-column-count:9;-moz-column-count:9;column-count:9}.cc-10{-webkit-column-count:10;-moz-column-count:10;column-count:10}.cc-11{-webkit-column-count:11;-moz-column-count:11;column-count:11}.cc-12{-webkit-column-count:12;-moz-column-count:12;column-count:12}.cc-13{-webkit-column-count:13;-moz-column-count:13;column-count:13}.cc-14{-webkit-column-count:14;-moz-column-count:14;column-count:14}.cc-15{-webkit-column-count:15;-moz-column-count:15;column-count:15}.cc-16{-webkit-column-count:16;-moz-column-count:16;column-count:16}.cc-auto{-webkit-column-count:auto;-moz-column-count:auto;column-count:auto}@media screen and (min-width:48em){.cc-1-ns{-webkit-column-count:1;-moz-column-count:1;column-count:1}.cc-2-ns{-webkit-column-count:2;-moz-column-count:2;column-count:2}.cc-3-ns{-webkit-column-count:3;-moz-column-count:3;column-count:3}.cc-4-ns{-webkit-column-count:4;-moz-column-count:4;column-count:4}.cc-5-ns{-webkit-column-count:5;-moz-column-count:5;column-count:5}.cc-6-ns{-webkit-column-count:6;-moz-column-count:6;column-count:6}.cc-7-ns{-webkit-column-count:7;-moz-column-count:7;column-count:7}.cc-8-ns{-webkit-column-count:8;-moz-column-count:8;column-count:8}.cc-9-ns{-webkit-column-count:9;-moz-column-count:9;column-count:9}.cc-10-ns{-webkit-column-count:10;-moz-column-count:10;column-count:10}.cc-11-ns{-webkit-column-count:11;-moz-column-count:11;column-count:11}.cc-12-ns{-webkit-column-count:12;-moz-column-count:12;column-count:12}.cc-13-ns{-webkit-column-count:13;-moz-column-count:13;column-count:13}.cc-14-ns{-webkit-column-count:14;-moz-column-count:14;column-count:14}.cc-15-ns{-webkit-column-count:15;-moz-column-count:15;column-count:15}.cc-16-ns{-webkit-column-count:16;-moz-column-count:16;column-count:16}.cc-auto-ns{-webkit-column-count:auto;-moz-column-count:auto;column-count:auto}}@media screen and (min-width:48em) and (max-width:64em){.cc-1-m{-webkit-column-count:1;-moz-column-count:1;column-count:1}.cc-2-m{-webkit-column-count:2;-moz-column-count:2;column-count:2}.cc-3-m{-webkit-column-count:3;-moz-column-count:3;column-count:3}.cc-4-m{-webkit-column-count:4;-moz-column-count:4;column-count:4}.cc-5-m{-webkit-column-count:5;-moz-column-count:5;column-count:5}.cc-6-m{-webkit-column-count:6;-moz-column-count:6;column-count:6}.cc-7-m{-webkit-column-count:7;-moz-column-count:7;column-count:7}.cc-8-m{-webkit-column-count:8;-moz-column-count:8;column-count:8}.cc-9-m{-webkit-column-count:9;-moz-column-count:9;column-count:9}.cc-10-m{-webkit-column-count:10;-moz-column-count:10;column-count:10}.cc-11-m{-webkit-column-count:11;-moz-column-count:11;column-count:11}.cc-12-m{-webkit-column-count:12;-moz-column-count:12;column-count:12}.cc-13-m{-webkit-column-count:13;-moz-column-count:13;column-count:13}.cc-14-m{-webkit-column-count:14;-moz-column-count:14;column-count:14}.cc-15-m{-webkit-column-count:15;-moz-column-count:15;column-count:15}.cc-16-m{-webkit-column-count:16;-moz-column-count:16;column-count:16}.cc-auto-m{-webkit-column-count:auto;-moz-column-count:auto;column-count:auto}}@media screen and (min-width:64em){.cc-1-l{-webkit-column-count:1;-moz-column-count:1;column-count:1}.cc-2-l{-webkit-column-count:2;-moz-column-count:2;column-count:2}.cc-3-l{-webkit-column-count:3;-moz-column-count:3;column-count:3}.cc-4-l{-webkit-column-count:4;-moz-column-count:4;column-count:4}.cc-5-l{-webkit-column-count:5;-moz-column-count:5;column-count:5}.cc-6-l{-webkit-column-count:6;-moz-column-count:6;column-count:6}.cc-7-l{-webkit-column-count:7;-moz-column-count:7;column-count:7}.cc-8-l{-webkit-column-count:8;-moz-column-count:8;column-count:8}.cc-9-l{-webkit-column-count:9;-moz-column-count:9;column-count:9}.cc-10-l{-webkit-column-count:10;-moz-column-count:10;column-count:10}.cc-11-l{-webkit-column-count:11;-moz-column-count:11;column-count:11}.cc-12-l{-webkit-column-count:12;-moz-column-count:12;column-count:12}.cc-13-l{-webkit-column-count:13;-moz-column-count:13;column-count:13}.cc-14-l{-webkit-column-count:14;-moz-column-count:14;column-count:14}.cc-15-l{-webkit-column-count:15;-moz-column-count:15;column-count:15}.cc-16-l{-webkit-column-count:16;-moz-column-count:16;column-count:16}.cc-auto-l{-webkit-column-count:auto;-moz-column-count:auto;column-count:auto}}
2 |
3 |
--------------------------------------------------------------------------------
/css/css-column-count.css:
--------------------------------------------------------------------------------
1 | /*
2 | COLUMN COUNT
3 | */
4 | .cc-1 { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; }
5 | .cc-2 { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }
6 | .cc-3 { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; }
7 | .cc-4 { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; }
8 | .cc-5 { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; }
9 | .cc-6 { -webkit-column-count: 6; -moz-column-count: 6; column-count: 6; }
10 | .cc-7 { -webkit-column-count: 7; -moz-column-count: 7; column-count: 7; }
11 | .cc-8 { -webkit-column-count: 8; -moz-column-count: 8; column-count: 8; }
12 | .cc-9 { -webkit-column-count: 9; -moz-column-count: 9; column-count: 9; }
13 | .cc-10 { -webkit-column-count: 10; -moz-column-count: 10; column-count: 10; }
14 | .cc-11 { -webkit-column-count: 11; -moz-column-count: 11; column-count: 11; }
15 | .cc-12 { -webkit-column-count: 12; -moz-column-count: 12; column-count: 12; }
16 | .cc-13 { -webkit-column-count: 13; -moz-column-count: 13; column-count: 13; }
17 | .cc-14 { -webkit-column-count: 14; -moz-column-count: 14; column-count: 14; }
18 | .cc-15 { -webkit-column-count: 15; -moz-column-count: 15; column-count: 15; }
19 | .cc-16 { -webkit-column-count: 16; -moz-column-count: 16; column-count: 16; }
20 | .cc-auto { -webkit-column-count: auto; -moz-column-count: auto; column-count: auto; }
21 | @media screen and (min-width: 48em) {
22 | .cc-1-ns { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; }
23 | .cc-2-ns { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }
24 | .cc-3-ns { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; }
25 | .cc-4-ns { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; }
26 | .cc-5-ns { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; }
27 | .cc-6-ns { -webkit-column-count: 6; -moz-column-count: 6; column-count: 6; }
28 | .cc-7-ns { -webkit-column-count: 7; -moz-column-count: 7; column-count: 7; }
29 | .cc-8-ns { -webkit-column-count: 8; -moz-column-count: 8; column-count: 8; }
30 | .cc-9-ns { -webkit-column-count: 9; -moz-column-count: 9; column-count: 9; }
31 | .cc-10-ns { -webkit-column-count: 10; -moz-column-count: 10; column-count: 10; }
32 | .cc-11-ns { -webkit-column-count: 11; -moz-column-count: 11; column-count: 11; }
33 | .cc-12-ns { -webkit-column-count: 12; -moz-column-count: 12; column-count: 12; }
34 | .cc-13-ns { -webkit-column-count: 13; -moz-column-count: 13; column-count: 13; }
35 | .cc-14-ns { -webkit-column-count: 14; -moz-column-count: 14; column-count: 14; }
36 | .cc-15-ns { -webkit-column-count: 15; -moz-column-count: 15; column-count: 15; }
37 | .cc-16-ns { -webkit-column-count: 16; -moz-column-count: 16; column-count: 16; }
38 | .cc-auto-ns { -webkit-column-count: auto; -moz-column-count: auto; column-count: auto; }
39 | }
40 | @media screen and (min-width:48em) and (max-width: 64em) {
41 | .cc-1-m { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; }
42 | .cc-2-m { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }
43 | .cc-3-m { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; }
44 | .cc-4-m { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; }
45 | .cc-5-m { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; }
46 | .cc-6-m { -webkit-column-count: 6; -moz-column-count: 6; column-count: 6; }
47 | .cc-7-m { -webkit-column-count: 7; -moz-column-count: 7; column-count: 7; }
48 | .cc-8-m { -webkit-column-count: 8; -moz-column-count: 8; column-count: 8; }
49 | .cc-9-m { -webkit-column-count: 9; -moz-column-count: 9; column-count: 9; }
50 | .cc-10-m { -webkit-column-count: 10; -moz-column-count: 10; column-count: 10; }
51 | .cc-11-m { -webkit-column-count: 11; -moz-column-count: 11; column-count: 11; }
52 | .cc-12-m { -webkit-column-count: 12; -moz-column-count: 12; column-count: 12; }
53 | .cc-13-m { -webkit-column-count: 13; -moz-column-count: 13; column-count: 13; }
54 | .cc-14-m { -webkit-column-count: 14; -moz-column-count: 14; column-count: 14; }
55 | .cc-15-m { -webkit-column-count: 15; -moz-column-count: 15; column-count: 15; }
56 | .cc-16-m { -webkit-column-count: 16; -moz-column-count: 16; column-count: 16; }
57 | .cc-auto-m { -webkit-column-count: auto; -moz-column-count: auto; column-count: auto; }
58 | }
59 | @media screen and (min-width: 64em) {
60 | .cc-1-l { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; }
61 | .cc-2-l { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }
62 | .cc-3-l { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; }
63 | .cc-4-l { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; }
64 | .cc-5-l { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; }
65 | .cc-6-l { -webkit-column-count: 6; -moz-column-count: 6; column-count: 6; }
66 | .cc-7-l { -webkit-column-count: 7; -moz-column-count: 7; column-count: 7; }
67 | .cc-8-l { -webkit-column-count: 8; -moz-column-count: 8; column-count: 8; }
68 | .cc-9-l { -webkit-column-count: 9; -moz-column-count: 9; column-count: 9; }
69 | .cc-10-l { -webkit-column-count: 10; -moz-column-count: 10; column-count: 10; }
70 | .cc-11-l { -webkit-column-count: 11; -moz-column-count: 11; column-count: 11; }
71 | .cc-12-l { -webkit-column-count: 12; -moz-column-count: 12; column-count: 12; }
72 | .cc-13-l { -webkit-column-count: 13; -moz-column-count: 13; column-count: 13; }
73 | .cc-14-l { -webkit-column-count: 14; -moz-column-count: 14; column-count: 14; }
74 | .cc-15-l { -webkit-column-count: 15; -moz-column-count: 15; column-count: 15; }
75 | .cc-16-l { -webkit-column-count: 16; -moz-column-count: 16; column-count: 16; }
76 | .cc-auto-l { -webkit-column-count: auto; -moz-column-count: auto; column-count: auto; }
77 | }
78 |
79 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # css-column-count 1.0.6
2 |
3 | Css module of single purpose classes for column count
4 |
5 | #### Stats
6 |
7 | 540 | 68 | 204
8 | ---|---|---
9 | bytes | selectors | declarations
10 |
11 | ## Installation
12 |
13 | #### With [npm](https://npmjs.com)
14 |
15 | ```
16 | npm install --save-dev css-column-count
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-count
28 | ```
29 |
30 | ssh:
31 | ```
32 | git clone git@github.com:tachyons-css/css-column-count.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-count";
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 COUNT
79 | */
80 | .cc-1 { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; }
81 | .cc-2 { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }
82 | .cc-3 { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; }
83 | .cc-4 { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; }
84 | .cc-5 { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; }
85 | .cc-6 { -webkit-column-count: 6; -moz-column-count: 6; column-count: 6; }
86 | .cc-7 { -webkit-column-count: 7; -moz-column-count: 7; column-count: 7; }
87 | .cc-8 { -webkit-column-count: 8; -moz-column-count: 8; column-count: 8; }
88 | .cc-9 { -webkit-column-count: 9; -moz-column-count: 9; column-count: 9; }
89 | .cc-10 { -webkit-column-count: 10; -moz-column-count: 10; column-count: 10; }
90 | .cc-11 { -webkit-column-count: 11; -moz-column-count: 11; column-count: 11; }
91 | .cc-12 { -webkit-column-count: 12; -moz-column-count: 12; column-count: 12; }
92 | .cc-13 { -webkit-column-count: 13; -moz-column-count: 13; column-count: 13; }
93 | .cc-14 { -webkit-column-count: 14; -moz-column-count: 14; column-count: 14; }
94 | .cc-15 { -webkit-column-count: 15; -moz-column-count: 15; column-count: 15; }
95 | .cc-16 { -webkit-column-count: 16; -moz-column-count: 16; column-count: 16; }
96 | .cc-auto { -webkit-column-count: auto; -moz-column-count: auto; column-count: auto; }
97 | @media screen and (min-width: 48em) {
98 | .cc-1-ns { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; }
99 | .cc-2-ns { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }
100 | .cc-3-ns { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; }
101 | .cc-4-ns { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; }
102 | .cc-5-ns { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; }
103 | .cc-6-ns { -webkit-column-count: 6; -moz-column-count: 6; column-count: 6; }
104 | .cc-7-ns { -webkit-column-count: 7; -moz-column-count: 7; column-count: 7; }
105 | .cc-8-ns { -webkit-column-count: 8; -moz-column-count: 8; column-count: 8; }
106 | .cc-9-ns { -webkit-column-count: 9; -moz-column-count: 9; column-count: 9; }
107 | .cc-10-ns { -webkit-column-count: 10; -moz-column-count: 10; column-count: 10; }
108 | .cc-11-ns { -webkit-column-count: 11; -moz-column-count: 11; column-count: 11; }
109 | .cc-12-ns { -webkit-column-count: 12; -moz-column-count: 12; column-count: 12; }
110 | .cc-13-ns { -webkit-column-count: 13; -moz-column-count: 13; column-count: 13; }
111 | .cc-14-ns { -webkit-column-count: 14; -moz-column-count: 14; column-count: 14; }
112 | .cc-15-ns { -webkit-column-count: 15; -moz-column-count: 15; column-count: 15; }
113 | .cc-16-ns { -webkit-column-count: 16; -moz-column-count: 16; column-count: 16; }
114 | .cc-auto-ns { -webkit-column-count: auto; -moz-column-count: auto; column-count: auto; }
115 | }
116 | @media screen and (min-width:48em) and (max-width: 64em) {
117 | .cc-1-m { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; }
118 | .cc-2-m { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }
119 | .cc-3-m { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; }
120 | .cc-4-m { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; }
121 | .cc-5-m { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; }
122 | .cc-6-m { -webkit-column-count: 6; -moz-column-count: 6; column-count: 6; }
123 | .cc-7-m { -webkit-column-count: 7; -moz-column-count: 7; column-count: 7; }
124 | .cc-8-m { -webkit-column-count: 8; -moz-column-count: 8; column-count: 8; }
125 | .cc-9-m { -webkit-column-count: 9; -moz-column-count: 9; column-count: 9; }
126 | .cc-10-m { -webkit-column-count: 10; -moz-column-count: 10; column-count: 10; }
127 | .cc-11-m { -webkit-column-count: 11; -moz-column-count: 11; column-count: 11; }
128 | .cc-12-m { -webkit-column-count: 12; -moz-column-count: 12; column-count: 12; }
129 | .cc-13-m { -webkit-column-count: 13; -moz-column-count: 13; column-count: 13; }
130 | .cc-14-m { -webkit-column-count: 14; -moz-column-count: 14; column-count: 14; }
131 | .cc-15-m { -webkit-column-count: 15; -moz-column-count: 15; column-count: 15; }
132 | .cc-16-m { -webkit-column-count: 16; -moz-column-count: 16; column-count: 16; }
133 | .cc-auto-m { -webkit-column-count: auto; -moz-column-count: auto; column-count: auto; }
134 | }
135 | @media screen and (min-width: 64em) {
136 | .cc-1-l { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; }
137 | .cc-2-l { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }
138 | .cc-3-l { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; }
139 | .cc-4-l { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; }
140 | .cc-5-l { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; }
141 | .cc-6-l { -webkit-column-count: 6; -moz-column-count: 6; column-count: 6; }
142 | .cc-7-l { -webkit-column-count: 7; -moz-column-count: 7; column-count: 7; }
143 | .cc-8-l { -webkit-column-count: 8; -moz-column-count: 8; column-count: 8; }
144 | .cc-9-l { -webkit-column-count: 9; -moz-column-count: 9; column-count: 9; }
145 | .cc-10-l { -webkit-column-count: 10; -moz-column-count: 10; column-count: 10; }
146 | .cc-11-l { -webkit-column-count: 11; -moz-column-count: 11; column-count: 11; }
147 | .cc-12-l { -webkit-column-count: 12; -moz-column-count: 12; column-count: 12; }
148 | .cc-13-l { -webkit-column-count: 13; -moz-column-count: 13; column-count: 13; }
149 | .cc-14-l { -webkit-column-count: 14; -moz-column-count: 14; column-count: 14; }
150 | .cc-15-l { -webkit-column-count: 15; -moz-column-count: 15; column-count: 15; }
151 | .cc-16-l { -webkit-column-count: 16; -moz-column-count: 16; column-count: 16; }
152 | .cc-auto-l { -webkit-column-count: auto; -moz-column-count: auto; column-count: auto; }
153 | }
154 | ```
155 |
156 | ## Contributing
157 |
158 | 1. Fork it
159 | 2. Create your feature branch (`git checkout -b my-new-feature`)
160 | 3. Commit your changes (`git commit -am 'Add some feature'`)
161 | 4. Push to the branch (`git push origin my-new-feature`)
162 | 5. Create new Pull Request
163 |
164 | ## Authors
165 |
166 | * [mrmrs](http://mrmrs.io)
167 | * [johno](http://johnotander.com)
168 |
169 | ## License
170 |
171 | ISC
172 |
173 |
--------------------------------------------------------------------------------