/
index.html
252 lines (189 loc) · 13.2 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
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<!-- Use the .htaccess and remove these lines to avoid edge case issues.
More info: h5bp.com/i/378 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Yeoman</title>
<meta name="description" content="">
<!-- Mobile viewport optimized: h5bp.com/viewport -->
<meta name="viewport" content="width=device-width">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->
<!-- All JavaScript at the bottom, except this Modernizr build.
Modernizr enables HTML5 elements & feature detects for optimal performance.
Create your own custom Modernizr build: www.modernizr.com/download/ -->
<script src="js/vendor/modernizr-2.5.3.min.js"></script>
</head>
<body>
<!-- Prompt IE 6 users to install Chrome Frame. Remove this if you support IE 6.
chromium.org/developers/how-tos/chrome-frame-getting-started -->
<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
<script>
/*!
* $script.js Async loader & dependency manager
* https://github.com/ded/script.js
* (c) Dustin Diaz, Jacob Thornton 2011
* License: MIT
*/
(function(a,b){typeof module!="undefined"?module.exports=b():typeof define=="function"&&define.amd?define(a,b):this[a]=b()})("$script",function(){function q(a,b,c){for(c=0,j=a.length;c<j;++c)if(!b(a[c]))return k;return 1}function r(a,b){q(a,function(a){return!b(a)})}function s(a,b,i){function o(a){return a.call?a():d[a]}function p(){if(!--n){d[m]=1,k&&k();for(var a in f)q(a.split("|"),o)&&!r(f[a],o)&&(f[a]=[])}}a=a[l]?a:[a];var j=b&&b.call,k=j?b:i,m=j?a.join(""):b,n=a.length;return setTimeout(function(){r(a,function(a){if(h[a])return m&&(e[m]=1),h[a]==2&&p();h[a]=1,m&&(e[m]=1),t(!c.test(a)&&g?g+a+".js":a,p)})},0),s}function t(c,d){var e=a.createElement("script"),f=k;e.onload=e.onerror=e[p]=function(){if(e[n]&&!/^c|loade/.test(e[n])||f)return;e.onload=e[p]=null,f=1,h[c]=2,d()},e.async=1,e.src=c,b.insertBefore(e,b.firstChild)}var a=document,b=a.getElementsByTagName("head")[0],c=/^https?:\/\//,d={},e={},f={},g,h={},i="string",k=!1,l="push",m="DOMContentLoaded",n="readyState",o="addEventListener",p="onreadystatechange";return!a[n]&&a[o]&&(a[o](m,function u(){a.removeEventListener(m,u,k),a[n]="complete"},k),a[n]="loading"),s.get=t,s.order=function(a,b,c){(function d(e){e=a.shift(),a.length?s(e,d):s(e,b,c)})()},s.path=function(a){g=a},s.ready=function(a,b,c){a=a[l]?a:[a];var e=[];return!r(a,function(a){d[a]||e[l](a)})&&q(a,function(a){return d[a]})?b():!function(a){f[a]=f[a]||[],f[a][l](b),c&&c(e)}(a.join("|")),s},s})
var _gaq=[
['_setAccount','UA-32956520-1'],
['_setDomainName', '.yeoman.io'],
['_trackPageview'],['_trackPageLoadTime']
];
$script('https://apis.google.com/js/plusone.js');
$script(('https:'==location.protocol?'//ssl':'http://www')+'.google-analytics.com/ga.js');
$script("//platform.twitter.com/widgets.js");
</script>
<div class="container">
<!-- Masthead
================================================== -->
<header class="jumbotron masthead">
<div class="inner">
<div class="hero-unit">
<div class="logo-holder">
<img src="img/yeoman-logo.png"/>
</div>
<p class="hero-desc">
Why, hello! I'm Yeoman — a <strong>robust</strong> and opinionated client-side <strong>stack</strong>, comprised of tools and frameworks that can help developers quickly <strong>build</strong> beautiful web applications.
</p>
<p class="share">
<ul class='quick-links'>
<li class="google-follow">
Follow +Yeoman on
<a href="https://plus.google.com/101063139999404044459?prsrc=3" rel="publisher" style="text-decoration:none;"><img src="https://ssl.gstatic.com/images/icons/gplus-32.png" alt="" style="border:0;width:20px;height:20px;"/></a>
</li>
<li style="width: 120px; height: 25px;">
<g:plusone size="medium" annotation="inline" width="120" href="http://yeoman.io"></g:plusone>
</li>
<li style="width: 220px; height: 25px;">
<a href="https://twitter.com/yeoman" class="twitter-follow-button" data-show-count="true">Follow @yeoman</a>
</li>
<li style="width: 107px; height: 25px;">
<a href="https://twitter.com/share" class="twitter-share-button"
data-url="http://yeoman.io" data-text="Yeoman - Modern Workflows For Modern Web Apps" data-via="angularjs">Tweet</a>
</li>
</ul>
</p>
<p> </p>
<h3 class="hero-title">May I interest you in a preview?</h3>
<p class="hero-video">
<object style="height: 360px; width: 640px"><param name="movie" value="http://www.youtube.com/v/4qFwYiVjooc?version=3&feature=player_detailpage"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/4qFwYiVjooc?version=3&feature=player_detailpage" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="360"></object>
</p>
<p> </p>
<h3 class="hero-title">My features include:</h3>
<div class="row features">
<p> </p>
<ul class="span5">
<li>
<i class="icon-star"></i> <strong>Lightning-fast scaffolding</strong> — Easily scaffold new projects with customizable templates (e.g HTML5 Boilerplate, Twitter Bootstrap), AMD (via RequireJS) and more.<p></p>
</li>
<li>
<i class="icon-refresh"></i> <strong>Automatically compile CoffeeScript & Compass</strong> — Our LiveReload watch process automatically compiles source files and refreshes your browser whenever a change is made so you don't have to.<p></p>
</li>
<li>
<i class="icon-cog"></i> <strong>Automatically lint your scripts</strong> — All your scripts are automatically run against jshint to ensure they're following language best-practices.<p></p>
</li>
<li>
<i class="icon-upload"></i> <strong>Built-in preview server</strong> — No more having to fire up your own HTTP Server. My built-in one can be fired with just one command.<p></p>
</li>
<li>
<i class="icon-picture"></i> <strong>Awesome Image Optimization</strong> — I optimize all your images using OptiPNG and JPEGTran so your users can spend less time downloading assets and more time using your app.<p></p>
</li>
<li>
<i class="icon-wrench"></i> <strong>AppCache manifest generation</strong> — I generate your application cache manifests for you. Just build a project and boom. You'll get it for free.<p></p>
</li>
</ul>
<ul class="span5">
<li>
<i class="icon-tasks"></i> <strong>Killer build process</strong> — Not only do you get minification and concatenation; I also optimize all your image files, HTML, compile your CoffeeScript and Compass files, generate you an application cache manifest and, if you're using AMD, we'll pass those modules through r.js so you don't have to.<p></p>
</li>
<li>
<i class="icon-inbox"></i> <strong>Integrated package management</strong> — Need a dependency? It's just a keystroke away. I allow you to easily search for new packages via the command-line (e.g., yeoman search jquery), install them and keep them updated without needing to open your browser.<p></p>
</li>
<li>
<i class="icon-chevron-right"></i> <strong>Support for ES6 module syntax</strong> — Experiment with writing modules using the latest ECMAScript 6 module syntax. This is an experimental feature that transpiles back to ES5 so you can use the code in all modern browsers.<p></p>
</li>
<li>
<i class="icon-ok"></i> <strong>PhantomJS Unit Testing</strong> — Easily run your unit tests in headless WebKit via PhantomJS. When you create a new application, I also include some test scaffolding for your app.<p></p>
</li>
</ul>
<p> </p>
<p> </p>
</div>
<div class="row built-with">
<p> </p>
<h3 class="hero-title">Built On Open-Source</h3>
<p><span>Yeoman harnesses the power of a number of different open-source tools and libraries. We would be nowhere without the authors of these tools, so thank you to <a href="https://github.com/cowboy/grunt">Grunt</a>, <a href="http://twitter.github.com/bootstrap">Twitter Bootstrap</a>, <a href="http://phantomjs.org/">PhantomJS</a>, <a href="http://pivotal.github.com/jasmine/">Jasmine</a>, <a href="http://nodejs.org/">Node</a>, <a href="http://html5boilerplate.com/">HTML5 Boilerplate</a>, <a href="https://github.com/visionmedia/mocha">Mocha</a>, <a href="compass-style.org">Compass</a>, and a host of other best-in-class projects.</span></p>
<p> </p>
</div>
<div class="row built-with">
<p> </p>
<h3 class="hero-title">Videos</h3>
<p><h4>Paul Irish On Better Web App Development Through Tooling</h4></p>
<iframe width="640" height="360" src="http://www.youtube.com/embed/Mk-tFn2Ix6g?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>
<p> </p>
<p><h4>Yeoman On Google Developers Live With Addy Osmani</h4></p>
<iframe width="640" height="360" src="https://www.youtube.com/embed/Hl1sp9axHEY?feature=player_embedded" frameborder="0" allowfullscreen></iframe>
<p> </p>
<p><h4>Improved Developer Tooling And Yeoman</h4></p>
<iframe width="640" height="360" src="http://www.youtube.com/embed/3s6Yv9pVXZc?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>
<p> </p>
</div>
<div class="row">
<div class="span5 character-base">
<img src="img/yeoman-holding.png"/>
</div>
<div class="span5 newsletter">
<p> </p>
<p> </p>
<p><strong>Sign-up to be notified when I'm available:</strong></p>
<!--iframe hack to allow google docs to redirect within onsubmit limitations-->
<iframe name="hif" id="hif" style="display:none;"
onload="if(submitted) {window.location='thanks/index.html';}"></iframe>
<!--end hack-->
<form id="subscribeForm" action="https://docs.google.com/a/google.com/spreadsheet/formResponse?formkey=dDdQVGF5LWhMQVgxdjQxaWd3N1RxQmc6MQ&embedded=true&ifq" method="POST" id="ss-form" target="hif" onsubmit="submitted=true;">
<div class="errorbox-good">
<div class="ss-item ss-text"><div class="ss-form-entry"><label class="ss-q-title" for="entry_0">
</label>
<input placeholder="GitHub username" type="text" name="entry.1.single" value="" class="ss-q-short" id="entry_1">
<input id="required" title="Please enter a valid e-mail address" placeholder="Email address" type="text" name="entry.0.single" value="" class="{validate:{required:true, email:true, messages:{required:'Please enter your email address', email:'Please enter a valid email address'}}}" id="entry_0">
<input class="btn btn-danger" type="submit" name="submit" value="Subscribe"></div></div></div>
<br>
<input type="hidden" name="pageNumber" value="0">
<input type="hidden" name="backupCache" value="">
<div class="ss-item ss-navigate"><div class="ss-form-entry">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</header>
<!-- Footer
================================================== -->
<footer class="footer">
<p>Copyright Google, 2012.</p>
<p> </p>
</footer>
</div><!-- /container -->
<!-- JavaScript at the bottom for fast page loading: http://developer.yahoo.com/performance/rules.html#js_bottom -->
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.7.2.min.js"><\/script>')</script>
<!-- scripts concatenated and minified via build script -->
<script src="js/vendor/jquery.validate.js"></script>
<script src="js/main.js"></script>
<!-- end scripts -->
</body>
</html>