forked from codingdesigner/Survival-Kit
-
Notifications
You must be signed in to change notification settings - Fork 0
/
styletile.html
144 lines (116 loc) · 6.13 KB
/
styletile.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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <html class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>[CLIENTNAME] Style Tile</title>
<!-- Mobile viewport optimized: j.mp/bplateviewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Place favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- CSS : implied media="all" -->
<link rel="stylesheet" href="css/tile.css?v=2">
<!-- Uncomment if you are specifically targeting less enabled mobile browsers
<link rel="stylesheet" media="handheld" href="css/handheld.css?v=2"> -->
<!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
<script src="js/libs/modernizr-2.0.min.js"></script>
<!-- Also put Selectivizr at the top -->
<script type="text/javascript" src="js/libs/mootools-core-1.3.1-full-compat-yc.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="js/libs/selectivizr.js"></script>
<noscript><link rel="stylesheet" href="css/selectivizr.css" /></noscript>
<![endif]-->
<script type="text/javascript" src="http://use.typekit.com/xuu1lcu.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body class="styletile-1">
<div id="page">
<header>
<div class="client-id">
<h1 class="client-name">[CLIENTNAME]</h1>
</div>
<aside>[CLIENTNAME] Style Tiles <br/> Version 1</aside>
</header>
<div id="main" role="main">
<article class="text-examples">
<div class="headers group">
<h5 class="label">Header text options</h5>
<h1>This is a Page Title</h1>
<h2>This is a Header</h2>
<h3>This is a Sub Header</h3>
<a href="">Link Text</a>
</div>
<div class="quotes group">
<figure class="quote">
<span class="quote-mark left-quote-mark">“</span>An Exceptional Quote<span class="quote-mark right-quote-mark">”</span>
<figcaption class="source"><span class="publication">The Paper<span class="comma">, </span></span><span class="year">2011</span></figcaption>
</figure>
</div>
<div class="serif group">
<h5 class="label">Body Text Option - Serif - Georgia</h5>
<p class="serif">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="">Donec odio</a>. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="sans group">
<h5 class="label">Body Text Option - Sans Serif - Helvetica</h5>
<p class="sans">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="">Donec odio</a>. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
</article>
<article class="graphic-examples">
<div class="colors group">
<h5 class="label">Color Options</h5>
<ul>
<li class="color-1"></li>
<li class="color-2"></li>
<li class="color-3"></li>
<li class="color-4"></li>
<li class="color-5"></li>
<li class="color-6"></li>
</ul>
</div>
<div class="images group">
<h5 class="label">Style and Pattern Swatches</h5>
<ul>
<li class="image-1"><img src="http://dummyimage.com/400x300/ccc/fff" alt="placeholder image" /></li>
<li class="image-2"><img src="http://dummyimage.com/400x300/ccc/fff" alt="placeholder image" /></li>
<li class="image-3"><img src="http://dummyimage.com/400x300/ccc/fff" alt="placeholder image" /></li>
<li class="image-4"><img src="http://dummyimage.com/400x300/ccc/fff" alt="placeholder image" /></li>
<li class="image-5"><img src="http://dummyimage.com/400x300/ccc/fff" alt="placeholder image" /></li>
<li class="image-5"><img src="http://dummyimage.com/400x300/ccc/fff" alt="placeholder image" /></li>
</ul>
</div>
</article>
</div>
<footer>
</footer>
</div> <!--! end of #container -->
<!-- JavaScript at the bottom for fast page loading -->
<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.5.2.min.js"%3E%3C/script%3E'))</script>
<!-- Formalize (http://formalize.me) -->
<script src="js/libs/formalize/jquery.formalize.js"></script>
<!-- Lettering.js -->
<!-- <script src="js/libs/jquery.lettering.js"></script> -->
<!-- scripts concatenated and minified via ant build script-->
<script src="js/script.js"></script>
<!-- end concatenated and minified scripts-->
<!--[if lt IE 7 ]>
<script src="js/libs/dd_belatedpng.js"></script>
<script>DD_belatedPNG.fix('img, .png_bg'); // Fix any <img> or .png_bg bg-images. Also, please read goo.gl/mZiyb </script>
<![endif]-->
<!-- mathiasbynens.be/notes/async-analytics-snippet Change UA-XXXXX-X to be your site's ID -->
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>