├── css ├── css-grid.min.css ├── css-grid.css ├── grid.css └── grid.min.css ├── src └── css-grid.css ├── .gitignore ├── LICENSE.txt ├── package.json ├── README.md └── compositor.json /css/css-grid.min.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /css/css-grid.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: 48em) { } 2 | @media screen and (min-width:48em) and (max-width: 64em) { } 3 | @media screen and (min-width: 64em) { } 4 | 5 | -------------------------------------------------------------------------------- /css/grid.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: 48em) { 2 | 3 | } 4 | 5 | @media screen and (min-width:48em) and (max-width: 64em) { 6 | 7 | } 8 | 9 | @media screen and (min-width: 64em) { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /css/grid.min.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: 48em) { 2 | 3 | } 4 | 5 | @media screen and (min-width:48em) and (max-width: 64em) { 6 | 7 | } 8 | 9 | @media screen and (min-width: 64em) { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /src/css-grid.css: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: 48em) { 2 | 3 | } 4 | 5 | @media screen and (min-width:48em) and (max-width: 64em) { 6 | 7 | } 8 | 9 | @media screen and (min-width: 64em) { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /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-grid", 3 | "style": "grid.css", 4 | "version": "1.0.8", 5 | "homepage": "http://github.com/mrmrs/css-grid", 6 | "description": "Css module of single purpose classes for grid", 7 | "keywords": [ 8 | "css", 9 | "oocss", 10 | "grid" 11 | ], 12 | "css-grid": { 13 | "type": "git", 14 | "url": "http://github.com/mrmrs/css-grid.git" 15 | }, 16 | "bugs": { 17 | "url": "https://github.com/mrmrs/css-grid/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-grid.css > css/css-grid.css && tachyons src/css-grid.css --minify > css/css-grid.min.css && tachyons src/css-grid.css --generate-docs --package=../../package.json > readme.md" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # css-grid 1.0.6 2 | 3 | Css module of single purpose classes for grid 4 | 5 | #### Stats 6 | 7 | 77 | 0 | 0 8 | ---|---|--- 9 | bytes | selectors | declarations 10 | 11 | ## Installation 12 | 13 | #### With [npm](https://npmjs.com) 14 | 15 | ``` 16 | npm install --save-dev css-grid 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-grid 28 | ``` 29 | 30 | ssh: 31 | ``` 32 | git clone git@github.com:tachyons-css/css-grid.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-grid"; 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 | @media screen and (min-width: 48em) { } 78 | @media screen and (min-width:48em) and (max-width: 64em) { } 79 | @media screen and (min-width: 64em) { } 80 | ``` 81 | 82 | ## Contributing 83 | 84 | 1. Fork it 85 | 2. Create your feature branch (`git checkout -b my-new-feature`) 86 | 3. Commit your changes (`git commit -am 'Add some feature'`) 87 | 4. Push to the branch (`git push origin my-new-feature`) 88 | 5. Create new Pull Request 89 | 90 | ## Authors 91 | 92 | * [mrmrs](http://mrmrs.io) 93 | * [johno](http://johnotander.com) 94 | 95 | ## License 96 | 97 | ISC 98 | 99 | -------------------------------------------------------------------------------- /compositor.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mrmrs/css-grid", 3 | "version": "0.1.4", 4 | "libraries": { 5 | "xv": "^1.1.25" 6 | }, 7 | "title": "Css Grid", 8 | "branch": "", 9 | "style": { 10 | "name": "Future", 11 | "componentSet": { 12 | "nav": "nav/BasicNav", 13 | "header": "header/BannerHeader", 14 | "article": "article/BasicArticle", 15 | "footer": "footer/BasicFooter" 16 | }, 17 | "fontFamily": "\"Avenir Next\", Helvetica, sans-serif", 18 | "heading": { 19 | "fontWeight": 500, 20 | "textTransform": "uppercase", 21 | "letterSpacing": "0.2em" 22 | }, 23 | "alternativeText": { 24 | "textTransform": "uppercase", 25 | "fontWeight": 400, 26 | "letterSpacing": "0.2em", 27 | "opacity": 0.75 28 | }, 29 | "colors": { 30 | "text": "#333", 31 | "background": "#fff", 32 | "primary": "#666", 33 | "secondary": "#888", 34 | "highlight": "#1f80ff", 35 | "muted": "#f6f6f6", 36 | "border": "#eee" 37 | }, 38 | "layout": { 39 | "centered": true, 40 | "maxWidth": 1024, 41 | "bannerHeight": "80vh" 42 | } 43 | }, 44 | "content": [ 45 | { 46 | "component": "nav", 47 | "links": [ 48 | { 49 | "href": "https://www.npmjs.com/package/css-grid", 50 | "text": "Home" 51 | }, 52 | { 53 | "href": "https://github.com/mrmrs/css-grid", 54 | "text": "GitHub" 55 | }, 56 | { 57 | "href": "https://npmjs.com/package/css-grid", 58 | "text": "npm" 59 | } 60 | ] 61 | }, 62 | { 63 | "component": "header", 64 | "heading": "Grid", 65 | "subhead": "Functional css for css grid", 66 | "children": [ 67 | { 68 | "component": "ui/TweetButton", 69 | "text": "css-grid: CSS module for CSS grid", 70 | "url": "https://www.npmjs.com/package/css-grid" 71 | }, 72 | { 73 | "component": "ui/GithubButton", 74 | "user": "mrmrs", 75 | "repo": "css-grid" 76 | } 77 | ], 78 | "text": "v1.0.6", 79 | "backgroundImage": "http://mrmrs.io/photos/u/017.jpg", 80 | "image": "", 81 | "slug": "" 82 | }, 83 | { 84 | "component": "article", 85 | "metadata": { 86 | "source": "github.readme" 87 | }, 88 | "html": "

css-grid 1.0.6

\n

Css module of single purpose classes for grid

\n

Stats

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
7700
bytesselectorsdeclarations
\n

Installation

\n

With npm

\n
npm install --save-dev css-grid

Learn more about using css installed with npm:

\n\n

With Git

\n

http:

\n
git clone https://github.com/tachyons-css/css-grid

ssh:

\n
git clone git@github.com:tachyons-css/css-grid.git

Usage

\n

Using with Postcss

\n

Import the css module

\n
@import "css-grid";

Then process the css using the tachyons-cli

\n
$ npm i -g tachyons-cli\n$ tachyons path/to/css-file.css > dist/t.css

Using the css

\n
CDN
\n

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:

\n
<link rel="stylesheet" href="http://unpkg.com/css-grid@1.0.6/css/css-grid.min.css" />
Locally
\n

The built css is located in the css directory. It contains an unminified and minified version.\nYou can either cut and paste that css or link to it directly in your html.

\n
<link rel="stylesheet" href="path/to/module/css/css-grid">

Development

\n

The source css files can be found in the src directory.\nRunning $ npm start will process the source css and place the built css in the css directory.

\n

The css

\n
@media screen and (min-width: 48em) { }\n@media screen and (min-width:48em) and (max-width: 64em) { }\n@media screen and (min-width: 64em) { }

Contributing

\n
    \n
  1. Fork it
    2. \n
  2. Create your feature branch (git checkout -b my-new-feature)
    3. \n
  3. Commit your changes (git commit -am 'Add some feature')
    4. \n
  4. Push to the branch (git push origin my-new-feature)
    5. \n
  5. Create new Pull Request
    6. \n
\n

Authors

\n\n

License

\n

ISC

\n" 89 | } 90 | ] 91 | } --------------------------------------------------------------------------------