├── .gitattributes ├── .gitignore ├── .travis.yml ├── LICENSE-MIT ├── PSD └── 1280_template.psd ├── README.md ├── bower.json ├── css ├── responsiveboilerplate.css └── responsiveboilerplate.min.css ├── demo.html ├── gruntfile.js ├── images ├── apple-touch-icon-114x114.png ├── apple-touch-icon-57x57.png ├── apple-touch-icon-72x72.png ├── apple-touch-icon.png └── favicon.ico ├── index.html ├── js ├── custom.js └── custom.min.js ├── less ├── gridColumns.less ├── mediaqueries.less ├── reset.less └── responsiveboilerplate.less ├── libs ├── head.min.js ├── html5shiv.min.js ├── jquery-1.10.1.min.js ├── respond.min.js └── zepto.min.js └── package.json /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | *.sln merge=union 7 | *.csproj merge=union 8 | *.vbproj merge=union 9 | *.fsproj merge=union 10 | *.dbproj merge=union 11 | 12 | # Standard to msysgit 13 | *.doc diff=astextplain 14 | *.DOC diff=astextplain 15 | *.docx diff=astextplain 16 | *.DOCX diff=astextplain 17 | *.dot diff=astextplain 18 | *.DOT diff=astextplain 19 | *.pdf diff=astextplain 20 | *.PDF diff=astextplain 21 | *.rtf diff=astextplain 22 | *.RTF diff=astextplain 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ################# 2 | ## Eclipse 3 | ################# 4 | 5 | *.pydevproject 6 | .project 7 | .metadata 8 | bin/ 9 | tmp/ 10 | *.tmp 11 | *.bak 12 | *.swp 13 | *~.nib 14 | local.properties 15 | .classpath 16 | .settings/ 17 | .loadpath 18 | 19 | # External tool builders 20 | .externalToolBuilders/ 21 | 22 | # Locally stored "Eclipse launch configurations" 23 | *.launch 24 | 25 | # CDT-specific 26 | .cproject 27 | 28 | # PDT-specific 29 | .buildpath 30 | 31 | 32 | ################# 33 | ## Visual Studio 34 | ################# 35 | 36 | ## Ignore Visual Studio temporary files, build results, and 37 | ## files generated by popular Visual Studio add-ons. 38 | 39 | # User-specific files 40 | *.suo 41 | *.user 42 | *.sln.docstates 43 | 44 | # Build results 45 | [Dd]ebug/ 46 | [Rr]elease/ 47 | *_i.c 48 | *_p.c 49 | *.ilk 50 | *.meta 51 | *.obj 52 | *.pch 53 | *.pdb 54 | *.pgc 55 | *.pgd 56 | *.rsp 57 | *.sbr 58 | *.tlb 59 | *.tli 60 | *.tlh 61 | *.tmp 62 | *.vspscc 63 | .builds 64 | *.dotCover 65 | 66 | ## TODO: If you have NuGet Package Restore enabled, uncomment this 67 | #packages/ 68 | 69 | # Visual C++ cache files 70 | ipch/ 71 | *.aps 72 | *.ncb 73 | *.opensdf 74 | *.sdf 75 | 76 | # Visual Studio profiler 77 | *.psess 78 | *.vsp 79 | 80 | # ReSharper is a .NET coding add-in 81 | _ReSharper* 82 | 83 | # Installshield output folder 84 | [Ee]xpress 85 | 86 | # DocProject is a documentation generator add-in 87 | DocProject/buildhelp/ 88 | DocProject/Help/*.HxT 89 | DocProject/Help/*.HxC 90 | DocProject/Help/*.hhc 91 | DocProject/Help/*.hhk 92 | DocProject/Help/*.hhp 93 | DocProject/Help/Html2 94 | DocProject/Help/html 95 | 96 | # Click-Once directory 97 | publish 98 | 99 | # Others 100 | [Bb]in 101 | [Oo]bj 102 | sql 103 | TestResults 104 | *.Cache 105 | ClientBin 106 | stylecop.* 107 | ~$* 108 | *.dbmdl 109 | Generated_Code #added for RIA/Silverlight projects 110 | 111 | # Backup & report files from converting an old project file to a newer 112 | # Visual Studio version. Backup files are not needed, because we have git ;-) 113 | _UpgradeReport_Files/ 114 | Backup*/ 115 | UpgradeLog*.XML 116 | 117 | 118 | 119 | ############ 120 | ## Windows 121 | ############ 122 | 123 | # Windows image file caches 124 | Thumbs.db 125 | 126 | # Folder config file 127 | Desktop.ini 128 | 129 | 130 | ############# 131 | ## Python 132 | ############# 133 | 134 | *.py[co] 135 | 136 | # Packages 137 | *.egg 138 | *.egg-info 139 | dist 140 | build 141 | eggs 142 | parts 143 | bin 144 | var 145 | sdist 146 | develop-eggs 147 | .installed.cfg 148 | 149 | # Installer logs 150 | pip-log.txt 151 | 152 | # Unit test / coverage reports 153 | .coverage 154 | .tox 155 | 156 | #Translations 157 | *.mo 158 | 159 | #Mr Developer 160 | .mr.developer.cfg 161 | 162 | # Mac crap 163 | .DS_Store 164 | 165 | # Ignore other unneeded files. 166 | doc/ 167 | *.swp 168 | *~ 169 | .project 170 | .DS_Store 171 | .idea 172 | node_modules/ 173 | 174 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "0.10" 4 | -------------------------------------------------------------------------------- /LICENSE-MIT: -------------------------------------------------------------------------------- 1 | Copyright (c) 2013 "Cowboy" Ben Alman 2 | 3 | Permission is hereby granted, free of charge, to any person 4 | obtaining a copy of this software and associated documentation 5 | files (the "Software"), to deal in the Software without 6 | restriction, including without limitation the rights to use, 7 | copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the 9 | Software is furnished to do so, subject to the following 10 | conditions: 11 | 12 | The above copyright notice and this permission notice shall be 13 | included in all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 17 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 19 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 20 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 21 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /PSD/1280_template.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newaeonweb/responsiveboilerplate/e33055209b1342a6f8d4afad60466268a8f3ecff/PSD/1280_template.psd -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Responsive Boilerplate v2.3.4 2 | ==================== 3 | [](https://travis-ci.org/newaeonweb/responsiveboilerplate) 4 | 5 | > A starting point to responsive web design! 6 | 7 | **Website:** http://www.responsiveboilerplate.com/ 8 | 9 | A lightweight (3kb) micro-library, elegant and minimalistic CSS3 grid system, made with only one container and 12 columns. It`s very easy to use and understand, pre-packed with some extra css helpers for mobile devices. 10 | 11 | --- 12 | 13 | ## Cross Browser | Cross Device! 14 | 15 | Adapt to any screen size, including fluid media; images and video. Pre-configured with 4 breakpoints, just to make your job easier. 16 | 17 | ## Sublime Text Snippets | Grunt.js Package 18 | 19 | Include in the package: PSD Template, HTML5 starting point file for fast development, plus a demo example. Also is available a Sublime Text Package with a complete pack of snippets as you can read below. 20 | 21 | **Website:** https://github.com/newaeonweb/ResponsiveBoilerplateSnippets 22 | 23 | ## Low Learning Curve. 24 | 25 | Doesn't consist of a vast amount of complex classes, spans and styles for everything even those styles that you never use. Only with 3 basic classes. 26 | 27 | --- 28 | 29 | ## How to use 30 | 31 | Very easy to use and understand, but a minimum knowledge of HTML & CSS must be required. 32 | Follow the steps... 33 | 34 | > From version 2.3.1 we depend on the latest version of **Node.js**. 35 | > If you use Ubuntu 13:04 we recommend reading this: [How to install the latest Node.js version using the PPA](http://www.ubuntuupdates.org/ppa/chris_lea_nodejs). 36 | 37 | #### This tutorial assumes that you already have the latest version of node.js and npm installed. 38 | 39 | --- 40 | 41 | - Clone our branch: https://github.com/newaeonweb/responsiveboilerplate.git 42 | - Or you can use **Bower**: `` `bower install responsiveboilerplate` ``. 43 | - Go to directory folder(responsiveboilerplate) and execute: `` `npm install` `` to download all the dependecies. 44 | - We **strongly** recommend the use of **index.html** as your starting point. 45 | - Place your content like the example: 46 | 47 |
48 | <!--Container Class to centralize your grid-->
49 | <div class="container">
50 | <!--Content Class to align the columns-->
51 | <div class="content">
52 | <div class="col6"></div>
53 | <div class="col6"></div>
54 | </div>
55 | <div class="content">
56 | <div class="col4"></div>
57 | <div class="col4"></div>
58 | <div class="col4"></div>
59 | </div>
60 | </div>
61 |
62 |
63 | **Note:**
64 | > * This code on render display a side by side column, ie your screen with two equal column on top, and three columns on bottom.
65 |
66 | - You can play with your columns to fit your needs and adjust to your own design.
67 | - Visit our screencast page.
68 |
69 | #### Quick start with Grunt.js
70 |
71 | After cloning or install with `bower`, go to the root folder and execute the following command:
72 |
73 | ```npm install```
74 |
75 | To see the demo page running on localhost:
76 |
77 | ```grunt demo```
78 |
79 | This command will open your default browser with the demo page.
80 |
81 | **Note:**
82 | > * if you are on Windows use: `grunt.cmd demo`
83 |
84 | ## Contribute
85 |
86 | Please welcome. Feel free to test, use, fork, send bugs, suggestions and contribute with code to improve this tool.
87 |
88 | ## More Infos
89 |
90 | > www.responsiveboilerplate.com
91 |
92 | - Developer: [@newaeonweb](https://twitter.com/@newaeonweb/ "Twitter")
93 | - Email: feiochc@gmail.com
94 | - Google Plus: [Fernando Monteiro](https://plus.google.com/102311871192373469721/posts/ "G +")
95 |
96 | [](https://bitdeli.com/free "Bitdeli Badge")
97 |
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "responsiveboilerplate",
3 | "version": "2.3.4",
4 | "main": "css/responsiveboilerplate.min.css",
5 | "description": "A starting point to responsive web design, lightweight and fast!",
6 | "license": "MIT",
7 | "ignore": [
8 | ".jshintrc",
9 | "**/*.txt",
10 | ".project",
11 | ".DS_Store",
12 | ".idea",
13 | "node_modules/"
14 | ],
15 | "dependencies": {
16 |
17 | },
18 | "devDependencies": {
19 |
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/css/responsiveboilerplate.css:
--------------------------------------------------------------------------------
1 | /*!* ResponsiveBoilerplate v2.3.2 - 2014-06-24.
2 | * Author: Fernando Monteiro - Licensed under MIT license.
3 | */
4 | /*WARNING: Never change the CSS files. Use the respective LESS files,
5 | otherwise your work here will be cleaned on next Grunt.js build*/
6 |
7 | /* #Reset
8 | ================================================================================================= */
9 |
10 | html,
11 | body,
12 | div,
13 | span,
14 | applet,
15 | object,
16 | iframe,
17 | h1,
18 | h2,
19 | h3,
20 | h4,
21 | h5,
22 | h6,
23 | p,
24 | blockquote,
25 | pre,
26 | a,
27 | abbr,
28 | acronym,
29 | address,
30 | big,
31 | cite,
32 | code,
33 | del,
34 | dfn,
35 | em,
36 | img,
37 | ins,
38 | kbd,
39 | q,
40 | s,
41 | samp,
42 | small,
43 | strike,
44 | strong,
45 | sub,
46 | sup,
47 | tt,
48 | var,
49 | b,
50 | u,
51 | i,
52 | center,
53 | dl,
54 | dt,
55 | dd,
56 | ol,
57 | ul,
58 | li,
59 | fieldset,
60 | form,
61 | label,
62 | legend,
63 | table,
64 | caption,
65 | tbody,
66 | tfoot,
67 | thead,
68 | tr,
69 | th,
70 | td,
71 | article,
72 | aside,
73 | canvas,
74 | details,
75 | embed,
76 | figure,
77 | figcaption,
78 | footer,
79 | header,
80 | menu,
81 | nav,
82 | output,
83 | ruby,
84 | section,
85 | summary,
86 | time,
87 | mark,
88 | audio,
89 | video {
90 | padding: 0;
91 | margin: 0;
92 | font-size: 100%;
93 | vertical-align: baseline;
94 | border: 0;
95 | }
96 |
97 | article,
98 | aside,
99 | details,
100 | figcaption,
101 | figure,
102 | footer,
103 | header,
104 | menu,
105 | nav,
106 | section {
107 | display: block;
108 | }
109 |
110 | body {
111 | line-height: 1;
112 | }
113 |
114 | ol,
115 | ul {
116 | list-style: none;
117 | }
118 |
119 | blockquote,
120 | q {
121 | quotes: none;
122 | }
123 |
124 | blockquote:before,
125 | blockquote:after,
126 | q:before,
127 | q:after {
128 | content: '';
129 | }
130 |
131 | table {
132 | border-collapse: collapse;
133 | border-spacing: 0;
134 | }
135 |
136 | /* ClearFix
137 | =============================================================================================== */
138 |
139 | .clearfix:before,
140 | .clearfix:after {
141 | display: table;
142 | line-height: 0;
143 | content: "";
144 | }
145 |
146 | .clearfix:after {
147 | clear: both;
148 | }
149 |
150 | body > .clearfix {
151 | zoom: 1;
152 | }
153 |
154 | /* Media - Fluid Images - Video
155 | ============================================================================================== */
156 |
157 | figure {
158 | margin: 0;
159 | }
160 |
161 | img,
162 | object,
163 | embed,
164 | video {
165 | max-width: 100%;
166 | }
167 |
168 | body > img,
169 | object,
170 | embed,
171 | video {
172 | width: 100%;
173 | }
174 |
175 | /* Fluid images */
176 |
177 | img {
178 | height: auto;
179 | vertical-align: middle;
180 | border: 0;
181 | -webkit-box-sizing: border-box;
182 | -moz-box-sizing: border-box;
183 | -ms-box-sizing: border-box;
184 | box-sizing: border-box;
185 | -ms-interpolation-mode: bicubic;
186 | }
187 |
188 | /* Correct IE9 overflow */
189 |
190 | svg:not(:root) {
191 | overflow: hidden;
192 | }
193 |
194 | /* Avoid Google maps broken with max-width 100% */
195 |
196 | img[src*="maps.gstatic.com"],
197 | img[src*="googleapis.com"] {
198 | max-width: none;
199 | }
200 |
201 | /* Links (No outline borders)
202 | ============================================================================================== */
203 |
204 | a:focus {
205 | outline: 0;
206 | }
207 |
208 | /* Responsive Navigation Basic Style
209 | ===============================================================================================*/
210 |
211 | #menu {
212 | display: none;
213 | }
214 |
215 | @media screen and (max-width: 768px) {
216 | #menu {
217 | display: block;
218 | padding: 5px;
219 | font-size: 1.35em;
220 | text-align: right;
221 | cursor: pointer;
222 | background: #dddddd;
223 | }
224 | #menu span {
225 | margin-right: 10px;
226 | }
227 | #nav {
228 | display: none;
229 | }
230 | #nav ul {
231 | padding: 2%;
232 | margin: 0 auto;
233 | background-color: #dddddd;
234 | }
235 | #nav li {
236 | display: block;
237 | width: 100%;
238 | }
239 | }
240 |
241 | /* Grid Columns
242 | ================================================================================================*/
243 |
244 | /*We strong recommend use the container tag one time only, just to center your grids on the page*/
245 |
246 | .container {
247 | padding-right: 20px;
248 | padding-left: 20px;
249 | }
250 |
251 | .container:before,
252 | .container:after {
253 | display: table;
254 | line-height: 0;
255 | content: "";
256 | }
257 |
258 | .container:after {
259 | clear: both;
260 | }
261 |
262 | /* Fluid Default grid for 1024px screen resolution, grid based for 940px*/
263 |
264 | .content {
265 | width: 100%;
266 | }
267 |
268 | .content:before,
269 | .content:after {
270 | display: table;
271 | line-height: 0;
272 | content: "";
273 | }
274 |
275 | .content:after {
276 | clear: both;
277 | }
278 |
279 | .content [class*="col"] {
280 | float: left;
281 | margin-left: 2.127659574468085%;
282 | *margin-left: 2.074468085106383%;
283 | }
284 |
285 | .content [class*="col"]:first-child {
286 | margin-left: 0;
287 | }
288 |
289 | .content .col12 {
290 | width: 100%;
291 | *width: 99.94680851063829%;
292 | }
293 |
294 | .content .col11 {
295 | width: 91.48936170212765%;
296 | *width: 91.43617021276594%;
297 | }
298 |
299 | .content .col10 {
300 | width: 82.97872340425532%;
301 | *width: 82.92553191489361%;
302 | }
303 |
304 | .content .col9 {
305 | width: 74.46808510638297%;
306 | *width: 74.41489361702126%;
307 | }
308 |
309 | .content .col8 {
310 | width: 65.95744680851064%;
311 | *width: 65.90425531914893%;
312 | }
313 |
314 | .content .col7 {
315 | width: 57.44680851063829%;
316 | *width: 57.39361702127659%;
317 | }
318 |
319 | .content .col6 {
320 | width: 48.93617021276595%;
321 | *width: 48.88297872340425%;
322 | }
323 |
324 | .content .col5 {
325 | width: 40.42553191489362%;
326 | *width: 40.37234042553192%;
327 | }
328 |
329 | .content .col4 {
330 | width: 31.914893617021278%;
331 | *width: 31.861702127659576%;
332 | }
333 |
334 | .content .col3 {
335 | width: 23.404255319148934%;
336 | *width: 23.351063829787233%;
337 | }
338 |
339 | .content .col2 {
340 | width: 14.893617021276595%;
341 | *width: 14.840425531914894%;
342 | }
343 |
344 | .content .col1 {
345 | width: 6.382978723404255%;
346 | *width: 6.329787234042553%;
347 | }
348 |
349 | /* Fluid grid to 1280px screen resolution, grid based for 1120px*/
350 |
351 | @media (min-width: 1200px) {
352 | .content {
353 | width: 100%;
354 | }
355 | .content:before,
356 | .content:after {
357 | display: table;
358 | line-height: 0;
359 | content: "";
360 | }
361 | .content:after {
362 | clear: both;
363 | }
364 | .content [class*="col"] {
365 | float: left;
366 | margin-left: 1.694915254237288%;
367 | *margin-left: 1.641723764875586%;
368 | }
369 | .content [class*="col"]:first-child {
370 | margin-left: 0;
371 | }
372 | .content .col12 {
373 | width: 100%;
374 | *width: 99.94680851063829%;
375 | }
376 | .content .col11 {
377 | width: 91.52542372881356%;
378 | *width: 91.47223223945186%;
379 | }
380 | .content .col10 {
381 | width: 83.0508474576271%;
382 | *width: 82.99765596826539%;
383 | }
384 | .content .col9 {
385 | width: 74.57627118644066%;
386 | *width: 74.52307969707896%;
387 | }
388 | .content .col8 {
389 | width: 66.10169491525423%;
390 | *width: 66.04850342589252%;
391 | }
392 | .content .col7 {
393 | width: 57.6271186440678%;
394 | *width: 57.5739271547061%;
395 | }
396 | .content .col6 {
397 | width: 49.152542372881356%;
398 | *width: 49.099350883519655%;
399 | }
400 | .content .col5 {
401 | width: 40.677966101694906%;
402 | *width: 40.624774612333205%;
403 | }
404 | .content .col4 {
405 | width: 32.20338983050847%;
406 | *width: 32.15019834114677%;
407 | }
408 | .content .col3 {
409 | width: 23.728813559322035%;
410 | *width: 23.675622069960333%;
411 | }
412 | .content .col2 {
413 | width: 15.254237288135592%;
414 | *width: 15.20104579877389%;
415 | }
416 | .content .col1 {
417 | width: 6.779661016949152%;
418 | *width: 6.72646952758745%;
419 | }
420 | }
421 |
422 | /* General small screen Mobile down size from 768px, display all columns in block
423 | ============================================================================================== */
424 |
425 | @media handheld, only screen and (max-width: 768px) {
426 | body {
427 | font-size: 1.0;
428 | -webkit-text-size-adjust: none;
429 | -ms-text-size-adjust: none;
430 | }
431 | .container {
432 | padding-right: 10px;
433 | padding-left: 10px;
434 | }
435 | .content {
436 | width: 100%;
437 | }
438 | [class*="col"],
439 | .content [class*="col"] {
440 | display: block;
441 | float: none;
442 | width: 100%;
443 | margin-left: 0;
444 | }
445 | .col12,
446 | .content .col12 {
447 | width: 100%;
448 | }
449 | }
450 |
451 | /* Custom sizes
452 | ============================================================================================== */
453 |
454 | /* Helpers for windows phone 8 */
455 |
456 | @media screen and (max-width: 400px) {
457 | @-ms-viewport {
458 | width: device-width;
459 | }
460 | @viewport {
461 | width: device-width;
462 | }
463 | }
464 |
465 | /* Add your styles for devices with a maximum width of 480 */
466 |
467 | @media screen and (max-width: 480px) {
468 |
469 | }
470 |
471 | /* Add your styles for devices with a maximum width of 768 */
472 |
473 | @media screen and (max-width: 768px) {
474 |
475 | }
476 |
477 | /* Add your styles for devices with a maximum width of 320 */
478 |
479 | @media screen and (max-width: 320px) {
480 |
481 | }
482 |
483 | /* Add your styles for devices with a maximum width of 1024 */
484 |
485 | @media screen and (max-width: 1024px) {
486 |
487 | }
488 |
489 | /* iPads (landscape) and (portrait) ----------- */
490 |
491 | /* Add your styles for devices with a maximum width of 1024 */
492 |
493 | @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
494 |
495 | }
496 |
497 | /* Add your styles for devices with a maximum width of 768 */
498 |
499 | @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
500 |
501 | }
--------------------------------------------------------------------------------
/css/responsiveboilerplate.min.css:
--------------------------------------------------------------------------------
1 | /*!* ResponsiveBoilerplate v2.3.2 - 2014-06-24.
2 | * Author: Fernando Monteiro - Licensed under MIT license.
3 | */
4 | html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,menu,nav,output,ruby,section,summary,time,mark,audio,video{padding:0;margin:0;font-size:100%;vertical-align:baseline;border:0}article,aside,details,figcaption,figure,footer,header,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:''}table{border-collapse:collapse;border-spacing:0}.clearfix:before,.clearfix:after{display:table;line-height:0;content:""}.clearfix:after{clear:both}body>.clearfix{zoom:1}figure{margin:0}img,object,embed,video{max-width:100%}body>img,object,embed,video{width:100%}img{height:auto;vertical-align:middle;border:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}img[src*="maps.gstatic.com"],img[src*="googleapis.com"]{max-width:none}a:focus{outline:0}#menu{display:none}@media screen and (max-width:768px){#menu{display:block;padding:5px;font-size:1.35em;text-align:right;cursor:pointer;background:#ddd}#menu span{margin-right:10px}#nav{display:none}#nav ul{padding:2%;margin:0 auto;background-color:#ddd}#nav li{display:block;width:100%}}.container{padding-right:20px;padding-left:20px}.container:before,.container:after{display:table;line-height:0;content:""}.container:after{clear:both}.content{width:100%}.content:before,.content:after{display:table;line-height:0;content:""}.content:after{clear:both}.content [class*="col"]{float:left;margin-left:2.127659574468085%;*margin-left:2.074468085106383%}.content [class*="col"]:first-child{margin-left:0}.content .col12{width:100%;*width:99.94680851063829%}.content .col11{width:91.48936170212765%;*width:91.43617021276594%}.content .col10{width:82.97872340425532%;*width:82.92553191489361%}.content .col9{width:74.46808510638297%;*width:74.41489361702126%}.content .col8{width:65.95744680851064%;*width:65.90425531914893%}.content .col7{width:57.44680851063829%;*width:57.39361702127659%}.content .col6{width:48.93617021276595%;*width:48.88297872340425%}.content .col5{width:40.42553191489362%;*width:40.37234042553192%}.content .col4{width:31.914893617021278%;*width:31.861702127659576%}.content .col3{width:23.404255319148934%;*width:23.351063829787233%}.content .col2{width:14.893617021276595%;*width:14.840425531914894%}.content .col1{width:6.382978723404255%;*width:6.329787234042553%}@media(min-width:1200px){.content{width:100%}.content:before,.content:after{display:table;line-height:0;content:""}.content:after{clear:both}.content [class*="col"]{float:left;margin-left:1.694915254237288%;*margin-left:1.641723764875586%}.content [class*="col"]:first-child{margin-left:0}.content .col12{width:100%;*width:99.94680851063829%}.content .col11{width:91.52542372881356%;*width:91.47223223945186%}.content .col10{width:83.0508474576271%;*width:82.99765596826539%}.content .col9{width:74.57627118644066%;*width:74.52307969707896%}.content .col8{width:66.10169491525423%;*width:66.04850342589252%}.content .col7{width:57.6271186440678%;*width:57.5739271547061%}.content .col6{width:49.152542372881356%;*width:49.099350883519655%}.content .col5{width:40.677966101694906%;*width:40.624774612333205%}.content .col4{width:32.20338983050847%;*width:32.15019834114677%}.content .col3{width:23.728813559322035%;*width:23.675622069960333%}.content .col2{width:15.254237288135592%;*width:15.20104579877389%}.content .col1{width:6.779661016949152%;*width:6.72646952758745%}}@media handheld,only screen and (max-width:768px){body{font-size:1.0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none}.container{padding-right:10px;padding-left:10px}.content{width:100%}[class*="col"],.content [class*="col"]{display:block;float:none;width:100%;margin-left:0}.col12,.content .col12{width:100%}}@media screen and (max-width:400px){@-ms-viewport{width:device-width}@viewport{width:device-width}}
--------------------------------------------------------------------------------
/demo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | t |