-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
282 lines (206 loc) · 15.3 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
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
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Takeoff : Rocket Assisted</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- Google Font Example -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,700' rel='stylesheet' type='text/css'>
<!-- Minified CSS -->
<link href="css/min/styles.min.css" rel="stylesheet" />
<!-- Optionally use the non-minified CSS for development -->
<!-- <link href="css/libs/z.styles.concat.css" rel="stylesheet" /> -->
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<!-- Optionally use Modernizr without Respond.js -->
<!-- <script src="js/vendor/modernizr-2.6.2.js"></script> -->
<!-- Unicode CSS Loader : updated to add pathname within IIFE -->
<script>/* grunticon Stylesheet Loader | https://github.io/filamentgroup/grunticon | (c) 2012 Scott Jehl, Filament Group, Inc. | MIT license. */
(function() {
var pathname = window.location.pathname,
path = pathname.substring(0, pathname.lastIndexOf("/"));
window.grunticon=function(e){if(e&&3===e.length){var t=window,n=!!t.document.createElementNS&&!!t.document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect,A=function(A){var o=t.document.createElement("link"),r=t.document.getElementsByTagName("script")[0];o.rel="stylesheet",o.href=e[A&&n?0:A?1:2],r.parentNode.insertBefore(o,r)},o=new t.Image;o.onerror=function(){A(!1)},o.onload=function(){A(1===o.width&&1===o.height)},o.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="}};
grunticon( [ path +"/css/min/svg/icons.data.svg.css", path +"/css/min/svg/icons.data.png.css", path +"/css/min/svg/icons.fallback.css" ] );
})();
</script>
<noscript><link href="/Takeoff/css/min/svg/icons.fallback.css" rel="stylesheet"></noscript>
<!--[if lte IE 7]><script src="/Takeoff/css/fonts/icomoon/lte-ie7.js"></script><![endif]-->
</head>
<body>
<div class="container container-page">
<header class="grid-two-thirds m-grid-whole s-grid-whole">
<div class="grid-whole wrapper wrapper-hero">
<div class="container container-logo padded-inner">
<!-- Yes, the logo should be an image with alt text, but using this as an example of grunticon svg support with fallback png -->
<h1 class="logo icon-logo">Takeoff : Rocket Assisted</h1>
</div>
<div class="container container-hero" data-hero-image="img/takeoff.jpg" data-hero-image-small="img/takeoff-small.jpg">
<noscript><img id="hero" src="img/takeoff.jpg" alt=""></noscript>
</div>
</div>
<div class="grid-half m-grid-whole s-grid-whole wrapper wrapper-highlight">
<div class="vertical-align"></div>
<div class="grid-whole padded-inner-sides s-padded-vertical m-padded-vertical container container-highlight">
<p class="grid-whole m-grid-third s-grid-whole m-padded padded-vertical highlight">Grunt configuration for building <span>responsive websites</span></p>
<div class="grid-whole m-grid-third s-grid-whole m-padded l-padded-inner highlight"><i class="icon icon-star"></i><i class="icon icon-star"></i><i class="icon icon-star"></i></div>
<p class="grid-whole m-grid-third s-grid-whole m-padded padded-vertical highlight">Automated optimized project <span>development workflow</span></p>
</div>
<h2 class="grid-whole padded callout-project"><span>Get your project</span> <em>quickly off the ground</em></h2>
</div>
</header>
<div class="main grid-whole" role="main">
<div class="grid-whole padded-vertical">
<div class="grid-whole padded-inner-sides">
<h3>Rocket Assisted Development?</h3>
</div>
<div class="grid-half s-grid-whole padded-inner-sides">
<p><strong>Takeoff is a tool, introduction and jumpstart for <a href="http://gruntjs.com">Grunt</a> to get up and running quickly.</strong> Once you've taken flight with build tools you'll wonder why you've waited so long.</p>
</div>
<div class="grid-half s-grid-whole padded-inner-sides">
<p>Takeoff is perfect for those who don't have time for or feel overwhelmed with the idea of build tools. <a href="#target-audience">A bit more on the target audience</a>.</p>
</div>
</div>
<div class="grid-whole">
<div class="grid-half s-grid-whole padded-inner-sides">
<h3>Quick Launch</h3>
<ol class="list-padded">
<li>Download the <a href="https://github.com/tsvensen/Takeoff/archive/starter-template.zip">starter template</a> or use this <a href="https://github.com/tsvensen/Takeoff/archive/master.zip">demo</a></li>
<li>Open up a terminal window and cd into the project directory
<ul>
<li>Make sure the Grunt command line tools are installed globally, if not run <code>npm install grunt-cli -g</code></li>
<li><code>npm install</code> to install Takeoff (Grunt and Grunt plugins)</li>
</ul>
</li>
<li>It's recommended to have <code>grunt watch</code> running while coding. To end the `grunt watch` process, press <strong>CTRL-C</strong> in the terminal window</li>
<li>Build the project referencing the <a href="#grunt-tasks">Grunt Tasks</a></li>
<li>Make sure to update the paths in the last two lines of code in the <code><head></code> </li>
<li>Update the file paths of the last two lines in the <code><head></code> for icons.fallback.css and lte-ie7.js</li>
</ol>
</div>
<div class="grid-half s-grid-whole padded-inner-sides">
<h4>Preflight Checklist</h4>
<p>In order to takeoff make sure <a href="http://nodejs.org/" target="_blank">Node.js</a> and <a href="http://phantomjs.org/" target="_blank">PhantomJS</a> are installed locally, <strong>or</strong> optionally comment out the <a href="https://github.io/filamentgroup/grunticon#documentation">Grunticon</a> configuration and task in gruntfile.js.</p>
</div>
</div>
<div class="grid-whole">
<div class="grid-half s-grid-whole padded-inner-sides">
<h3>Step by Step Process</h3>
<ol class="list-padded">
<li>Download the <a href="https://github.com/tsvensen/Takeoff/archive/starter-template.zip">starter template</a> or use this <a href="https://github.com/tsvensen/Takeoff/archive/master.zip">demo</a></li>
<li>Open up a terminal window and cd into the project directory
<ul>
<li>Make sure the Grunt command line tools are installed globally, if not run <code>npm install grunt-cli -g</code></li>
<li><code>npm install</code> to install Takeoff (Grunt and Grunt plugins)</li>
</ul>
</li>
<li>Remove any Javascript defaults not needed: <code>/js/libs/</code></li>
<li>Remove any Sass not needed: <code>/css/sass/_mixins/</code>, <code>/css/sass/_vendor/</code></li>
<li>Get started by reading through <code>index.html</code></li>
<li>It's recommended to have <code>grunt watch</code> running while coding. To end the `grunt watch` process, press <strong>CTRL-C</strong> in the terminal window</li>
<li>Build the project referencing the <a href="#grunt-tasks">Grunt Tasks</a></li>
</li>
</ol>
</div>
<div class="grid-half s-grid-whole padded-inner-sides">
<h4 id="grunt-tasks">Grunt Tasks</h4>
<ul class="list-padded">
<li>Run <code>grunt</code> to manually publish</li>
<li>Run <code>grunt watch</code> to automate optimization while building</li>
<li>Run <code>grunt cleanup</code> to remove all processed Sass CSS files, run after adding or changing .scss files. Run occasionally and before deploying.</li>
<li>Run <code>grunt icons</code> to build SVG images with PNG fallbacks</li>
<li>Run <code>grunt minify</code> to use Yahoo!'s <a href="http://www.smushit.com/ysmush.it/">SmushIt</a> service to minify images</li>
</ul>
</div>
</div>
<div class="grid-whole">
<div class="grid-half s-grid-whole padded-inner-sides">
<h3>Grunt Setup</h3>
<p>Takeoff utilizes <a href="http://gruntjs.com">Grunt</a> to automate repetitive task and make your life easier with the following plugins:</p>
<ul>
<li><a href="https://npmjs.org/package/grunt-contrib-watch">watch</a> to initiate tasks after saving files</li>
<li><a href="https://npmjs.org/package/grunt-contrib-clean">clean</a> to delete the <code>css/processed</code> directory before preprocessing</li>
<li><a href="https://npmjs.org/package/grunt-contrib-concat">concat</a> to concatenate CSS and JS</li>
<li><a href="https://npmjs.org/package/grunt-contrib-csslint">csslint</a> to lint CSS</li>
<li><a href="https://npmjs.org/package/grunt-contrib-cssmin">cssmin</a> to minify CSS</li>
<li><a href="https://npmjs.org/package/grunt-contrib-jshint">jshint</a> to lint JS with JSHint</li>
<li><a href="https://npmjs.org/package/grunt-contrib-uglify">uglify</a> to minify JS with UglifyJS</li>
<li><a href="https://npmjs.org/package/grunt-smushit">smushit</a> to minify images</li>
<li><a href="https://npmjs.org/package/grunt-grunticon">grunticon</a> for SVG support with PNG fallback</li>
<li><a href="https://npmjs.org/package/svgo-grunt">svgo</a> for optimizing SVGs</li>
<li><a href="https://npmjs.org/package/grunt-contrib-compass">compass</a> for Sass+Compass support</li>
<li><a href="https://npmjs.org/package/grunt-contrib-sass">sass</a> for optional Sass only support without Compass</li>
</ul>
</div>
<div class="grid-half s-grid-whole padded-inner-sides">
<h4 id="target-audience">Target Audience</h4>
<p>Takeoff is for those who have yet to use build tools, recently started or have not used Grunt. For those with more experience it's a starter project ready for personalization, rip it apart and rebuild.</p>
<p>Familiarize yourself with multiple front-end technologies to improve workflow while saving time.</p>
<h4>A Few Notes</h4>
<p>The command line is used to run Grunt tasks, but development can occur in your favorite code/text editor.</p>
<p>If you would rather not have Sass or Compass integration and SVG icon support/fallback with a simpler setup then checkout <a href="http://tsvensen.github.io/GruntStart/">GruntStart</a>.</p>
</div>
</div>
<div class="grid-whole center padded-inner author"><span>Created by <a href="http://timsvensen.com" target="_blank">Tim Svensen</a></span> <iframe scrolling="no" frameborder="0" allowtransparency="true" src="http://platform.twitter.com/widgets/follow_button.1347008535.html#_=1347293944835&id=twitter-widget-0&lang=en&screen_name=tsvensen&show_count=false&show_screen_name=true&size=l" class="twitter-follow-button" style="width: 169px; height: 28px;" title="Twitter Follow Button" data-twttr-rendered="true"></iframe></div>
<div class="grid-whole wrapper-details">
<div class="grid-whole">
<div class="grid-half s-grid-whole padded-inner-sides">
<h3>Flying High</h3>
<p>This demo/project page (and parts of the starter template) include responsive tools and techniques, most of which are outline below.</p>
</div>
</div>
<div class="grid-half s-grid-whole padded-inner-sides">
<h4>Javascript</h4>
<ul>
<li><a href="http://modernizr.com">Modernizr</a> for feature testing and conditional loading with <a href="http://yepnopejs.com/">YepNope.js</a></li>
<li><a href="">Respond</a> for media query support across browsers (IE6-8 and more)</li>
<li><a href="https://github.com/weblinc/media-match">Media.match</a> for responding to media queries in Javascript</li>
<li><a href="http://jquery.com">jQuery</a> <em>(or not if you're a JS ninja)</em></li>
<li><a href="http://tsvensen.github.io/equalize.js/">equalize.js</a> jQuery plugin for equalizing the heights and widths of elements</li>
<li><a href="http://fittextjs.com/">FitText.js</a> jQuery plugin for responsive type layout, using a <a href="https://github.io/davatron5000/FitText.js/pull/64">responsive friendlier version</a></li>
<li><a href="https://github.com/desandro/imagesloaded">ImagesLoaded.js</a> jQuery plugin that triggers a callback after all selected/child images are loaded.</li>
</ul>
</li>
</div>
<div class="grid-half s-grid-whole padded-inner-sides">
<h4>CSS</h4>
<ul>
<li><a href="http://html5boilerplate.com/"><abbr title="HTML5 Boilerplate">H5BP</abbr></a>'s <a href="https://github.io/h5bp/html5-boilerplate/blob/master/css/main.css">main.css</a> and <a href="https://github.io/h5bp/html5-boilerplate/blob/master/css/normalize.css">normalize.css</a> for reset and sensible defaults</li>
<li><a href=""><abbr title="Extra-Strength Responsive Grids">ESRG</abbr></a> as a default grid system</li>
<li><a href="https://github.com/Schepp/box-sizing-polyfill"></a>boxsizing.htc</a> for IE6 & IE7 support</li>
<li>Webfonts with <a href="http://www.google.com/fonts">Google Fonts</a></li>
<li>Iconfonts using <a href="http://icomoon.io">Icomoon.io</a></li>
</ul>
</div>
</div>
</div><!-- /.main -->
<footer class="grid-whole">
<div class="grid-half m-grid-two-thirds s-grid-whole grid-centered center padded-inner">
<p class="contributor">Thanks to <a href="http://johnpolacek.com/">John Polacek</a> (<a href="http://twitter.com/johnpolacek">@johnpolacek</a>) for early feedback, testing, and contributing the initial stab of the starter template with responsive menu.</p>
<p class="legal">Author & copyright © 2013: <a href="http://timsvensen.com">Tim Svensen</a><br>Dual MIT & GPLv2 license</p>
</div>
</footer>
</div><!-- /.container-page -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<!-- Minified Javascript -->
<script src="js/min/scripts.min.js" type="text/javascript"></script>
<!-- Optionally use the non-minified Javascript for development -->
<!-- <script src="js/libs/z.scripts.concat.js" type="text/javascript"></script> -->
<!-- Add your own Google Analytics UA number or remove this snippet -->
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-34991331-5']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>