├── .gitignore
├── LICENSE
├── README.md
├── grid.css
├── grid.min.css
├── index.html
├── infinity.svg
├── logo.png
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
 1 | # General
 2 | .DS_Store
 3 | 
 4 | # Logs
 5 | logs
 6 | *.log
 7 | npm-debug.log*
 8 | yarn-debug.log*
 9 | yarn-error.log*
10 | 
11 | # Runtime data
12 | pids
13 | *.pid
14 | *.seed
15 | *.pid.lock
16 | 
17 | # Directory for instrumented libs generated by jscoverage/JSCover
18 | lib-cov
19 | 
20 | # Coverage directory used by tools like istanbul
21 | coverage
22 | 
23 | # nyc test coverage
24 | .nyc_output
25 | 
26 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
27 | .grunt
28 | 
29 | # Bower dependency directory (https://bower.io/)
30 | bower_components
31 | 
32 | # node-waf configuration
33 | .lock-wscript
34 | 
35 | # Compiled binary addons (https://nodejs.org/api/addons.html)
36 | build/Release
37 | 
38 | # Dependency directories
39 | node_modules/
40 | jspm_packages/
41 | 
42 | # TypeScript v1 declaration files
43 | typings/
44 | 
45 | # Optional npm cache directory
46 | .npm
47 | 
48 | # Optional eslint cache
49 | .eslintcache
50 | 
51 | # Optional REPL history
52 | .node_repl_history
53 | 
54 | # Output of 'npm pack'
55 | *.tgz
56 | 
57 | # Yarn Integrity file
58 | .yarn-integrity
59 | 
60 | # dotenv environment variables file
61 | .env
62 | 
63 | # next.js build output
64 | .next
65 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Vladimir Carrer
 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 | [![Gzip Size](https://img.badgesize.io/https://unpkg.com/infinity-css-grid@1.0.1/grid.min.css?compression=gzip)](https://unpkg.com/infinity-css-grid@1.0.1/grid.min.css)
 2 | 
 3 | <p align="center"><img src="logo.png" /></p>
 4 | 
 5 | <h1 align="center"> Infinity CSS Grid </h1>
 6 | 
 7 | <p align="center"> Ultra minimal fluid Flex Grid. </p>
 8 | 
 9 | <hr/>
10 | 
11 | 
12 | <p> Infinity CSS Grid is around 0,1 Kb CSS for making any number of columns. </p>
13 | 
14 | 
15 | <p> Just add any number of .column in the .row: </p>
16 | 
17 | ```html
18 | // For 3 columns:
19 | 
20 | <div class="row">
21 |   <div class="column">1</div>
22 |   <div class="column">1</div>
23 |   <div class="column">1</div>
24 | </div>
25 | ```
26 | 
27 | <p>The CSS code is based on this: </p>
28 | 
29 | ```css
30 | .row{display: flex; flex-flow: row wrap}
31 | 
32 | .column{flex:1}
33 | ```
34 | 
35 | You can make tests here: https://vladocar.github.io/infinity-css-grid/demo1.html
36 | 
37 | <h3>Installation </h3>
38 | 
39 | <p>Just simply download the project or: </p>
40 | 
41 | 
42 | ```shell
43 | $ npm i infinity-css-grid
44 | ```
45 | 
46 | ```html
47 | <link rel="stylesheet" href="https://unpkg.com/infinity-css-grid@1.0.3/grid.css">
48 | ```
49 | 
50 | <h3>Demo:</h3>
51 | 
52 | https://vladocar.github.io/infinity-css-grid/
53 | 
54 | <h3>License</h3>
55 | 
56 | This project is licensed under the MIT License
57 | 


--------------------------------------------------------------------------------
/grid.css:
--------------------------------------------------------------------------------
 1 | .row{display: flex; flex-flow: row wrap}
 2 | 
 3 | .column{flex:1}
 4 | 
 5 | .merge2{flex:2}
 6 | .merge3{flex:3}
 7 | .merge4{flex:4}
 8 | /* add more .merge classes if you need to */
 9 | 
10 | .row,.merge2,.merge3,.merge4 {margin:0 8px} /* optional gutter */
11 | 
12 | 
13 | .nested{padding:0 !important; margin:0 !important; border: 0 !important}
14 | 


--------------------------------------------------------------------------------
/grid.min.css:
--------------------------------------------------------------------------------
1 | .row{display:flex;flex-flow:row wrap}.column{flex:1}.merge2{flex:2}.merge3{flex:3}.merge4{flex:4}.row,.merge2,.merge3,.merge4{margin:0 8px}.nested{padding:0!important;margin:0!important;border:0!important}
2 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  5 |     <link rel="stylesheet" href="grid.css" />
  6 | 
  7 |     <title>Infinity CSS Grid</title>
  8 |     <style>
  9 |       * {
 10 |         box-sizing: border-box;
 11 |       }
 12 | 
 13 |       body {
 14 |         margin: 0;
 15 |         font-size: 17px;
 16 |         background-color: #333;
 17 |         font-family: Helvetica, Arial, sans-serif;
 18 |       }
 19 |       h1 {
 20 |         font-size: 32px;
 21 |         font-family: 'HelveticaNeueThin', 'HelveticaNeue-Thin', 'Helvetica Neue Thin', Arial,
 22 |           sans-serif;
 23 |         font-weight: 200;
 24 |         font-stretch: normal;
 25 |       }
 26 |       a {
 27 |         color: #fff;
 28 |       }
 29 | 
 30 |       #main {
 31 |         margin: 0 auto;
 32 |         width: 80%;
 33 |         padding: 8px;
 34 |         background-color: #fff;
 35 |       }
 36 | 
 37 |       .column,
 38 |       .merge2,
 39 |       .merge3 {
 40 |         color: #fff;
 41 |         background-color: #00bbeb;
 42 |         padding: 15px;
 43 |         margin: 10px 8px 10px 8px;
 44 |         text-align: center;
 45 |       }
 46 |     </style>
 47 |   </head>
 48 | 
 49 |   <body>
 50 |     <div id="main">
 51 |       <div class="row">
 52 |         <div class="column" style="border:0; background:none">
 53 |           <img src="infinity.svg" style="width:600px" />
 54 |         </div>
 55 |       </div>
 56 | 
 57 |       <div class="row">
 58 |         <div class="column"><h1>Infinity CSS Grid</h1></div>
 59 |       </div>
 60 | 
 61 |       <div class="row">
 62 |         <div class="column"><p>Fluid Flex Solution for making infinite grid columns.</p></div>
 63 |       </div>
 64 | 
 65 |       <div class="row">
 66 |         <div class="column">50%</div>
 67 |         <div class="column">50%</div>
 68 |       </div>
 69 | 
 70 |       <div class="row">
 71 |         <div class="column">33,3%</div>
 72 |         <div class="column">33,3%</div>
 73 |         <div class="column">33,3%</div>
 74 |       </div>
 75 | 
 76 |       <div class="row">
 77 |         <div class="column">25%</div>
 78 |         <div class="column">25%</div>
 79 |         <div class="column">25%</div>
 80 |         <div class="column">25%</div>
 81 |       </div>
 82 | 
 83 |       <div class="row">
 84 |         <div class="column">20%</div>
 85 |         <div class="column">20%</div>
 86 |         <div class="column">20%</div>
 87 |         <div class="column">20%</div>
 88 |         <div class="column">20%</div>
 89 |       </div>
 90 | 
 91 |       <div class="row">
 92 |         <div class="column">16,66%</div>
 93 |         <div class="column">16,66%</div>
 94 |         <div class="column">16,66%</div>
 95 |         <div class="column">16,66%</div>
 96 |         <div class="column">16,66%</div>
 97 |         <div class="column">16,66%</div>
 98 |       </div>
 99 | 
100 |       <div class="row">
101 |         <div class="column">12,5%</div>
102 |         <div class="column">12,5%</div>
103 |         <div class="column">12,5%</div>
104 |         <div class="column">12,5%</div>
105 |         <div class="column">12,5%</div>
106 |         <div class="column">12,5%</div>
107 |         <div class="column">12,5%</div>
108 |         <div class="column">12,5%</div>
109 |       </div>
110 | 
111 |       <div class="row">
112 |         <div class="column">1</div>
113 |         <div class="column">1</div>
114 |         <div class="column">1</div>
115 |         <div class="merge3">Merge 3</div>
116 |         <div class="column">1</div>
117 |         <div class="column">1</div>
118 |         <div class="merge2">Merge 2</div>
119 |         <div class="column">1</div>
120 |       </div>
121 | 
122 |       <div class="row">
123 |         <div class="merge3">Merge 3 (take 3 places)</div>
124 |         <div class="column">1</div>
125 |         <div class="column">1</div>
126 |         <div class="column">1</div>
127 |       </div>
128 | 
129 |       <div class="row">
130 |         <div class="merge4 nested row">
131 |           <div class="column">Nested</div>
132 |           <div class="column">Nested</div>
133 |           <div class="column">Nested</div>
134 |         </div>
135 |         <div class="column">1</div>
136 |       </div>
137 | 
138 |       <div class="row">
139 |         <div class="column">Ultra minimal only 0.15 Kb</div>
140 |         <div class="column">Fluid</div>
141 |         <div class="column">Just add columns into the row container</div>
142 |       </div>
143 | 
144 |       <div class="row">
145 |         <div class="column">
146 |           <p>
147 |             You can add as many columns as you like. You can merge the columns or insert columns
148 |             inside columns. Everything is 0.1 Kb and even works in IE10.
149 |           </p>
150 |         </div>
151 |       </div>
152 | 
153 |       <div class="row">
154 |         <div class="column">
155 |           <p><a href="https://github.com/vladocar/infinity-css-grid/">Learn more on Github </a></p>
156 |         </div>
157 |       </div>
158 |     </div>
159 |   </body>
160 | </html>
161 | 


--------------------------------------------------------------------------------
/infinity.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 412.5 208" style="enable-background:new 0 0 412.5 208;" xml:space="preserve">
 5 | <style type="text/css">
 6 | 	.st0{display:none;}
 7 | 	.st1{display:inline;fill:#333333;}
 8 | 	.st2{display:inline;}
 9 | 	.st3{font-family:'MyriadPro-Regular';}
10 | 	.st4{font-size:572px;}
11 | 	.st5{fill:#EC008C;}
12 | 	.st6{fill:#00BBEB;}
13 | </style>
14 | <g id="Layer_3" class="st0">
15 | 	<rect id="XMLID_2_" x="-28" y="-10" class="st1" width="460" height="230"/>
16 | </g>
17 | <g id="Layer_1" class="st0">
18 | 	<text id="XMLID_1_" transform="matrix(1 0 0 1 -0.2827 254.6958)" class="st2 st3 st4">∞</text>
19 | </g>
20 | <g id="Layer_1_copy" class="st0">
21 | 	<g id="XMLID_3_" class="st2">
22 | 		<path id="XMLID_10_" class="st5" d="M312.1,19.3c-40.4,0-68.6,24.3-94.5,49.9c-2.3,2.2-2.2,5.9,0.1,8.1
23 | 			c4.4,4.2,10.9,10.6,15.1,14.8c2.2,2.2,5.8,2.2,8,0c19.3-19.3,42-38.5,69.1-38.5c28,0,48.6,21.2,48.6,50.3
24 | 			c0,26.9-21.7,50.3-50.3,50.3c-33.2,0-78.9-50.3-78.9-50.3l-24.7-25.3c0,0-58-59.4-99.4-59.4c-50.3,0-86.9,39.5-86.9,84.7
25 | 			c0,49.2,34.3,84.7,82.4,84.7c35,0,84-39.8,84-39.8l1.4-22.8l-24.5-0.3c0,0-35.7,28.7-58.6,28.7c-28,0-48.6-21.2-48.6-50.3
26 | 			c0-26.9,21.7-50.3,50.3-50.3c33.2,0,78.9,50.3,78.9,50.3l22.9,23.5c0,0,58.9,61.2,101.2,61.2c50.3,0,86.9-39.5,86.9-84.7
27 | 			C394.4,54.8,360.7,19.3,312.1,19.3z"/>
28 | 	</g>
29 | </g>
30 | <g id="Layer_1_copy_2">
31 | 	<g id="XMLID_4_">
32 | 		<path id="XMLID_5_" class="st6" d="M312.1,19.3c-40.4,0-68.6,24.3-94.5,49.9c-2.3,2.2-2.2,5.9,0.1,8.1
33 | 			c4.4,4.2,10.9,10.6,15.1,14.8c2.2,2.2,5.8,2.2,8,0c19.3-19.3,42-38.5,69.1-38.5c28,0,48.6,21.2,48.6,50.3
34 | 			c0,26.9-21.7,50.3-50.3,50.3c-33.2,0-78.9-50.3-78.9-50.3l-24.7-25.3c0,0-58-59.4-99.4-59.4c-50.3,0-86.9,39.5-86.9,84.7
35 | 			c0,49.2,34.3,84.7,82.4,84.7c35,0,84-39.8,84-39.8l1.4-22.8l-24.5-0.3c0,0-35.7,28.7-58.6,28.7c-28,0-48.6-21.2-48.6-50.3
36 | 			c0-26.9,21.7-50.3,50.3-50.3c33.2,0,78.9,50.3,78.9,50.3l22.9,23.5c0,0,58.9,61.2,101.2,61.2c50.3,0,86.9-39.5,86.9-84.7
37 | 			C394.4,54.8,360.7,19.3,312.1,19.3z"/>
38 | 	</g>
39 | </g>
40 | </svg>
41 | 


--------------------------------------------------------------------------------
/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vladocar/infinity-css-grid/d2046db37e97e5dc45b8906468b95abbb4252542/logo.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "infinity-css-grid",
 3 |   "version": "1.0.3",
 4 |   "description": "Ultra minimal fluid Flex Grid",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/vladocar/infinity-css-grid.git"
12 |   },
13 |   "keywords": [
14 |     "css",
15 |     "html",
16 |     "flex",
17 |     "css-layout",
18 |     "css-grid",
19 |     "css-framework"
20 |   ],
21 |   "author": "Vladimir Carrer <vladocar@gmail.com> (http://www.vcarrer.com)",
22 |   "license": "MIT",
23 |   "bugs": {
24 |     "url": "https://github.com/vladocar/infinity-css-grid/issues"
25 |   },
26 |   "homepage": "https://github.com/vladocar/infinity-css-grid#readme"
27 | }
28 | 


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