forked from codingdesigner/Survival-Kit
-
Notifications
You must be signed in to change notification settings - Fork 0
/
elements-ui-patterns.html
145 lines (116 loc) · 5.88 KB
/
elements-ui-patterns.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
145
<!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>UI Patterns</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/style.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]-->
</head>
<body lang="en" class="markup-elements">
<div id="page">
<header>
<hgroup>
<h1>The Coding Designer's Survival Kit</h1>
<h2>UI Patterns</h2>
</hgroup>
</header>
<div id="main" role="main">
<section id="simple-patterns" class="element-group">
<h1 class="section-title">Common Patterns</h1>
<article id="messages" class="element">
<h2 class="element-title">Messages</h2>
<div class="markup">
<div class="messages status">
<h2 class="element-invisible" style="display: none;">Status message</h2>
<p> This is <em>status</em> message. </p>
</div>
<div class="messages warning">
<h2 class="element-invisible" style="display: none;">Status message</h2>
<p> This is <em>warning</em> message. </p>
</div>
<div class="messages error">
<h2 class="element-invisible" style="display: none;">Status message</h2>
<p> This is <em>error</em> message. </p>
</div>
</div>
</article>
<article id="pagers" class="element">
<h2 class="element-title">Pagers</h2>
<div class="markup">
<div class="item-list">
<ul class="pager">
<li class="pager-first first"><a href="/blog" title="Go to first page" class="active">« first</a></li>
<li class="pager-previous"><a href="/blog" title="Go to previous page" class="active">‹ previous</a></li>
<li class="pager-item"><a href="/blog" title="Go to page 1" class="active">1</a></li>
<li class="pager-current">2</li>
<li class="pager-item"><a href="/blog?page=2" title="Go to page 3" class="active">3</a></li>
<li class="pager-item"><a href="/blog?page=3" title="Go to page 4" class="active">4</a></li>
<li class="pager-item"><a href="/blog?page=4" title="Go to page 5" class="active">5</a></li>
<li class="pager-next"><a href="/blog?page=2" title="Go to next page" class="active">next ›</a></li>
<li class="pager-last last"><a href="/blog?page=4" title="Go to last page" class="active">last »</a></li>
</ul>
</div>
</div>
<div class="markup">
<div class="item-list">
<ul class="pager">
<li class="pager-previous first"><a href="/blog" class="active">‹‹</a></li>
<li class="pager-current">2 of 8</li>
<li class="pager-next last"><a href="/blog?page=2" class="active">››</a></li>
</ul>
</div>
</div>
</article>
</section>
</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> -->
<!-- show source -->
<script src="js/kit/jquery.kit-source.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>