This repository has been archived by the owner on May 1, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 33
/
index.html
143 lines (100 loc) · 6.01 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
---
layout: home
title: Pattern Lab | Build Atomic Design Systems
---
<section class="banner banner--feature">
<h1 class="banner__title">Create atomic design systems with Pattern Lab.</h1>
<div class="btn-group">
<a href="/download.html" class="btn">Download</a>
<a href="/docs/index.html" class="btn">Documentation</a>
<a href="/demos.html" class="btn">Demos</a>
</div><!--end .btn-group-->
</section><!--end .banner-->
<section class="section section--center" id="about">
<div class="section__header">
<div class="section__inner">
<p class="intro">Pattern Lab helps you and your team build thoughtful, pattern-driven user interfaces using <a href="http://atomicdesign.bradfrost.com" rel="external">atomic design</a> principles.</p>
</div>
</div>
<div class="section__body">
<video autoplay loop playsinline muted>
<source src="{{ 'assets/atomic-design.mp4' | prepend: site.baseurl }}" type="video/mp4" />
</video>
</div><!--end .section__body-->
</section><!--end .section-->
<section class="section" id="features">
<div class="g-split">
<div class="g-split__feature">
<p class="intro">At its core, Pattern Lab is a static site generator (powered by either <a class="g-split__feature__link" href="/download.html">PHP</a> or <a class="g-split__feature__link" href="/download.html">Node</a>) that stitches together UI components. But there's a whole lot more to it than that!</p>
</div>
<div class="g-split__secondary">
<div class="tile">
<h3>Nested Patterns</h3>
<p>Pattern Lab lets you include UI patterns inside each other like Russian nesting dolls. Make a change to a pattern, and see those changes reflected anywhere the pattern is included!</p>
</div>
<div class="tile tile--fancy">
<h3>Design With Dynamic Data</h3>
<p>Unlike static design tools, Pattern Lab lets you easily swap in different representative content into your components to ensure they can handle the dynamic nature of your content.</p>
</div>
</div><!--end .g-split__secondary-->
</div><!--end .g-split-->
<ul class="g g--3up tile-list">
<li class="gi tile">
<h3>Tool Agnostic</h3>
<p>Pattern Lab doesn't impose any tools or libraries on you, which means you can choose what's right for your project. Like Sass? Cool, go for it! Don't need it? That's fine too! jQuery? No jQuery? Totally up to you. </p>
</li>
<li class="gi tile tile--alt2">
<h3>Language Agnostic</h3>
<p>Atomic design is a helpful mental model, not rigid doctrine. You can rename pattern categories to whatever makes the most sense for your organization and team.</p>
</li>
<li class="gi tile tile--alt">
<h3>Pattern Documentation</h3>
<p>Define and describe your UI patterns so your entire team can start speaking the same language to collaborate more effectively.</p>
</li>
<li class="gi tile tile--alt2">
<h3>Viewport Resizer Tools</h3>
<p>Pattern Lab has device-agnostic viewport resizing tools to ensure your design system is fully responsive and embraces the intrinsic fluidity of the web.</p>
</li>
<li class="gi tile tile--fancy-2">
<h3>Annotations</h3>
<p>Lose the gigantic static PDFs and annotate your living, breathing UI from within Pattern Lab. Clients and colleagues can review annotations right within the browser.</p>
</li>
<li class="gi tile tile--alt2">
<h3>Pattern Lineage</h3>
<p>Speed up your design, development, and QA time by quickly seeing which patterns make up any given component, as well as seeing where each component is employed. </p>
</li>
<li class="gi tile">
<h3>Pattern Starter Kits</h3>
<p>Spin up Pattern Lab loaded with frameworks like Bootstrap, Foundation, or Material Design. Or of course start from scratch and build your own custom design system.</p>
</li>
<li class="gi tile tile--alt">
<h3>Versatile</h3>
<p>Pattern Lab can be used for simple rapid prototyping or for developing production-level frontend code. Some teams have even modified it to power their live sites!</p>
</li>
<li class="gi tile">
<h3>Extensible</h3>
<p>Choose your own templating engine to better match your production environment. Also you can or build a plugin to extend Pattern Lab's capabilities even further.</p>
</li>
</ul><!--end .g--3up-->
</section>
<section class="section section-split section--reversed" id="documentation">
<div class="g-split">
<div class="g-split__feature">
<div>
<h2 class="section__title">How It Works</h2>
<p>Learn how to get Pattern Lab up and running, use patterns, work with dynamic data, and make the most of all Pattern Lab's features.</p>
</div>
</div>
<div class="g-split__secondary">
<a href="/docs/index.html" class="btn btn--flex">View Pattern Lab's Documentation</a>
</div><!--end .g-split__secondary-->
</div><!--end .g-split-->
</section><!--end .section-->
<section class="section section--center" id="credits">
<div class="section__header">
<div class="section__inner">
<p class="intro">Pattern Lab is brought to life by <a href="https://github.com/pattern-lab/patternlab-node/graphs/contributors">people</a> from around the world. You can <a href="http://patternlab.io/contribute.html">contribute</a> to the project on <a href="https://github.com/pattern-lab/patternlab-node">Github</a> and join the discussion on <a href="https://gitter.im/pattern-lab/home">Gitter</a> and <a href="https://twitter.com/patternlabio">Twitter</a>.</p>
</div>
</div>
</div><!--end .section__body-->
</section><!--end .section-->