forked from Patternslib/Patterns
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
146 lines (141 loc) · 10.1 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
<!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/main.js" src="src/3rdparty/require-jquery.js" type="text/javascript"></script>
</head>
<body>
<header id="site-header">
<div class="hero-unit">
<blockquote>Welcome to Patterns. A library that aims to bring design and development together.</blockquote>
</div>
<nav class="navigation" id="global-nav">
<a href="#news" id="nav-news">News</a>
<a href="#patterns" id="nav-patterns">Patterns</a>
<a href="#demo" id="nav-demo">Demo</a>
<a href="http://patterns.readthedocs.org/en/latest/patterns" id="nav-documentation" class="float-after">Documentation</a>
<a href="#download" id="nav-get-it">Get it!</a>
</nav>
</header>
<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>
<div class="pat-collapsible closed">
<h3 class="button-slides" id="button-slides">View slides</h3>
<div class="pat-carousel" data-pat-carousel="control-arrows: true; auto-play: false; default: true; time-animation: 300;">
<img src="media/preso-plone-conference-2012/slide.001.jpg" alt="Slide 1" />
<img data-src="media/preso-plone-conference-2012/slide.002.jpg" alt="Slide 2" />
<img data-src="media/preso-plone-conference-2012/slide.003.jpg" alt="Slide 3" />
<img data-src="media/preso-plone-conference-2012/slide.004.jpg" alt="Slide 4" />
<img data-src="media/preso-plone-conference-2012/slide.005.jpg" alt="Slide 5" />
<img data-src="media/preso-plone-conference-2012/slide.006.jpg" alt="Slide 6" />
<img data-src="media/preso-plone-conference-2012/slide.007.jpg" alt="Slide 7" />
<img data-src="media/preso-plone-conference-2012/slide.008.jpg" alt="Slide 8" />
<img data-src="media/preso-plone-conference-2012/slide.009.jpg" alt="Slide 9" />
<img data-src="media/preso-plone-conference-2012/slide.010.jpg" alt="Slide 10" />
<img data-src="media/preso-plone-conference-2012/slide.011.jpg" alt="Slide 11" />
<img data-src="media/preso-plone-conference-2012/slide.012.jpg" alt="Slide 12" />
<img data-src="media/preso-plone-conference-2012/slide.013.jpg" alt="Slide 13" />
<img data-src="media/preso-plone-conference-2012/slide.014.jpg" alt="Slide 14" />
<img data-src="media/preso-plone-conference-2012/slide.015.jpg" alt="Slide 15" />
<img data-src="media/preso-plone-conference-2012/slide.016.jpg" alt="Slide 16" />
<img data-src="media/preso-plone-conference-2012/slide.017.jpg" alt="Slide 17" />
<img data-src="media/preso-plone-conference-2012/slide.018.jpg" alt="Slide 18" />
<img data-src="media/preso-plone-conference-2012/slide.019.jpg" alt="Slide 19" />
<img data-src="media/preso-plone-conference-2012/slide.020.jpg" alt="Slide 20" />
<img data-src="media/preso-plone-conference-2012/slide.021.jpg" alt="Slide 21" />
<img data-src="media/preso-plone-conference-2012/slide.022.jpg" alt="Slide 22" />
<img data-src="media/preso-plone-conference-2012/slide.023.jpg" alt="Slide 23" />
<img data-src="media/preso-plone-conference-2012/slide.024.jpg" alt="Slide 24" />
<img data-src="media/preso-plone-conference-2012/slide.025.jpg" alt="Slide 25" />
<img data-src="media/preso-plone-conference-2012/slide.026.jpg" alt="Slide 26" />
<img data-src="media/preso-plone-conference-2012/slide.027.jpg" alt="Slide 27" />
<img data-src="media/preso-plone-conference-2012/slide.028.jpg" alt="Slide 28" />
<img data-src="media/preso-plone-conference-2012/slide.029.jpg" alt="Slide 29" />
<img data-src="media/preso-plone-conference-2012/slide.030.jpg" alt="Slide 30" />
<img data-src="media/preso-plone-conference-2012/slide.031.jpg" alt="Slide 31" />
<img data-src="media/preso-plone-conference-2012/slide.032.jpg" alt="Slide 32" />
<img data-src="media/preso-plone-conference-2012/slide.033.jpg" alt="Slide 33" />
</div>
</div>
</section>
<section id="patterns">
<p>Patterns is a combination of a library and a workflow. That workflow goes something like this:</p>
<ol class="usps">
<li>
<p>Designer creates an HTML5 prototype. By including Patterns library, he can use a series of rich interaction patterns by applying dedicated classes and data-attributes instead of writing Javascript. The prototype he contains an example of all important page types with working interaction patterns such as form elements, modal panels, AJAX injections, etc. </p>
</li>
<li>
<p>Now the designer can validate a rich prototype with both the business stakeholders and the developer. All possibilities and impossibilities will surface before anything is built. This will prevent a lot change requests and headaches during the development phase</p>
</li>
<li>
<p>Designer hands the prototype over to the developer who copies most of the HTML over into his own templates. By doing that, all the interaction patterns work already as applied by the designer. In some cases, the developer can write some extra JavaScript, or apply some patterns on his own, as a prototype is never fully complete. </p>
</li>
</ol>
<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="demo" data-pat-inject="target: #content">
<nav class="components-list">
<a class="pat-inject" href="demo/injection/injection.html" title="Ajax pattern">Ajax pattern<sup>unknown</sup></a>
<a class="pat-inject" href="demo/switch/index.html" title="Switch">Attribute values switching<sup>β</sup></a>
<a class="pat-inject" href="demo/autofocus/index.html" title="Auto focus">Autofocus<sup>stable</sup></a>
<a class="pat-inject" href="demo/autoload/index.html" title="Auto load">Autoload*<sup>unknown</sup></a>
<a class="pat-inject" href="demo/auto-submit/index.html" title="Auto submit">Automatic form submit<sup>β</sup></a>
<a class="pat-inject" href="demo/auto-suggest/index.html" title="Auto suggest">Auto suggest<sup>β</sup></a>
<a class="pat-inject" href="demo/calendar/index.html" title="Calendar">Full calendar<sup>β</sup></a>
<a class="pat-inject" href="demo/carousel/index.html" title="">Carousel<sup>β</sup></a>
<a class="pat-inject" href="demo/toggle/index.html" title="Toggle">Class toggle<sup>β</sup></a>
<a class="pat-inject" href="demo/collapsible/index.html" title="collapsible">Collapsible<sup>stable</sup></a>
<a class="pat-inject" href="demo/depends/index.html" title="">Depends*<sup>β</sup></a>
<a class="pat-inject" href="demo/expandable-tree/index.html" title="">Expandable tree*<sup>unknown</sup></a>
<a class="pat-inject" href="demo/focus/index.html" title="">Focus<sup>stable</sup></a>
<a class="pat-inject" href="demo/validate/index.html" title="">Form validation*<sup>unknown</sup></a>
<a class="pat-inject" href="demo/checkedflag/index.html" title="checkedflag">Checked flag<sup>unknown</sup></a>
<a class="pat-inject" href="demo/checklist/index.html" title="checklist">Select/deselect groups of checkboxes<sup>unknown</sup></a>
<!--<a class="pat-inject" href="demo/edit-tinymce.html" title="Rich editor">Tiny MCE rich editor<sup>unknown</sup></a>-->
<a class="pat-inject" href="demo/menu/index.html" title="">Menu*<sup>unknown</sup></a>
<a class="pat-inject" href="demo/modal/index.html" title="Modal panels">Modal panels<sup>unknown</sup></a>
<a class="pat-inject" href="demo/chosen/index.html" title="">Multi combobox (Chosen)*<sup>unknown</sup></a>
<a class="pat-inject" href="demo/navigation/index.html" title="Navigation markers">Navigation markers<sup>unknown</sup></a>
<a class="pat-inject" href="demo/placeholder/index.html" title="">Placeholder*<sup>unknown</sup></a>
<a class="pat-inject" href="demo/selfhealing/index.html" title="">Selfhealing*<sup>unknown</sup></a>
<a class="pat-inject" href="demo/breadcrumbs/index.html" title="">Sliding breadcrumbs*<sup>unknown</sup></a>
<!--<a class="pat-inject" href="demo/setclass/index.html" title="">Setclass*</a>-->
<a class="pat-inject" href="demo/sorting/index.html" title="">Sorting*<sup>unknown</sup></a>
<a class="pat-inject" href="demo/tooltip/index.html" title="">Tooltips*<sup>β</sup></a>
<!--<a class="pat-inject" href="demo/transforms/index.html" title="">Transforms*<sup>unknown</sup></a>-->
<a class="pat-inject" href="demo/zoom/index.html" title="">Zoom<sup>β</sup></a>
</nav>
<div id="content">
<a class="pat-inject" href="demo/injection/injection.html" title="Ajax pattern">Ajax pattern<sup>unknown</sup></a>
</div>
</section>
<section id="download">
<h2>Got it? Get it!</h2>
<p>There are three ways of getting patterns in your site or prototype. You can download the patterns package and host it from your own server, or included it hosted from our server. It's up to you what you find easiest. </p>
<div class="column column-1">
<h3>1. Hosted externally</h3>
<p>To use patterns hosted externally, just paste the following line into your HTML:</p>
<textarea class="url" rows="1"><script data-main="http://www.patternslib.com/bundles/patterns.min.js" src="http://www.patternslib.com/src/3rdparty/require-jquery.js" type="text/javascript"></script></textarea>
</div>
<div class="column column-2">
<h3>2. Hosted on your own site</h3>
<p>
<a href="http://www.patternslib.com/bundles/patterns.min.js" class="download-patterns-large"><img src="media/icon-download.png" width="80" alt="" /><em class="label">Download</em></a>
</p>
</div>
<div class="column column-3">
<h3>3. Clone from Github</h3>
<p>
<a href="https://github.com/Patternslib/Patterns" class="download-patterns-large"><img src="media/icon-github.png" width="200px" alt="" /></a>
</p>
</div>
</section>
<!-- <footer id="appendix">
<a href="#">Github project</a> <a href="disclaimer">Disclaimer</a>
</footer> -->
</body>
</html>