├── .gitignore
├── 12.psd
├── css
    ├── .DS_Store
    ├── style.css
    ├── rwdgrid.min.css
    └── rwdgrid.css
├── README.md
└── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | 


--------------------------------------------------------------------------------
/12.psd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gsvineeth/rwdgrid/HEAD/12.psd


--------------------------------------------------------------------------------
/css/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gsvineeth/rwdgrid/HEAD/css/.DS_Store


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
 1 | /* Ignore this stylesheet*/
 2 | 
 3 | p {
 4 |     background:#f5f5f5;
 5 |     font-family:sans-serif;
 6 |     font-size:85%;
 7 |     line-height:2em;
 8 |     font-weight: bold;
 9 |     color:#333;
10 |     padding:1em;
11 |     min-height:120px;
12 | }
13 | 
14 | 
15 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # rwdgrid - Responsive Grid System for your Next Project
 2 | 
 3 | www.rwdgrid.com 
 4 | 
 5 | www.rwdgrid.com/demo
 6 | 
 7 | rwdgrid is just another Grid system based on popular 960grid, which is responsive and ranges from mobile, tablet, laptops and 
 8 | wide screen displays. Naming convention is very similar to 960 grid system, where underscore is replaced by hyphen (increases readabilty).
 9 | rwdgrid is having different Grid system made for 1200px+, 1024px+, 720px+ and Mobile screens. 
10 | 
11 | This can be used as a base grid system that will help you to build responsive webdesign with your existing proficency over popular grid system
12 | 
13 | Sincere thanks to 960.gs,Html Shiv (HTML5 IE enabling script),
14 | css3 Mediaqueries js (Mediaqueries IE enabling script - Don't forget the existing web!),
15 | Html5 boilerplate and you! :)
16 | 
17 | rwdgrid is free to use and abuse under WTFPL
18 | 
19 | 
20 | 


--------------------------------------------------------------------------------
/css/rwdgrid.min.css:
--------------------------------------------------------------------------------
1 | *,:after,:before{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}[class*='grid-']{float:left;padding:10px;width:100%}.clear-grid{clear:both;float:inherit}.container{margin:0;width:100%}.container:after,.container:before{display:table;clear:both;content:" "}.nest{margin:0 -10px;padding:0;width:auto}.grid-m-12{width:100%}.grid-m-11{width:91.666663%}.grid-m-10{width:83.33%}.grid-m-9{width:74.999997%}.grid-m-8{width:66.66666664%}.grid-m-7{width:58.333%}.grid-m-6{width:50%}.grid-m-5{width:41.6665%}.grid-m-4{width:33.33%}.grid-m-3{width:24.99%}.grid-m-2{width:16.66666%}.grid-m-1{width:8.33%}@media (min-width: 720px){.grid-12{width:100%}.grid-11{width:91.666663%}.grid-10{width:83.33%}.grid-9{width:74.999997%}.grid-8{width:66.66666664%}.grid-7{width:58.333%}.grid-6{width:50%}.grid-5{width:41.6665%}.grid-4{width:33.33%}.grid-3{width:24.99%}.grid-2{width:16.66666%}.grid-1{width:8.33%}.grid-t-12{width:100%}.grid-t-11{width:91.666663%}.grid-t-10{width:83.33%}.grid-t-9{width:74.999997%}.grid-t-8{width:66.66666664%}.grid-t-7{width:58.333%}.grid-t-6{width:50%}.grid-t-5{width:41.6665%}.grid-t-4{width:33.33%}.grid-t-3{width:24.99%}.grid-t-2{width:16.66666%}.grid-t-1{width:8.33%}}@media only screen and (min-width: 1024px){.grid-tl-12{width:100%}.grid-tl-11{width:91.666663%}.grid-tl-10{width:83.33%}.grid-tl-9{width:74.999997%}.grid-tl-8{width:66.66666664%}.grid-tl-7{width:58.333%}.grid-tl-6{width:50%}.grid-tl-5{width:41.6665%}.grid-tl-4{width:33.33%}.grid-tl-3{width:24.99%}.grid-tl-2{width:16.66666%}.grid-tl-1{width:8.33%}}@media only screen and (min-width: 1200px){.container{max-width:1180px;margin:0 auto}.container-fluid{max-width:90%;margin:0 5%}.grid-d-12{width:100%}.grid-d-11{width:91.666663%}.grid-d-10{width:83.33%}.grid-d-9{width:74.999997%}.grid-d-8{width:66.66666664%}.grid-d-7{width:58.333%}.grid-d-6{width:50%}.grid-d-5{width:41.6665%}.grid-d-4{width:33.33%}.grid-d-3{width:24.99%}.grid-d-2{width:16.66666%}.grid-d-1{width:8.33%}}img.scale,img.responsive{max-width:100%;height:auto}
2 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
  3 | <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
  4 | <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
  5 | <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  6 | <head>
  7 |     <meta charset="utf-8">
  8 |     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  9 |     <title>Demo - rwdgrid.com</title>
 10 |     <meta name="description" content="Demo of Responsive Grid System - rwdgrid.com">
 11 |     <meta name="viewport" content="width=device-width">
 12 |     <link rel="stylesheet" href="css/rwdgrid.css">
 13 |     <link rel="stylesheet" href="css/style.css">
 14 |     <!--[if lt IE 9]>
 15 |     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
 16 |     <script src="http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
 17 |     <![endif]-->
 18 | </head>
 19 | <body>
 20 | <div class="container">
 21 |     <div class="grid-d-8 grid-t-8 grid-tl-4 grid-m-6"><p>grid-8-d(Desktop 8) <br>grid-tl-9(Tablet Landscape 9) <br>grid-t-3 (Tablet 3)   <br> grid-m-6(Mobile Devices 6)</p></div>
 22 |     <div class="grid-d-4 grid-t-4 grid-tl-8 grid-m-6"><p>grid-4-d(Desktop 4) <br>grid-tl-3(Tablet Landscape 3) <br>grid-t-9 (Tablet 9)   <br> grid-m-6(Mobile Devices 6)</p></div>
 23 | </div>
 24 | <div class="container">
 25 |     <div class="grid-12">
 26 |         <p> grid 12 </p>
 27 |     </div>
 28 |     <div class="grid-1">
 29 |         <p> grid 1 </p>
 30 |     </div>
 31 |     <div class="grid-11">
 32 |         <p> grid 11 </p>
 33 |     </div>
 34 |     <div class="grid-2">
 35 |         <p> grid  2 </p>
 36 |     </div>
 37 |     <div class="grid-10">
 38 |         <p> grid 12 </p>
 39 |     </div>
 40 |     <div class="grid-3">
 41 |         <p> grid 3 </p>
 42 |     </div>
 43 |     <div class="grid-9">
 44 |         <p> grid 9 </p>
 45 |     </div>
 46 |     <div class="grid-4">
 47 |         <p> grid 4 </p>
 48 |     </div>
 49 |     <div class="grid-8">
 50 |         <p> grid 8 </p>
 51 |     </div>
 52 |     <div class="grid-5">
 53 |         <p> grid 5 </p>
 54 |     </div>
 55 |     <div class="grid-7">
 56 |         <p> grid 7 </p>
 57 |     </div>
 58 |     <div class="grid-6">
 59 |         <p> grid 6 - Nesting </p>
 60 |         <div class="nest">
 61 |             <div class="grid-6">
 62 |                 <p>x</p>
 63 |             </div>
 64 |             <div class="grid-6">
 65 |                 <p>x</p>
 66 |                 <div class="nest">
 67 |                     <div class="grid-3">
 68 |                         <p>x</p>
 69 |                     </div>
 70 |                     <div class="grid-9">
 71 |                         <p>x</p>
 72 |                         <div class="nest">
 73 |                             <div class="grid-6">
 74 |                                 <p>x</p>
 75 |                             </div>
 76 |                             <div class="grid-6">
 77 |                                 <p>x</p>
 78 |                             </div>
 79 |                         </div>
 80 |                     </div>
 81 |                 </div>
 82 |             </div>
 83 |         </div>
 84 |     </div>
 85 | 
 86 |     <div class="grid-6">
 87 |         <p> grid 6 </p>
 88 |     </div>
 89 | 
 90 |     <div class="grid-7">
 91 |         <p> grid 7 </p>
 92 |     </div>
 93 |     <div class="grid-5">
 94 |         <p> grid 5 </p>
 95 |     </div>
 96 | 
 97 |     <div class="grid-8">
 98 |         <p> grid 8 </p>
 99 |     </div>
100 |     <div class="grid-4">
101 |         <p> grid 4 </p>
102 |     </div>
103 | 
104 |     <div class="grid-9">
105 |         <p> grid 9 </p>
106 |     </div>
107 |     <div class="grid-3">
108 |         <p> grid 3 </p>
109 |     </div>
110 |     <div class="grid-10">
111 |         <p> grid 10 </p>
112 |     </div>
113 |     <div class="grid-2">
114 |         <p> grid 2 </p>
115 |     </div>
116 | 
117 |     <div class="grid-11">
118 |         <p> grid 11 </p>
119 |     </div>
120 |     <div class="grid-1">
121 |         <p> grid 1 </p>
122 |     </div>
123 | 
124 |     <div class="grid-12">
125 |         <p> grid 12 </p>
126 |     </div>
127 | </div>
128 | </div>
129 | </body>
130 | </html>
131 | 


--------------------------------------------------------------------------------
/css/rwdgrid.css:
--------------------------------------------------------------------------------
  1 | /*********************************************************************************************
  2 | 
  3 | Project : rwdgrid - responsive grid system for your next project
  4 | URI: http://rwdgrid.com/
  5 | Version: 2.0
  6 | Author: Vineeth G S
  7 | Author URI: http://www.gsvineeth.com
  8 | Github URI: https://github.com/gsvineeth/rwdgrid/
  9 | 
 10 | **********************************************************************************************
 11 | 
 12 | 1.  Base code
 13 | 2.  Mobile Grid
 14 | 3.  Grid 720px+
 15 | 4.  Grid 1024px+
 16 | 5.  Grid 1200px+
 17 | 6.  Helper classes
 18 | 
 19 | **********************************************************************************************/
 20 | 
 21 | 
 22 | /*********************************************************************************************
 23 | 
 24 | 1.  Base code
 25 | 
 26 | *********************************************************************************************/
 27 | 
 28 | 
 29 | *, *:after, *:before {
 30 |     margin: 0;
 31 |     padding: 0;
 32 |     -webkit-box-sizing: border-box;
 33 |     -moz-box-sizing: border-box;
 34 |     box-sizing: border-box;
 35 | }
 36 | 
 37 | [class*='grid-'] {
 38 |     float: left;
 39 |     padding: 10px;
 40 |     width:100%;
 41 | }
 42 | 
 43 | .clear-grid{
 44 |     clear:both;
 45 |     float:inherit;
 46 | }
 47 | .container {
 48 |     margin:0%;
 49 |     width: 100%;
 50 | }
 51 | .container:after, .container:before {
 52 |     display: table;
 53 |     clear:both;
 54 |     content: " ";
 55 | }
 56 | .nest {
 57 |     margin:0 -10px;
 58 |     padding:0;
 59 |     width:auto;
 60 | }
 61 | 
 62 | /*********************************************************************************************
 63 | 
 64 | 2.  Mobile Grid
 65 | 
 66 | *********************************************************************************************/
 67 | 
 68 | 
 69 | .grid-m-12 {
 70 |     width: 100%;
 71 | }
 72 | .grid-m-11 {
 73 |     width: 91.666663%;
 74 | }
 75 | .grid-m-10 {
 76 |     width: 83.33%;
 77 | }
 78 | .grid-m-9 {
 79 |     width: 74.999997%;
 80 | }
 81 | .grid-m-8 {
 82 |     width: 66.66666664%;
 83 | }
 84 | .grid-m-7 {
 85 |     width: 58.333%;
 86 | }
 87 | .grid-m-6 {
 88 |     width: 50%;
 89 | }
 90 | .grid-m-5 {
 91 |     width: 41.6665%;
 92 | }
 93 | .grid-m-4 {
 94 |     width: 33.33%;
 95 | }
 96 | .grid-m-3 {
 97 |     width: 24.99%;
 98 | }
 99 | .grid-m-2 {
100 |     width: 16.66666%;
101 | }
102 | .grid-m-1 {
103 |     width: 8.33%;
104 | }
105 | 
106 | /*********************************************************************************************
107 | 
108 | 3.  Grid 720px+
109 | 
110 | *********************************************************************************************/
111 | 
112 | @media (min-width: 720px) {
113 |     .grid-12 {
114 |         width: 100%;
115 |     }
116 |     .grid-11 {
117 |         width: 91.666663%;
118 |     }
119 |     .grid-10 {
120 |         width: 83.33%;
121 |     }
122 |     .grid-9 {
123 |         width: 74.999997%;
124 |     }
125 |     .grid-8 {
126 |         width: 66.66666664%;
127 |     }
128 |     .grid-7 {
129 |         width: 58.333%;
130 |     }
131 |     .grid-6 {
132 |         width: 50%;
133 |     }
134 |     .grid-5 {
135 |         width: 41.6665%;
136 |     }
137 |     .grid-4 {
138 |         width: 33.33%;
139 |     }
140 |     .grid-3 {
141 |         width: 24.99%;
142 |     }
143 |     .grid-2 {
144 |         width: 16.66666%;
145 |     }
146 |     .grid-1 {
147 |         width: 8.33%;
148 |     }
149 | 
150 |     .grid-t-12 {
151 |         width: 100%;
152 |     }
153 |     .grid-t-11 {
154 |         width: 91.666663%;
155 |     }
156 |     .grid-t-10 {
157 |         width: 83.33%;
158 |     }
159 |     .grid-t-9 {
160 |         width: 74.999997%;
161 |     }
162 |     .grid-t-8 {
163 |         width: 66.66666664%;
164 |     }
165 |     .grid-t-7 {
166 |         width: 58.333%;
167 |     }
168 |     .grid-t-6 {
169 |         width: 50%;
170 |     }
171 |     .grid-t-5 {
172 |         width: 41.6665%;
173 |     }
174 |     .grid-t-4 {
175 |         width: 33.33%;
176 |     }
177 |     .grid-t-3 {
178 |         width: 24.99%;
179 |     }
180 |     .grid-t-2 {
181 |         width: 16.66666%;
182 |     }
183 |     .grid-t-1 {
184 |         width: 8.33%;
185 |     }
186 | }
187 | 
188 | /*********************************************************************************************
189 | 
190 | 4.  Grid 1024px+
191 | 
192 | *********************************************************************************************/
193 | 
194 | @media only screen and (min-width: 1024px) {
195 |     .grid-tl-12 {
196 |         width: 100%;
197 |     }
198 |     .grid-tl-11 {
199 |         width: 91.666663%;
200 |     }
201 |     .grid-tl-10 {
202 |         width: 83.33%;
203 |     }
204 |     .grid-tl-9 {
205 |         width: 74.999997%;
206 |     }
207 |     .grid-tl-8 {
208 |         width: 66.66666664%;
209 |     }
210 |     .grid-tl-7 {
211 |         width: 58.333%;
212 |     }
213 |     .grid-tl-6 {
214 |         width: 50%;
215 |     }
216 |     .grid-tl-5 {
217 |         width: 41.6665%;
218 |     }
219 |     .grid-tl-4 {
220 |         width: 33.33%;
221 |     }
222 |     .grid-tl-3 {
223 |         width: 24.99%;
224 |     }
225 |     .grid-tl-2 {
226 |         width: 16.66666%;
227 |     }
228 |     .grid-tl-1 {
229 |         width: 8.33%;
230 |     }
231 | }
232 | 
233 | 
234 | /*********************************************************************************************
235 | 
236 | 5.  Grid 1200px+
237 | 
238 | *********************************************************************************************/
239 | 
240 | @media only screen and (min-width: 1200px) {
241 |     .container {
242 |         max-width:1180px;
243 |         margin:0 auto;
244 |     }
245 |     .container-fluid {
246 |         max-width:90%;
247 |         margin:0 5%;
248 |     }
249 |     .grid-d-12 {
250 |         width: 100%;
251 |     }
252 |     .grid-d-11 {
253 |         width: 91.666663%;
254 |     }
255 |     .grid-d-10 {
256 |         width: 83.33%;
257 |     }
258 |     .grid-d-9 {
259 |         width: 74.999997%;
260 |     }
261 |     .grid-d-8 {
262 |         width: 66.66666664%;
263 |     }
264 |     .grid-d-7 {
265 |         width: 58.333%;
266 |     }
267 |     .grid-d-6 {
268 |         width: 50%;
269 |     }
270 |     .grid-d-5 {
271 |         width: 41.6665%;
272 |     }
273 |     .grid-d-4 {
274 |         width: 33.33%;
275 |     }
276 |     .grid-d-3 {
277 |         width: 24.99%;
278 |     }
279 |     .grid-d-2 {
280 |         width: 16.66666%;
281 |     }
282 |     .grid-d-1 {
283 |         width: 8.33%;
284 |     }
285 | }
286 | 
287 | /*********************************************************************************************
288 | 
289 | 6.  Helper classes
290 | 
291 | *********************************************************************************************/
292 | 
293 | 
294 | img.scale, img.responsive {
295 |     max-width: 100%;
296 |     height: auto;
297 | }
298 | 


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