| 1 |
<!DOCTYPE html> |
| 2 |
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]--> |
| 3 |
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]--> |
| 4 |
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]--> |
| 5 |
<!--[if gt IE 8]><!--> |
| 6 |
<html class=" js flexbox" lang="en"><!--<![endif]--><head> |
| 7 |
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
| 8 |
<meta charset="utf-8"> |
| 9 |
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| 10 |
<title>Demo — CSS Smart Grid — A Lightweight, Responsive, Mobile First CSS Grid</title> |
| 11 |
<meta name="description" content="Demo of CSS Smart Grid"> |
| 12 |
<meta name="author" content="/humans.txt"> |
| 13 |
|
| 14 |
<meta name="viewport" content="width=device-width,initial-scale=1"> |
| 15 |
|
| 16 |
<link rel="stylesheet" href="demo_files/fonts.css"> |
| 17 |
<link rel="stylesheet" href="demo_files/docs.css"> |
| 18 |
|
| 19 |
<script type="text/javascript" async="" id="gauges-tracker" data-site-id="4faf1bdff5a1f501f8000047" src="demo_files/track.js"></script><script type="text/javascript" async="" src="demo_files/ga.js"></script><script src="demo_files/modernizr.js"></script> |
| 20 |
<script> |
| 21 |
var _gaq=_gaq||[];_gaq.push(["_setAccount","UA-3625251-12"]);_gaq.push(["_trackPageview"]);(function(){var a=document.createElement("script");a.type="text/javascript";a.async=!0;a.src=("https:"==document.location.protocol?"https://ssl":"http://www")+".google-analytics.com/ga.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})(); |
| 22 |
var _gauges=_gauges||[];(function(){var a=document.createElement("script");a.type="text/javascript";a.async=!0;a.id="gauges-tracker";a.setAttribute("data-site-id","4faf1bdff5a1f501f8000047");a.src="//secure.gaug.es/track.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})(); |
| 23 |
</script> |
| 24 |
</head> |
| 25 |
|
| 26 |
<body class="demo"> |
| 27 |
<header id="hd" role="banner"> |
| 28 |
<div class="container"> |
| 29 |
<h1><a href="https://css.gd/" title="Homepage" id="brand"><span class="caps">CSS</span> Smart Grid</a></h1> |
| 30 |
<p class="tagline">Lightweight, Responsive <span class="amp">&</span> Mobile First</p> |
| 31 |
<a href="https://github.com/dryan/css-smart-grid/" title="Get it on Github" class="button" id="fork-it">Get it on Github</a> |
| 32 |
</div><!-- end .container --> |
| 33 |
</header><!-- end #hd --> |
| 34 |
|
| 35 |
<div class="container row" id="content"> |
| 36 |
|
| 37 |
<h1>Demo</h1> |
| 38 |
<p class="center">Resize your browser to see it in action</p> |
| 39 |
|
| 40 |
<div class="row"> |
| 41 |
<div class="columns one"><b>one</b></div> |
| 42 |
<div class="columns one"><b>one</b></div> |
| 43 |
<div class="columns one"><b>one</b></div> |
| 44 |
<div class="columns one"><b>one</b></div> |
| 45 |
<div class="columns one"><b>one</b></div> |
| 46 |
<div class="columns one"><b>one</b></div> |
| 47 |
<div class="columns one"><b>one</b></div> |
| 48 |
<div class="columns one"><b>one</b></div> |
| 49 |
<div class="columns one"><b>one</b></div> |
| 50 |
<div class="columns one"><b>one</b></div> |
| 51 |
<div class="columns one"><b>one</b></div> |
| 52 |
<div class="columns one"><b>one</b></div> |
| 53 |
</div> |
| 54 |
|
| 55 |
<div class="row"> |
| 56 |
<div class="columns two"><b>two</b></div> |
| 57 |
<div class="columns two"><b>two</b></div> |
| 58 |
<div class="columns two"><b>two</b></div> |
| 59 |
<div class="columns two"><b>two</b></div> |
| 60 |
<div class="columns two"><b>two</b></div> |
| 61 |
<div class="columns two"><b>two</b></div> |
| 62 |
</div> |
| 63 |
|
| 64 |
<div class="row"> |
| 65 |
<div class="columns three"><b>three</b></div> |
| 66 |
<div class="columns three"><b>three</b></div> |
| 67 |
<div class="columns three"><b>three</b></div> |
| 68 |
<div class="columns three"><b>three</b></div> |
| 69 |
</div> |
| 70 |
|
| 71 |
<div class="row"> |
| 72 |
<div class="columns one-fourth"><b>one-fourth</b></div> |
| 73 |
<div class="columns one-fourth"><b>one-fourth</b></div> |
| 74 |
<div class="columns one-half"><b>one-half</b></div> |
| 75 |
</div> |
| 76 |
|
| 77 |
<div class="row"> |
| 78 |
<div class="columns four"><b>four</b></div> |
| 79 |
<div class="columns four"><b>four</b></div> |
| 80 |
<div class="columns four"><b>four</b></div> |
| 81 |
</div> |
| 82 |
|
| 83 |
<div class="row"> |
| 84 |
<div class="columns one-third"><b>one-third</b></div> |
| 85 |
<div class="columns two-thirds"><b>two-thirds</b></div> |
| 86 |
</div> |
| 87 |
|
| 88 |
<div class="row"> |
| 89 |
<div class="columns five"><b>five</b></div> |
| 90 |
<div class="columns seven"><b>seven</b></div> |
| 91 |
</div> |
| 92 |
|
| 93 |
<div class="row"> |
| 94 |
<div class="columns six"><b>six</b></div> |
| 95 |
<div class="columns six"><b>six</b></div> |
| 96 |
</div> |
| 97 |
|
| 98 |
<div class="row"> |
| 99 |
<div class="columns seven"><b>seven</b></div> |
| 100 |
<div class="columns five"><b>five</b></div> |
| 101 |
</div> |
| 102 |
|
| 103 |
<div class="row"> |
| 104 |
<div class="columns eight"><b>eight</b></div> |
| 105 |
<div class="columns four"><b>four</b></div> |
| 106 |
</div> |
| 107 |
|
| 108 |
<div class="row"> |
| 109 |
<div class="columns nine"><b>nine</b></div> |
| 110 |
<div class="columns three"><b>three</b></div> |
| 111 |
</div> |
| 112 |
|
| 113 |
<div class="row"> |
| 114 |
<div class="columns ten"><b>ten</b></div> |
| 115 |
<div class="columns two"><b>two</b></div> |
| 116 |
</div> |
| 117 |
|
| 118 |
<div class="row"> |
| 119 |
<div class="columns eleven"><b>eleven</b></div> |
| 120 |
<div class="columns one"><b>one</b></div> |
| 121 |
</div> |
| 122 |
|
| 123 |
<div class="row"> |
| 124 |
<div class="columns two offset-one"><b>two offset-one</b></div> |
| 125 |
<div class="columns eight"><b>eight</b></div> |
| 126 |
</div> |
| 127 |
|
| 128 |
<div class="row"> |
| 129 |
<div class="columns two"><b>two</b></div> |
| 130 |
<div class="columns eight"><b>eight</b></div> |
| 131 |
<div class="columns two"><b>two</b></div> |
| 132 |
</div> |
| 133 |
|
| 134 |
<div class="row"> |
| 135 |
<div class="columns one-fourth"><b>one-fourth</b></div> |
| 136 |
<div class="columns one-half"><b>one-half</b></div> |
| 137 |
<div class="columns two offset-one"><b>two offset-one</b></div> |
| 138 |
</div> |
| 139 |
|
| 140 |
<div class="row"> |
| 141 |
<div class="columns one-half"><b>one-half</b></div> |
| 142 |
<div class="columns one-fourth"><b>one-fourth</b></div> |
| 143 |
<div class="columns one-fourth"><b>one-fourth</b></div> |
| 144 |
</div> |
| 145 |
|
| 146 |
|
| 147 |
</div><!-- end #content --> |
| 148 |
|
| 149 |
<footer id="ft" role="contentinfo"> |
| 150 |
<div class="container"> |
| 151 |
<p class="row"> |
| 152 |
<strong class="columns one-fourth">Acknowledgments</strong> |
| 153 |
<span class="columns three-fourths"> |
| 154 |
<a href="http://960.gs/" title="960 Grid System">960 Grid System</a> |
| 155 |
<a hef="http://unstoppablerobotninja.com/" title="Ethan Marcotte">Ethan Marcotte</a> |
| 156 |
<a href="http://html5boilerplate.com/" title="HTML5 Boilerplate">HTML5 Boilerplate</a> |
| 157 |
<a href="http://getskeleton.com/" title="Skeleton CSS">Skeleton</a> |
| 158 |
<a href="http://twitter.github.com/" title="Twitter Bootstrap">Twitter Bootstrap</a> |
| 159 |
</span> |
| 160 |
</p> |
| 161 |
<p class="license row"> |
| 162 |
<strong class="columns one-fourth">License</strong> |
| 163 |
<span class="columns three-fourths"> |
| 164 |
<a rel="license" href="https://raw.github.com/dryan/css-smart-grid/master/LICENSE.txt" title="View the license">MIT License</a> |
| 165 |
</span> |
| 166 |
</p> |
| 167 |
</div><!-- end .container --> |
| 168 |
</footer><!-- end #ft --> |
| 169 |
|
| 170 |
|
| 171 |
</body></html> |
