├── LICENSE
├── README.md
├── css
    ├── grid.css
    └── grid.min.css
└── package.json


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Responsive CSS Grid
 2 | 
 3 | [![NPM version](https://img.shields.io/npm/v/responsive-css-grid.svg?)](https://www.npmjs.com/package/responsive-css-grid)
 4 | 
 5 | A super-lightweight, responsive, 8-column grid based on `box-sizing`.
 6 | 
 7 | 
 8 | ## Getting Started
 9 | 
10 | You may install this plugin with this command:
11 | 
12 | ```shell
13 | npm install responsive-css-grid --save-dev
14 | ```
15 | 
16 | **Issues with the output should be reported on the `responsive-css-grid` [issue tracker](https://github.com/allthingssmitty/responsive-css-grid/issues).**
17 | 
18 | 
19 | ## Usage
20 | 
21 | ```html
22 | <div class="container">
23 | 
24 |   <div class="row">
25 |     <div class="col-2-3"> <!-- column is 2/3 the total width -->
26 |       Your content
27 |     </div>
28 |     <div class="col-1-3"> <!-- column is 1/3 the total width -->
29 |       Your content
30 |     </div>
31 |   </div>
32 | 
33 |   <div class="row">
34 |     <div class="col-1-4"> <!-- column is 1/4 the total width -->
35 |       Your content
36 |     </div>
37 |     <div class="col-1-2"> <!-- column is 1/2 the total width -->
38 |       Your content
39 |     </div>
40 |     <div class="col-1-4"> <!-- column is 1/4 the total width -->
41 |       Your content
42 |     </div>
43 |   </div>
44 | 
45 | </div>
46 | ```
47 | 
48 | 
49 | ## Live Example
50 | 
51 | [Responsive CSS grid](http://codepen.io/AllThingsSmitty/full/YqEbPB).
52 | 
53 | 
54 | ## Browser support
55 | 
56 | The responsive CSS grid works in the latest versions of:
57 | 
58 | * Chrome
59 | * Firefox
60 | * Opera
61 | * Safari
62 | * Edge
63 | * Internet Explorer
64 | * iOS Safari
65 | * Chrome for Android
66 | 
67 | The above list is non-exhaustive. This grid works perfectly with any browser that supports `box-sizing`, including IE8+.
68 | 
69 | 
70 | ## License
71 | 
72 | [The MIT License (MIT)](https://github.com/AllThingsSmitty/responsive-css-grid/blob/master/LICENSE)


--------------------------------------------------------------------------------
/css/grid.css:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Resets
 3 |  */
 4 | *,
 5 | *:before,
 6 | *:after {
 7 |   -webkit-box-sizing: border-box;
 8 |           box-sizing: border-box;
 9 |   -webkit-font-smoothing: antialiased;
10 |   -moz-osx-font-smoothing: grayscale;
11 |   margin: 0;
12 |   padding: 0;
13 |   text-rendering: optimizeLegibility;
14 | }
15 | 
16 | /**
17 |  * Global
18 |  */
19 | body {
20 |   color: #333;
21 |   font-family: -apple-system, 
22 |     BlinkMacSystemFont, 
23 |     "Segoe UI", 
24 |     Roboto, 
25 |     Oxygen-Sans, 
26 |     Ubuntu, 
27 |     Cantarell, 
28 |     "Helvetica Neue", 
29 |     sans-serif;
30 |   font-size: 100%;
31 |   line-height: 1.5;
32 | }
33 | 
34 | /**
35 |  * Grid
36 |  */
37 | .container {
38 |   background-color: #fff;
39 |   margin: 0 auto;
40 |   max-width: 100%;
41 |   padding: 1.25em;
42 | }
43 | 
44 | .row {
45 |   margin-bottom: 1.5em;
46 | }
47 | 
48 | .row:last-child {
49 |   margin-bottom: 0;
50 | }
51 | 
52 | .row:after {
53 |   clear: both;
54 |   content: "";
55 |   display: table;
56 | }
57 | 
58 | @supports (display: flow-root) {
59 |   .row {
60 |     display: flow-root;
61 |   }
62 | 
63 |   .row::after {
64 |     content: none;  
65 |   }
66 | }
67 | 
68 | div[class*="col-"] {
69 |   float: left;
70 |   padding: 0 .75em;
71 | }
72 | 
73 | @media all and (min-width: 37em) {
74 |   .col-2-3 {
75 |     width: 66.66%;
76 |   }
77 | 
78 |   .col-1-2 {
79 |     width: 50%;
80 |   }
81 | 
82 |   .col-1-3 {
83 |     width: 33.33%;
84 |   }
85 | 
86 |   .col-1-4 {
87 |     width: 25%;
88 |   }
89 | 
90 |   .col-1-8 {
91 |     width: 12.5%;
92 |   }
93 | }


--------------------------------------------------------------------------------
/css/grid.min.css:
--------------------------------------------------------------------------------
1 | *,:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0;text-rendering:optimizeLegibility}body{color:#333;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:100%;line-height:1.5}.container{background-color:#fff;margin:0 auto;max-width:100%;padding:1.25em}.row{margin-bottom:1.5em}.row:last-child{margin-bottom:0}.row:after{clear:both;content:"";display:table}@supports (display:flow-root){.row{display:flow-root}.row::after{content:none}}div[class*=col-]{float:left;padding:0 .75em}@media all and (min-width:37em){.col-2-3{width:66.66%}.col-1-2{width:50%}.col-1-3{width:33.33%}.col-1-4{width:25%}.col-1-8{width:12.5%}}


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "responsive-css-grid",
 3 |   "description": "A super-lightweight, responsive, 8-column grid based on box-sizing",
 4 |   "version": "1.0.6",
 5 |   "homepage": "https://github.com/allthingssmitty/responsive-css-grid",
 6 |   "author": "Matt Smith <matt@allthingssmitty.com> (http://allthingssmitty.com)",
 7 |   "maintainers": [
 8 |     "Matt Smith <matt@allthingssmitty.com> (http://allthingssmitty.com)"
 9 |   ],
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "git+https://github.com/AllThingsSmitty/responsive-css-grid.git"
13 |   },
14 |   "bugs": {
15 |     "url": "https://github.com/AllThingsSmitty/responsive-css-grid/issues"
16 |   },
17 |   "license": "MIT",
18 |   "keywords": [
19 |     "responsive",
20 |     "css",
21 |     "grid"
22 |   ]
23 | }


--------------------------------------------------------------------------------