-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
103 lines (88 loc) · 4.14 KB
/
Copy pathindex.html
File metadata and controls
103 lines (88 loc) · 4.14 KB
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PatternPack</title>
<link href="assets/css/patternpack.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Quicksand:400,700|Open+Sans:400italic,400|Inconsolata' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="hero">
<div class="hero__container">
<a href="/" class="hero__logo">
<svg viewBox="0 0 170 40">
<use xlink:href="assets/images/images.svg#logo"></use>
</svg>
</a>
<ul class="hero__nav">
<li><a href="/about.html">About</a></li>
<li><a href="/quick-start.html">Quick Start</a></li>
<li><a href="https://github.com/patternpack/patternpack/blob/master/docs/docs.md">Guides & Resources</a></li>
<li><a href="http://slack.patternpack.org/">Slack</a></li>
<li><a href="http://github.com/patternpack/patternpack">GitHub</a></li>
</ul>
<div class="hero__headline">
<h1>Build and Document Your Interface.</h1>
<h1>Then Share the Code.</h1>
<a href="/quick-start.html" class="btn--light-blue">Get Started</a>
</div>
<div class="hero__illustrations">
<img src="assets/images/coffee.svg" class="coffee">
<img src="assets/images/glasses.svg" class="glasses">
<img src="assets/images/iphone-hand.svg" class="iphone-hand">
<img src="assets/images/laptop.svg" class="laptop">
<img src="assets/images/puzzle-hand.svg" class="puzzle-hand">
<img src="assets/images/puzzle-hand-2.svg" class="puzzle-hand-2">
<img src="assets/images/puzzle-piece.svg" class="puzzle-piece">
<img src="assets/images/sketch-flow.svg" class="sketch-flow">
<img src="assets/images/sketch-organization.svg" class="sketch-organization">
<img src="assets/images/sketch-rocket.svg" class="sketch-rocket">
</div>
</div>
</div>
<div class="features">
<div class="features__box">
<img src="assets/images/develop.svg" alt="Build Your Interface" />
<h3>Design & Build Your Interface</h3>
<p>PatternPack makes it easy to build a living design system. It is not a replacement for Bootstrap - it’s a set of tools for you to "build your own Bootstrap."</p>
</div>
<div class="features__box">
<img src="assets/images/code.svg" alt="Document how to Use It" />
<h3>Document The Pattern Library</h3>
<p>A living design system is a well documented one. PatternPack is a static site generator that lets you document your interface using Markdown and a single grunt task.</p>
</div>
<div class="features__box">
<img src="assets/images/share.svg" alt="Share the Code" />
<h3>Share The Code</h3>
<p>PatternPack keeps your design system alive by staying in sync with your project. Share your code via npm or bower and easily version with semantic versioning.</p>
</div>
</div>
<div class="get-started">
<div class="get-started__content">
<h2>Get Started</h2>
<pre><code>npm install patternpack --save-dev</code></pre>
<p>Set up your task in your <code>gruntfile.js</code>:</p>
<pre><code>patternpack: {
run: {},
build: {},
release: {}
}</code></pre>
<p>Start up your pattern library.</p>
<pre><code>$ grunt patternpack:run</code></pre>
</div>
</div>
<footer class="footer">
<div class="footer__content">
Made with <span class="heart">❤</span> at <a href="http://slalom.com/"><svg viewBox="0 0 77 20" class="slalom-logo"><use xlink:href="assets/images/images.svg#slalom-logo"></use></svg></a>
</div>
</footer>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-8513019-17', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>