-
Notifications
You must be signed in to change notification settings - Fork 12
/
index.html
134 lines (128 loc) · 6.28 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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<title>Brick</title>
<script src="/bower_components/platform/platform.js"></script>
<link rel="import" href="/bower_components/brick/dist/brick.html">
<link rel="stylesheet" href="//code.cdn.mozilla.net/fonts/fira.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="/media/css/site.css">
<link rel="stylesheet" href="/media/css/highlight.css">
</head>
<body unresolved>
<brick-layout horizontal class="main" id="main">
<header drawer-lt-s>
<a class="logo" href="/index.html"><h1>Brick</h1></a>
<nav>
<ul>
<!-- <li><a is="route-link" href="/about.html">About</a></li>-->
<li><a is="route-link" href="/blog/">Blog</a></li>
<!-- <li><a is="route-link" href="/docs/faq.html">FAQ</a></li> -->
<!-- <li>
<a is="route-link" href="/download.html">
<i class="fa fa-download"></i> Download
</a>
</li> -->
</ul>
<ul>
<!-- <li><a is="route-link" href="/docs/usage.html">Usage</a></li> -->
<li><div>Components</div>
<ul>
<li><a is="route-link" href="/docs/brick-action.html">action</a></li>
<li><a is="route-link" href="/docs/brick-appbar.html">appbar</a></li>
<li><a is="route-link" href="/docs/brick-calendar.html">calendar</a></li>
<li><a is="route-link" href="/docs/brick-deck.html">deck</a></li>
<li><a is="route-link" href="/docs/brick-flipbox.html">flipbox</a></li>
<li><a is="route-link" href="/docs/brick-form.html">form</a></li>
<li><a is="route-link" href="/docs/brick-layout.html">layout</a></li>
<li><a is="route-link" href="/docs/brick-menu.html">menu</a></li>
<li><a is="route-link" href="/docs/brick-tabbar.html">tabbar</a>
</li>
<li><a is="route-link" href="/docs/brick-storage-indexeddb.html">storage-indexeddb</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="https://twitter.com/mozbrick">
<i class="fa fa-twitter fa-fw"></i> Twitter
</a>
</li>
<li>
<a href="https://github.com/mozbrick/brick">
<i class="fa fa-github fa-fw"></i> GitHub
</a>
</li>
</ul>
</nav>
</header>
<article flex>
<brick-action trigger="click" target="main" action="toggleDrawer">
<button class="menu" hide-gt-xs><i class="fa fa-bars"></i></button>
</brick-action>
<h1 id="brick">Brick</h1>
<p>Brick is a collection of UI components designed for the easy and quick building of web application UIs. Brick components are built using the Web Components standard to allow developers to describe the UI of their app using the HTML syntax they already know.</p>
<h2 id="install">Install</h2>
<p>Brick can be installed using the <a href="http://bower.io">Bower</a> package manager:</p>
<pre><code class="lang-sh"><div class="highlight"><pre>bower install mozbrick/brick
</pre></div>
</code></pre>
<p>To use Brick in your project, place the following in the <code><head></code> of your main HTML:</p>
<pre><code class="lang-html"><div class="highlight"><pre><span class="nt"><script </span><span class="na">src=</span><span class="s">"bower_components/brick/dist/platform/platform.js"</span><span class="nt">></script></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"import"</span> <span class="na">href=</span><span class="s">"bower_components/brick/dist/brick.html"</span><span class="nt">></span>
</pre></div>
</code></pre>
<p>If you are already using Polymer, platform.js or a web browser that supports Web Components, you do not need the above <code><script></code> tag.</p>
<h2 id="development">Development</h2>
<p>Brick (and its components) are developed using tools built in JavaScript running on <a href="http://nodejs.org/download/">node.js</a>.</p>
<p>The individual components are developed in their own GitHub repositories.</p>
<p>The <code>mozbrick/brick</code> repository contains the distributions of all the components packaged together as well as tools for building the distributions.</p>
<p>To work on Brick, you will need the following node tools:</p>
<pre><code class="lang-bash"><div class="highlight"><pre>npm install -g bower gulp
</pre></div>
</code></pre>
<h3 id="building-brick-from-source">Building Brick from source</h3>
<p>Once you have the prerequisites, you're ready to clone and build from source.</p>
<p>Run the following:</p>
<pre><code class="lang-bash"><div class="highlight"><pre>git clone [email protected]:mozbrick/brick.git
<span class="nb">cd </span>brick
npm install
bower install
gulp build
</pre></div>
</code></pre>
</article>
</brick-layout>
<script>
var RouteLinkProto = Object.create(HTMLAnchorElement.prototype);
RouteLinkProto.attachedCallback = function () {
var pathname = location.pathname;
var route = this.getAttribute('route');
if (!route) {
route = '^' + this.getAttribute('href');
}
route = new RegExp(route);
if (route.test(pathname)) {
this.classList.add('active');
}
};
document.registerElement('route-link', {
prototype: RouteLinkProto,
extends: 'a'
});
document.addEventListener('WebComponentsReady', function(){
document.body.removeAttribute('unresolved');
});
</script>
<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-52905820-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>