forked from randylien/Mandible
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathREADME.html
354 lines (306 loc) · 13.4 KB
/
README.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
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
lang="en" xml:lang="en">
<head>
<title>Mandible: SocialGenius's AudioVroom Buildtool Documentation</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta name="generator" content="Org-mode"/>
<meta name="generated" content="2011-09-22 Thu"/>
<meta name="author" content="Mauvis Ledford"/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<style type="text/css">
<!--/*--><![CDATA[/*><!--*/
html { font-family: Times, serif; font-size: 12pt; }
.title { text-align: center; }
.todo { color: red; }
.done { color: green; }
.tag { background-color: #add8e6; font-weight:normal }
.target { }
.timestamp { color: #bebebe; }
.timestamp-kwd { color: #5f9ea0; }
.right {margin-left:auto; margin-right:0px; text-align:right;}
.left {margin-left:0px; margin-right:auto; text-align:left;}
.center {margin-left:auto; margin-right:auto; text-align:center;}
p.verse { margin-left: 3% }
pre {
border: 1pt solid #AEBDCC;
background-color: #F3F5F7;
padding: 5pt;
font-family: courier, monospace;
font-size: 90%;
overflow:auto;
}
table { border-collapse: collapse; }
td, th { vertical-align: top; }
th.right { text-align:center; }
th.left { text-align:center; }
th.center { text-align:center; }
td.right { text-align:right; }
td.left { text-align:left; }
td.center { text-align:center; }
dt { font-weight: bold; }
div.figure { padding: 0.5em; }
div.figure p { text-align: center; }
textarea { overflow-x: auto; }
.linenr { font-size:smaller }
.code-highlighted {background-color:#ffff00;}
.org-info-js_info-navigation { border-style:none; }
#org-info-js_console-label { font-size:10px; font-weight:bold;
white-space:nowrap; }
.org-info-js_search-highlight {background-color:#ffff00; color:#000000;
font-weight:bold; }
/*]]>*/-->
</style>
<style> html,body{height: 100%;} body{padding: 5px 30px; h1,h2,h3 {font-family: arial, helvetica, sans-serif} </style>
<script type="text/javascript">
<!--/*--><![CDATA[/*><!--*/
function CodeHighlightOn(elem, id)
{
var target = document.getElementById(id);
if(null != target) {
elem.cacheClassElem = elem.className;
elem.cacheClassTarget = target.className;
target.className = "code-highlighted";
elem.className = "code-highlighted";
}
}
function CodeHighlightOff(elem, id)
{
var target = document.getElementById(id);
if(elem.cacheClassElem)
elem.className = elem.cacheClassElem;
if(elem.cacheClassTarget)
target.className = elem.cacheClassTarget;
}
/*]]>*///-->
</script>
</head>
<body>
<div id="content">
<h1 class="title">Mandible: SocialGenius's AudioVroom Buildtool Documentation</h1>
<pre class="example">
_,.---,---.,_
,;~' '~;,
,; ;,
; ; ,
,' /'
,; /' ;,
; ; . . ' ; ;
| ; ______ ______ ; |
| '/~" ~" . "~ "~\' |
| ~ ,-~~~^~, | ,~^~~~-, ~ |
| | }:{ | |
| l / | \ ! |
.~ (__,.--" .^. "--.,__) ~.
| ----;' / | \ `;---- |
\__. \/^\/ .__/
___ V| \ / |V
| | |T~\___!___!___/~T| |
| | |`IIII_I_I_I_IIII'| |
Mandible | | \,III I I I III,/ |
| \ `~~~~~~~~~~' /
| \ . . /
|__ \. ^ ./
^~~~^~~~^
</pre>
<div id="table-of-contents">
<h2>Table of Contents</h2>
<div id="text-table-of-contents">
<ul>
<li><a href="#sec-1">Welcome </a></li>
<li><a href="#sec-2">Mandible </a></li>
<li><a href="#sec-3">Mandible works by </a></li>
<li><a href="#sec-4">Requirements </a></li>
<li><a href="#sec-5">To use </a>
<ul>
<li><a href="#sec-5-1">For developers: </a></li>
<li><a href="#sec-5-2">For build managers: </a></li>
</ul>
</li>
<li><a href="#sec-6">Explanation of application architecture </a></li>
<li><a href="#sec-7">Additional tips </a></li>
<li><a href="#sec-8">Projects we use and recommend: </a></li>
</ul>
</div>
</div>
<div id="outline-container-1" class="outline-2">
<h2 id="sec-1">Welcome </h2>
<div class="outline-text-2" id="text-1">
<p>
Mandible is a build and development toolset pulled from SocialGenius's
<a href="http://www.audiovroom.com/">Audiovroom</a>, open-sourced for your using pleasure.
</p>
<p>
Audiovroom is the popular HTML5 Facebook Mobile app that lets you play your
friends like radio stations, across any browser or device.
</p>
<p>
See the full Facebook talk about responsive design, media queries, and cross-device HTML5 <a href="https://www.facebook.com/photo.php?v=10100722521328273">here</a>.
</p>
</div>
</div>
<div id="outline-container-2" class="outline-2">
<h2 id="sec-2">Mandible </h2>
<div class="outline-text-2" id="text-2">
<ul>
<li>is a collection of open-source and custom tools for organizing and prepping a web app for production.
</li>
<li>includes a copy of <a href="http://getskeleton.com/">Skeleton</a>, and dimension specific CSS files to get you started with a <a href="http://www.alistapart.com/articles/responsive-web-design/">responsive</a> design.
</li>
<li>makes your app mobile-ready from the start with the right HTML meta and CSS (taken from <a href="http://html5boilerplate.com/mobile">HTML5 boilerplate</a>).
</li>
<li>gives your web app a (customizable) folder structure for development and production.
</li>
<li>concatinates and minifies your CSS and JS files.
</li>
<li>Comes with <a href="http://documentcloud.github.com/underscore/#template">Underscore</a> for JavaScript templating.
</li>
<li>allows you to create your own folder hierarchy of JavaScript templates.
</li>
<li>automatially creates and maintains production assets (css, js, templates).
</li>
<li>can watch for CSS and template changes and concat them on the fly.
</li>
<li>Includes a makeFile for concating JS, CSS, and concating templates in one easy step.
</li>
<li>detects for IE and includes <a href="http://remysharp.com/2010/10/08/what-is-a-polyfill/">polyfills</a> like <a href="https://github.com/scottjehl/Respond">respond.js</a> for parity in IE.
</li>
</ul>
<p>
Mandible is targetted toward web apps built on JavaScript MVC frameworks (we love <a href="http://documentcloud.github.com/backbone/">Backbone</a>).
</p></div>
</div>
<div id="outline-container-3" class="outline-2">
<h2 id="sec-3">Mandible works by </h2>
<div class="outline-text-2" id="text-3">
<ul>
<li>compressing and minifying your CSS with <a href="http://sass-lang.com/">Sass</a>.
</li>
<li>compresses and minifying your JS with <a href="https://github.com/mishoo/UglifyJS">UglifyJS</a>.
</li>
<li>externalizing your JavaScript templates and watching for changes with <a href="https://github.com/krunkosaurus/NodeInterval">NodeInterval</a>.
</li>
</ul>
</div>
</div>
<div id="outline-container-4" class="outline-2">
<h2 id="sec-4">Requirements </h2>
<div class="outline-text-2" id="text-4">
<p> To use this tools you need to have the following installed:
</p><ul>
<li>You need to install Ruby (already installed on all macs).
</li>
<li>You need to install <a href="http://sass-lang.com/">Sass</a>. <code>sudo gem install sass</code>
</li>
<li>You need to instal <a href="http://nodejs.org/">Node</a>. (Compile it from <a href="http://nodejs.org/#download">here</a>.)
</li>
</ul>
<p>Note: Compressed assets are not included in this repo. To see the sample code you must run "make" in the root folder at least once. (Which require you have the above installed.)
</p></div>
</div>
<div id="outline-container-5" class="outline-2">
<h2 id="sec-5">To use </h2>
<div class="outline-text-2" id="text-5">
</div>
<div id="outline-container-5-1" class="outline-3">
<h3 id="sec-5-1">For developers: </h3>
<div class="outline-text-3" id="text-5-1">
<ol>
<li>In terminal, run the two shell scripts in <code>/bin</code>. Keep them open while you do your development and all your CSS and templates changes are automatically merged into the production ready files.
</li>
<li>While working, view your changes in <code>/assets/index_uncompressed.html</code>
</li>
<li>When you're done for the day, compress your JavaScript files by typing <code>make</code> in the root project folder. In case your bin scripts are off, this will also automatically compress all CSS, JS, and rerender the templates - but only when necessary.
</li>
<li>Verify the production file at <code>/assets/index.html</code>.
</li>
</ol>
</div>
</div>
<div id="outline-container-5-2" class="outline-3">
<h3 id="sec-5-2">For build managers: </h3>
<div class="outline-text-3" id="text-5-2">
<ol>
<li>Simply type <code>make -B</code> to force all CSS, JS, and templates processes to run. Push to production box(es) and / or CDN.
</li>
</ol>
</div>
</div>
</div>
<div id="outline-container-6" class="outline-2">
<h2 id="sec-6">Explanation of application architecture </h2>
<div class="outline-text-2" id="text-6">
<pre class="example">
.
├── /assets <-- "Production" folder container html and compressed assets.
│ ├── index.html <-- The production-ready file you want to view to launch this webapp.
│ └── index_uncompressed.html <-- The uncompressed js prod version with templates, use this during daily development.
├── /src <-- "Development" folder container html and uncompressed assets.
│ ├── index.html <-- Prod file without templates. Just used to generate real prod file. Never use it.
│ └── index_uncompressed.html <-- Dev index file with raw js. Do your development here.
├── /bin <-- Dev shell scripts.
│ ├── sass-watch.sh <-- Run this in another terminal tab to watch for css changes. It will automatically concat and minify to assets/css
│ └── template-watch.sh <-- Run this in another terminal tab to watch for template changes. All templates get concatinated into assets/*.html files.
├── /vendor <-- Open-source shell scripts referenced by /bin scripts.
└── makefile <-- make utility for concatinating and minifying all js (and css and templates) to assets folder.
</pre>
</div>
</div>
<div id="outline-container-7" class="outline-2">
<h2 id="sec-7">Additional tips </h2>
<div class="outline-text-2" id="text-7">
<ul>
<li>You should probably put production ready folders <code>assets/js</code> and <code>assets/js</code> under <code>.gitignore</code> so they aren't comitted to your repository (this is done for you.)
</li>
<li>If you want just the SASS bits steal just the sass script in <code>/bin/watch-css.sh</code> and <code>src/scss/index.scss</code>.
</li>
<li>If you want just the js compression features Steal the <code>makeFile</code> and the <code>vendor</code> folder.
</li>
<li>If you want just the template concat / watch features clone <a href="https://github.com/krunkosaurus/NodeInterval">NodeInterval</a>.
</li>
<li>We use <a href="http://html5boilerplate.com/mobile">HTML Mobile Boilerplate</a>. Read up on it for lots of good tidbits like the ellipsis class.
</li>
<li>We recommend <a href="http://css3pie.com/">CSSPie</a> for advance CSS3 support in IE.
</li>
<li>We'll probably be open-sourcing our Backbone layer that fits on top of this in the future.
</li>
</ul>
</div>
</div>
<div id="outline-container-8" class="outline-2">
<h2 id="sec-8">Projects we use and recommend: </h2>
<div class="outline-text-2" id="text-8">
<ul>
<li><a href="http://documentcloud.github.com/backbone/">backbone.js</a> - MVC JavaScript framework that utilizes <a href="http://jquery.com/">jQuery</a> and
<a href="http://documentcloud.github.com/underscore/">underscore.js</a>.
Underscore's templating ability is especially useful.
</li>
<li><a href="http://getskeleton.com/">Skeleton</a> - Grid-based CSS layout system to allow content to reflow to various
browser widths.
</li>
<li><a href="https://developers.facebook.com/docs/reference/javascript/">Facebook JavaScript SDK</a> - The JavaScript SDK provides a rich set of
client-side functionality for accessing Facebook's server-side API calls.
</li>
<li><a href="http://www.schillmania.com/projects/soundmanager2/">Soundmanager 2</a> - Cross-browser audio support.
</li>
<li><a href="http://cubiq.org/iscroll-4">iScroll 4</a> - JS lib for native scrolling ability in subsections.
</li>
<li><a href="http://sass-lang.com/">Sass</a> - Ruby Gem for organizing and minifying CSS.
</li>
<li><a href="https://github.com/krunkosaurus/NodeInterval">Node Interval</a> - Node utility for managing and concatenating template files.
</li>
</ul>
</div>
</div>
<div id="postamble">
<p class="date">Date: 2011-09-22 Thu</p>
<p class="author">Author: Mauvis Ledford</p>
<p class="creator">Org version 7.6 with Emacs version 23</p>
<a href="http://validator.w3.org/check?uri=referer">Validate XHTML 1.0</a>
</div>
</div>
</body>
</html>