forked from dryan/css-smart-grid
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpractical-demo.html
91 lines (83 loc) · 5.09 KB
/
practical-demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<script type="text/javascript">var _sf_startpt=(new Date()).getTime()</script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>CSS Smart Grid — A Lightweight, Responsive, Mobile First 960 Grid</title>
<meta name="description" content="Based on the popular 960 grid system, CSS Smart Grid is design from the ground up to be lightweight, responsive and mobile-first.">
<meta name="author" content="humans.txt">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/smart-grid.css">
<link rel="stylesheet" href="css/smart-grid-doc.css">
<link rel="stylesheet" href="css/smart-grid-demo.css">
<script src="js/modernizr.js"></script>
<script>
var _gaq=_gaq||[];_gaq.push(["_setAccount","UA-3625251-4"]);_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)})();
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)})();
</script>
</head>
<body class="practical-demo">
<header id="hd" role="banner" class="row">
<div class="container hd">
<h1><a href="./" title="Homepage"><span class="caps">CSS</span> Smart Grid</a></h1>
<p class="tagline">Lightweight, Responsive <span class="amp">&</span> Mobile First</p>
<nav>
<ul>
<li><a href="https://github.com/dryan/css-smart-grid/" title="Get it on Github" class="button">Get it on Github</a></li>
</ul>
</nav>
</div><!-- end .container -->
</header><!-- end #hd -->
<div class="container" id="main">
<h1>Practical Demo</h1>
<p class="center">Subcolumns support</p>
<div class="row">
<div class="columns two-thirds">
<div class="row">
<div class="columns four"><b>Section 1</b></div>
<div class="columns four"><b>Section 2</b></div>
</div>
<div class="row">
<div class="columns four"><b>Section 1</b></div>
<div class="columns four"><b>Section 2</b></div>
</div>
</div>
<div class="columns one-third">
<b>
Sidebar with a lot of content.
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</b>
</div>
</div>
<div class="row callouts">
<div class="columns one-fourth"><b>Callout</b></div>
<div class="columns one-fourth"><b>Callout</b></div>
<div class="columns one-fourth"><b>Callout</b></div>
<div class="columns one-fourth"><b>Callout</b></div>
</div>
</div><!-- end #main -->
<script type="text/javascript">
var _sf_async_config = { uid: 43815, domain: 'dryan.com' };
(function() {
function loadChartbeat() {
window._sf_endpt = (new Date()).getTime();
var e = document.createElement('script');
e.setAttribute('language', 'javascript');
e.setAttribute('type', 'text/javascript');
e.setAttribute('src',
(("https:" == document.location.protocol) ? "https://a248.e.akamai.net/chartbeat.download.akamai.com/102508/" : "http://static.chartbeat.com/") +
"js/chartbeat.js");
document.body.appendChild(e);
};
var oldonload = window.onload;
window.onload = (typeof window.onload != 'function') ?
loadChartbeat : function() { oldonload(); loadChartbeat(); };
})();
</script>
</body>
</html>