├── .gitignore
├── index.html
├── LICENSE.txt
├── css
├── column-gap.css
├── column-gap.min.css
├── css-column-gap.min.css
└── css-column-gap.css
├── src
└── css-column-gap.css
├── package.json
└── 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 gap
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | npm install --save-dev css-column-gap
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 |
--------------------------------------------------------------------------------
/css/column-gap.css:
--------------------------------------------------------------------------------
1 | /*
2 | COLUMN GAP
3 | */
4 |
5 | .cg-1 { column-gap: 1rem; }
6 | .cg-2 { column-gap: 2rem; }
7 | .cg-3 { column-gap: 4rem; }
8 | .cg-n { column-gap: normal; }
9 | .cg-i { column-gap: inherit; }
10 |
11 | @media screen and (min-width: 48em) {
12 | .cg-1-ns { column-gap: 1rem; }
13 | .cg-2-ns { column-gap: 2rem; }
14 | .cg-3-ns { column-gap: 4rem; }
15 | .cg-n-ns { column-gap: normal; }
16 | .cg-i-ns { column-gap: inherit; }
17 | }
18 |
19 | @media screen and (min-width:48em) and (max-width: 64em) {
20 | .cg-1-m { column-gap: 1rem; }
21 | .cg-2-m { column-gap: 2rem; }
22 | .cg-3-m { column-gap: 4rem; }
23 | .cg-n-m { column-gap: normal; }
24 | .cg-i-m { column-gap: inherit; }
25 | }
26 |
27 | @media screen and (min-width: 64em) {
28 | .cg-1-l { column-gap: 1rem; }
29 | .cg-2-l { column-gap: 2rem; }
30 | .cg-3-l { column-gap: 4rem; }
31 | .cg-n-l { column-gap: normal; }
32 | .cg-i-l { column-gap: inherit; }
33 | }
34 |
35 |
--------------------------------------------------------------------------------
/css/column-gap.min.css:
--------------------------------------------------------------------------------
1 | /*
2 | COLUMN GAP
3 | */
4 |
5 | .cg-1 { column-gap: 1rem; }
6 | .cg-2 { column-gap: 2rem; }
7 | .cg-3 { column-gap: 4rem; }
8 | .cg-n { column-gap: normal; }
9 | .cg-i { column-gap: inherit; }
10 |
11 | @media screen and (min-width: 48em) {
12 | .cg-1-ns { column-gap: 1rem; }
13 | .cg-2-ns { column-gap: 2rem; }
14 | .cg-3-ns { column-gap: 4rem; }
15 | .cg-n-ns { column-gap: normal; }
16 | .cg-i-ns { column-gap: inherit; }
17 | }
18 |
19 | @media screen and (min-width:48em) and (max-width: 64em) {
20 | .cg-1-m { column-gap: 1rem; }
21 | .cg-2-m { column-gap: 2rem; }
22 | .cg-3-m { column-gap: 4rem; }
23 | .cg-n-m { column-gap: normal; }
24 | .cg-i-m { column-gap: inherit; }
25 | }
26 |
27 | @media screen and (min-width: 64em) {
28 | .cg-1-l { column-gap: 1rem; }
29 | .cg-2-l { column-gap: 2rem; }
30 | .cg-3-l { column-gap: 4rem; }
31 | .cg-n-l { column-gap: normal; }
32 | .cg-i-l { column-gap: inherit; }
33 | }
34 |
35 |
--------------------------------------------------------------------------------
/src/css-column-gap.css:
--------------------------------------------------------------------------------
1 | /*
2 | COLUMN GAP
3 | */
4 |
5 | .cg-1 { column-gap: 1rem; }
6 | .cg-2 { column-gap: 2rem; }
7 | .cg-3 { column-gap: 4rem; }
8 | .cg-n { column-gap: normal; }
9 | .cg-i { column-gap: inherit; }
10 |
11 | @media screen and (min-width: 48em) {
12 | .cg-1-ns { column-gap: 1rem; }
13 | .cg-2-ns { column-gap: 2rem; }
14 | .cg-3-ns { column-gap: 4rem; }
15 | .cg-n-ns { column-gap: normal; }
16 | .cg-i-ns { column-gap: inherit; }
17 | }
18 |
19 | @media screen and (min-width:48em) and (max-width: 64em) {
20 | .cg-1-m { column-gap: 1rem; }
21 | .cg-2-m { column-gap: 2rem; }
22 | .cg-3-m { column-gap: 4rem; }
23 | .cg-n-m { column-gap: normal; }
24 | .cg-i-m { column-gap: inherit; }
25 | }
26 |
27 | @media screen and (min-width: 64em) {
28 | .cg-1-l { column-gap: 1rem; }
29 | .cg-2-l { column-gap: 2rem; }
30 | .cg-3-l { column-gap: 4rem; }
31 | .cg-n-l { column-gap: normal; }
32 | .cg-i-l { column-gap: inherit; }
33 | }
34 |
35 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "css-column-gap",
3 | "style": "column-gap.css",
4 | "version": "1.0.8",
5 | "homepage": "http://github.com/mrmrs/css-column-gap",
6 | "description": "Css module of single purpose classes for column gap",
7 | "keywords": [
8 | "css",
9 | "oocss",
10 | "column-gap"
11 | ],
12 | "css-column-gap": {
13 | "type": "git",
14 | "url": "http://github.com/mrmrs/css-column-gap.git"
15 | },
16 | "bugs": {
17 | "url": "https://github.com/mrmrs/css-column-gap/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-gap.css > css/css-column-gap.css && tachyons src/css-column-gap.css --minify > css/css-column-gap.min.css && tachyons src/css-column-gap.css --generate-docs --package=../../package.json > readme.md"
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/css/css-column-gap.min.css:
--------------------------------------------------------------------------------
1 | .cg-1{-webkit-column-gap:1rem;-moz-column-gap:1rem;column-gap:1rem}.cg-2{-webkit-column-gap:2rem;-moz-column-gap:2rem;column-gap:2rem}.cg-3{-webkit-column-gap:4rem;-moz-column-gap:4rem;column-gap:4rem}.cg-n{-webkit-column-gap:normal;-moz-column-gap:normal;column-gap:normal}.cg-i{-webkit-column-gap:inherit;-moz-column-gap:inherit;column-gap:inherit}@media screen and (min-width:48em){.cg-1-ns{-webkit-column-gap:1rem;-moz-column-gap:1rem;column-gap:1rem}.cg-2-ns{-webkit-column-gap:2rem;-moz-column-gap:2rem;column-gap:2rem}.cg-3-ns{-webkit-column-gap:4rem;-moz-column-gap:4rem;column-gap:4rem}.cg-n-ns{-webkit-column-gap:normal;-moz-column-gap:normal;column-gap:normal}.cg-i-ns{-webkit-column-gap:inherit;-moz-column-gap:inherit;column-gap:inherit}}@media screen and (min-width:48em) and (max-width:64em){.cg-1-m{-webkit-column-gap:1rem;-moz-column-gap:1rem;column-gap:1rem}.cg-2-m{-webkit-column-gap:2rem;-moz-column-gap:2rem;column-gap:2rem}.cg-3-m{-webkit-column-gap:4rem;-moz-column-gap:4rem;column-gap:4rem}.cg-n-m{-webkit-column-gap:normal;-moz-column-gap:normal;column-gap:normal}.cg-i-m{-webkit-column-gap:inherit;-moz-column-gap:inherit;column-gap:inherit}}@media screen and (min-width:64em){.cg-1-l{-webkit-column-gap:1rem;-moz-column-gap:1rem;column-gap:1rem}.cg-2-l{-webkit-column-gap:2rem;-moz-column-gap:2rem;column-gap:2rem}.cg-3-l{-webkit-column-gap:4rem;-moz-column-gap:4rem;column-gap:4rem}.cg-n-l{-webkit-column-gap:normal;-moz-column-gap:normal;column-gap:normal}.cg-i-l{-webkit-column-gap:inherit;-moz-column-gap:inherit;column-gap:inherit}}
2 |
3 |
--------------------------------------------------------------------------------
/css/css-column-gap.css:
--------------------------------------------------------------------------------
1 | /*
2 | COLUMN GAP
3 | */
4 | .cg-1 { -webkit-column-gap: 1rem; -moz-column-gap: 1rem; column-gap: 1rem; }
5 | .cg-2 { -webkit-column-gap: 2rem; -moz-column-gap: 2rem; column-gap: 2rem; }
6 | .cg-3 { -webkit-column-gap: 4rem; -moz-column-gap: 4rem; column-gap: 4rem; }
7 | .cg-n { -webkit-column-gap: normal; -moz-column-gap: normal; column-gap: normal; }
8 | .cg-i { -webkit-column-gap: inherit; -moz-column-gap: inherit; column-gap: inherit; }
9 | @media screen and (min-width: 48em) {
10 | .cg-1-ns { -webkit-column-gap: 1rem; -moz-column-gap: 1rem; column-gap: 1rem; }
11 | .cg-2-ns { -webkit-column-gap: 2rem; -moz-column-gap: 2rem; column-gap: 2rem; }
12 | .cg-3-ns { -webkit-column-gap: 4rem; -moz-column-gap: 4rem; column-gap: 4rem; }
13 | .cg-n-ns { -webkit-column-gap: normal; -moz-column-gap: normal; column-gap: normal; }
14 | .cg-i-ns { -webkit-column-gap: inherit; -moz-column-gap: inherit; column-gap: inherit; }
15 | }
16 | @media screen and (min-width:48em) and (max-width: 64em) {
17 | .cg-1-m { -webkit-column-gap: 1rem; -moz-column-gap: 1rem; column-gap: 1rem; }
18 | .cg-2-m { -webkit-column-gap: 2rem; -moz-column-gap: 2rem; column-gap: 2rem; }
19 | .cg-3-m { -webkit-column-gap: 4rem; -moz-column-gap: 4rem; column-gap: 4rem; }
20 | .cg-n-m { -webkit-column-gap: normal; -moz-column-gap: normal; column-gap: normal; }
21 | .cg-i-m { -webkit-column-gap: inherit; -moz-column-gap: inherit; column-gap: inherit; }
22 | }
23 | @media screen and (min-width: 64em) {
24 | .cg-1-l { -webkit-column-gap: 1rem; -moz-column-gap: 1rem; column-gap: 1rem; }
25 | .cg-2-l { -webkit-column-gap: 2rem; -moz-column-gap: 2rem; column-gap: 2rem; }
26 | .cg-3-l { -webkit-column-gap: 4rem; -moz-column-gap: 4rem; column-gap: 4rem; }
27 | .cg-n-l { -webkit-column-gap: normal; -moz-column-gap: normal; column-gap: normal; }
28 | .cg-i-l { -webkit-column-gap: inherit; -moz-column-gap: inherit; column-gap: inherit; }
29 | }
30 |
31 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # css-column-gap 1.0.6
2 |
3 | Css module of single purpose classes for column gap
4 |
5 | #### Stats
6 |
7 | 262 | 20 | 60
8 | ---|---|---
9 | bytes | selectors | declarations
10 |
11 | ## Installation
12 |
13 | #### With [npm](https://npmjs.com)
14 |
15 | ```
16 | npm install --save-dev css-column-gap
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-gap
28 | ```
29 |
30 | ssh:
31 | ```
32 | git clone git@github.com:tachyons-css/css-column-gap.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-gap";
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 GAP
79 | */
80 | .cg-1 { -webkit-column-gap: 1rem; -moz-column-gap: 1rem; column-gap: 1rem; }
81 | .cg-2 { -webkit-column-gap: 2rem; -moz-column-gap: 2rem; column-gap: 2rem; }
82 | .cg-3 { -webkit-column-gap: 4rem; -moz-column-gap: 4rem; column-gap: 4rem; }
83 | .cg-n { -webkit-column-gap: normal; -moz-column-gap: normal; column-gap: normal; }
84 | .cg-i { -webkit-column-gap: inherit; -moz-column-gap: inherit; column-gap: inherit; }
85 | @media screen and (min-width: 48em) {
86 | .cg-1-ns { -webkit-column-gap: 1rem; -moz-column-gap: 1rem; column-gap: 1rem; }
87 | .cg-2-ns { -webkit-column-gap: 2rem; -moz-column-gap: 2rem; column-gap: 2rem; }
88 | .cg-3-ns { -webkit-column-gap: 4rem; -moz-column-gap: 4rem; column-gap: 4rem; }
89 | .cg-n-ns { -webkit-column-gap: normal; -moz-column-gap: normal; column-gap: normal; }
90 | .cg-i-ns { -webkit-column-gap: inherit; -moz-column-gap: inherit; column-gap: inherit; }
91 | }
92 | @media screen and (min-width:48em) and (max-width: 64em) {
93 | .cg-1-m { -webkit-column-gap: 1rem; -moz-column-gap: 1rem; column-gap: 1rem; }
94 | .cg-2-m { -webkit-column-gap: 2rem; -moz-column-gap: 2rem; column-gap: 2rem; }
95 | .cg-3-m { -webkit-column-gap: 4rem; -moz-column-gap: 4rem; column-gap: 4rem; }
96 | .cg-n-m { -webkit-column-gap: normal; -moz-column-gap: normal; column-gap: normal; }
97 | .cg-i-m { -webkit-column-gap: inherit; -moz-column-gap: inherit; column-gap: inherit; }
98 | }
99 | @media screen and (min-width: 64em) {
100 | .cg-1-l { -webkit-column-gap: 1rem; -moz-column-gap: 1rem; column-gap: 1rem; }
101 | .cg-2-l { -webkit-column-gap: 2rem; -moz-column-gap: 2rem; column-gap: 2rem; }
102 | .cg-3-l { -webkit-column-gap: 4rem; -moz-column-gap: 4rem; column-gap: 4rem; }
103 | .cg-n-l { -webkit-column-gap: normal; -moz-column-gap: normal; column-gap: normal; }
104 | .cg-i-l { -webkit-column-gap: inherit; -moz-column-gap: inherit; column-gap: inherit; }
105 | }
106 | ```
107 |
108 | ## Contributing
109 |
110 | 1. Fork it
111 | 2. Create your feature branch (`git checkout -b my-new-feature`)
112 | 3. Commit your changes (`git commit -am 'Add some feature'`)
113 | 4. Push to the branch (`git push origin my-new-feature`)
114 | 5. Create new Pull Request
115 |
116 | ## Authors
117 |
118 | * [mrmrs](http://mrmrs.io)
119 | * [johno](http://johnotander.com)
120 |
121 | ## License
122 |
123 | ISC
124 |
125 |
--------------------------------------------------------------------------------