forked from Patternslib/Patterns
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
295 lines (270 loc) · 14.2 KB
/
index.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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Patterns library</title>
<link rel="stylesheet" href="style/base.css" type="text/css">
<script data-main="src/autoinit" src="bungledeps/require.js" type="text/javascript"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-37987884-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<link rel="icon" type="image/png" href="media/favicon.png" />
<!--[if IE]>
<link rel="shortcut icon" type="image/x-icon" href="media/favicon.ico" />
<![endif]-->
</head>
<body>
<header id="documentation">
<form action="getBundle" id="download">
<blockquote class="pat-auto-scale">
<p>
Patterns is a library that aims to bring webdesign and development together.
</p>
<p>
<a href="https://github.com/Patternslib/Patterns"><img src="media/github-logo.svg" height="60" widht="300px" /></a>
</p>
</blockquote>
<nav id="global-navigation" class="pat-bumper">
<a href="#" id="home" class="pat-bumper"><img src="style/logo.png" alt="Patterns brandmark" id="logo" /></a>
<a href="#documentation" class="documentation">Demos & documentation</a>
<a href="#download" class="download">Download</a>
</nav>
<fieldset class="checklist pat-checklist component-index" id="component-index">
<div class="functions">
<button class="select-all" type="button">Select all</button>
<button class="deselect-all" type="button">Deselect all</button>
</div>
<h2>Core</h2>
<fieldset class="checklist core">
<label class="modernizr">
<input type="checkbox" name="modernizr" checked/>
<a class="navigation modernizr">Modernizr</a>
</label>
<label class="less">
<input type="checkbox" name="less" checked/>
<a class="navigation less">Less</a>
</label>
<label class="prefixfree">
<input type="checkbox" name="prefixfree" checked/>
<a class="navigation prefixfree">Prefixfree</a>
</label>
</fieldset>
<h2>Behavioural</h2>
<fieldset class="checklist behavioural">
<label class="depends">
<input type="checkbox" name="pat/depends" checked/>
<a class="navigation depends" href="demo/depends/index.html" title="">Depends</a>
</label>
<!-- <label class="expandable">
<input type="checkbox" name="pat/expandable" checked/>
<a class="navigation expandable">Expandable</a>
</label> -->
<label class="inject">
<input type="checkbox" name="pat/inject" checked/>
<a class="navigation ajax" href="demo/inject/index.html" title="AJAX injection">Injection (AJAX)</a>
</label>
<label class="switch">
<input type="checkbox" name="pat/switch" checked/>
<a class="navigation switch" href="demo/switch/index.html" title="Switch">Switch</a>
</label>
<label class="toggle">
<input type="checkbox" name="pat/toggle" checked/>
<a class="navigation toggle" href="demo/toggle/index.html" title="Toggle">Class toggle</a>
</label>
</fieldset>
<h2>Forms</h2>
<fieldset class="checklist forms">
<label class="autofocus">
<input type="checkbox" name="pat/autofocus" checked/>
<a class="navigation autofocus" href="demo/autofocus/index.html" title="Auto focus">Autofocus</a>
</label>
<label class="auto-submit">
<input type="checkbox" name="pat/autosubmit" checked/>
<a class="navigation auto-submit" href="demo/auto-submit/index.html" title="Auto submit">Auto submit</a>
</label>
<label class="auto-suggest">
<input type="checkbox" name="pat/autosuggest" checked/>
<a class="navigation auto-suggest" href="demo/auto-suggest/index.html" title="Auto suggest">Auto suggest (Select2)</a>
</label>
<label class="chosen">
<input type="checkbox" name="pat/chosen" checked/>
<a>Auto suggest (Chosen)</a>
</label>
<label class="focus">
<input type="checkbox" name="pat/focus" checked/>
<a class="navigation focus" href="demo/focus/index.html" title="">Focus</a>
</label>
<label class="checked-flag">
<input type="checkbox" name="pat/checkedflag" checked/>
<a class="navigation checked-flag" href="demo/checked-flag/index.html" title="checkedflag">Checked flag</a>
</label>
<label class="checklist">
<input type="checkbox" name="pat/checklist" checked/>
<a class="navigation checkboxes" href="demo/checklist/index.html" title="checklist">Checklist</a>
</label>
<label class="form">
<input type="checkbox" name="pat/form-state" checked/>
<a>Form-state</a>
</label>
<label class="placeholder">
<input type="checkbox" name="pat/placeholder" checked/>
<a>Placeholder</a>
</label>
<label class="validate">
<input type="checkbox" name="pat/validate" checked/>
<a class="navigation validate" href="demo/validate/index.html">Validate</a>
</label>
<label class="legend">
<input type="checkbox" name="pat/legend" checked/>
<a class="navigation legend">Legend</a>
</label>
</fieldset>
<h2>Navigation</h2>
<fieldset class="checklist navigation">
<label class="tree">
<a class="navigation tree" href="demo/expandable-tree/index.html" title="">Expandable tree</a>
</label>
<label class="navigation">
<input type="checkbox" name="pat/navigation" checked/>
<a class="navigation navigation-marker" href="demo/navigation/index.html" title="Navigation markers">Navigation</a>
</label>
<label class="breadcrumbs">
<input type="checkbox" name="pat/breadcrumbs" checked/>
<a class="navigation breadcrumbs">Breadcrumbs</a>
</label>
</fieldset>
<h2>Layout</h2>
<fieldset class="checklist layout">
<label class="auto-scale">
<input type="checkbox" name="pat/autoscale" checked/>
<a class="navigation auto-scale" href="demo/auto-scale/index.html" title="Auto scale">Auto scale</a>
</label>
<label class="bumper">
<input type="checkbox" name="pat/bumper" checked/>
<a class="navigation bumper" href="demo/bumper/index.html" title="Bumper">Bumper</a>
</label>
<label class="equaliser">
<input type="checkbox" name="pat/equaliser" checked/>
<a class="navigation bumper" href="demo/equaliser/index.html" title="Equaliser">Equaliser</a>
</label>
<label class="grid">
<input type="checkbox" checked/>
<a class="navigation grid" href="demo/grid/index.html" title="Grid">Grid</a>
</label>
</fieldset>
<h2>Fancy stuff</h2>
<fieldset class="checklist fancy">
<label class="carousel">
<input type="checkbox" name="pat/carousel" checked/>
<a class="navigation carousel" href="demo/carousel/index.html" title="">Carousel</a>
</label>
<label class="collapsible">
<input type="checkbox" name="pat/collapsible" checked/>
<a class="navigation collapsible" href="demo/collapsible/index.html" title="collapsible">Collapsible</a>
</label>
<label class="forward">
<input type="checkbox" name="pat/forward" checked/>
<a class="navigation forward" href="demo/forward/index.html" title="forward">Forward clicks</a>
</label>
<label class="tinymce">
<input type="checkbox" name="pat/edit-tinymce" checked/>
<a class="navigation tiny-mce" href="demo/edit-tinymce/index.html" title="Rich editor">Tiny MCE</a>
</label>
<label class="modal">
<input type="checkbox" name="pat/modal" checked/>
<a class="navigation modal-panel" href="demo/modal/index.html" title="Modal panels">Modal panels</a>
</label>
<label class="image-crop">
<input type="checkbox" name="pat/image-crop" checked/>
<a class="navigation image-crop" href="demo/image-crop/index.html" title="Image crop">Image crop</a>
</label>
<label class="full-calendar">
<input type="checkbox" name="pat/fullcalendar" checked/>
<a class="navigation full-calendar" href="demo/calendar/index.html" title="Calendar">Full calendar</a>
</label>
<label class="gallery">
<input type="checkbox" name="pat/gallery" checked/>
<a class="navigation gallery" href="demo/gallery/index.html" title="Image galleries">Gallery</a>
</label>
<label class="markdown">
<input type="checkbox" name="pat/markdown" checked/>
<a class="navigation markdown" href="demo/markdown/index.html" title="Markdown rendering">Markdown</a>
</label>
<label class="menu">
<input type="checkbox" name="pat/menu" checked/>
<a>Menu</a>
</label>
<label class="slides">
<input type="checkbox" name="pat/slides" checked/>
<a class="navigation slides" href="demo/slides/index.html" title="">Slideshows</a>
</label>
<label class="slideshow-builder">
<input type="checkbox" name="pat/slideshow-builder" checked/>
<a class="navigation slideshow-builder" href="demo/slideshow-builder/index.html" title="">Custom slideshow builder</a>
</label>
<label class="sortable">
<input type="checkbox" name="pat/sortable" checked/>
<a class="navigation sortable" href="demo/sortable/index.html" title="">Sortable</a>
</label>
<label class="tooltip">
<input type="checkbox" name="pat/tooltip" checked/>
<a class="navigation tooltip" href="demo/tooltip/index.html" title="">Tooltips</a>
</label>
<label class="zoom">
<input type="checkbox" name="pat/zoom" checked/>
<a class="navigation zoom" href="demo/zoom/index.html" title="">Zoom</a>
</label>
</fieldset>
<fieldset class="button-bar">
<button type="submit">Download bundle</button>
<fieldset class="bundle-type">
Bundle type:
<label>
<input type="radio" name="minify" checked> Regular</input>
</label>
<label>
<input type="radio" name="minify" value="minify"> Minified</input>
</label>
</fieldset>
</fieldset>
</fieldset>
</form>
</header>
<div id="content">
<!-- <section id="news">
<p class="introduction">Did you see the patterns talk at the Plone Conference in Arnhem 2012? Here are the slides that were used for the demonstration.</p>
<a href="http://www.slideshare.net/CornelisKolbach/presentation-plone-conference-2012" class="button-slides" id="button-slides">View slides</a>
</section> -->
<section id="patterns">
<section class="row workflow">
<p class="icon-pencil-alt four columns">
Working with Patterns goes like this: The designer creates an HTML5 prototype. By including Patterns library, they can use a series of rich interaction patterns by applying dedicated classes and data-attributes instead of writing JavaScript. The prototype contains examples of all important page types with working interaction patterns such as form elements, modal panels, and AJAX injections.
</p>
<p class="icon-retweet four columns">
Now the designer can <strong>validate and iterate</strong> a rich prototype with both the business stakeholders and the developers. All possibilities and impossibilities will become apparent before anything is built. This will prevent a lot of change requests and headaches during the development phase.
</p>
<p class="icon-tools four columns">
The designer hands the prototype over to the developers who copy most of the HTML over into their own templates. By doing that, all the interaction patterns already work as prototyped by the designer. In some cases, the developers can write some extra JavaScript, or apply some patterns on their own, as a prototype is never fully complete.
</p>
</section>
<p>
For changes to an existing design, the process will look more or less the same, except everything will likely happen in shorter iterations and more in parallel.
</p>
</section>
<section id="credits" class="row">
<p class="lifted postit">Patterns library was initiated and conceptualised by <a href="http://www.cornae.com">Cornelis Kolbach</a>. Notable contributors include: <a href="http://github.com/chaoflow">Florian Friesdorf</a>, <a href="http://www.simplon.biz">Wichert Akkerman</a>, Humberto Sermeño, Marko Đurković.
</p>
</section>
<footer id="appendix">
<a href="http://github.com/patternslib/">GitHub project</a> <a href="http://colorschemedesigner.com/#3y21ThIow--Ni2K-BaoMBTsqKyBprC-Y1">Colour scheme</a>
</footer>
</div>
</body>
</html>