Skip to content


Subversion checkout URL

You can clone with
Download ZIP
tree: 86835926d9
Fetching contributors…

Cannot retrieve contributors at this time

214 lines (166 sloc) 10.723 kB
<!doctype html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<link rel="stylesheet" href="stylesheets/styles.css">
<link rel="stylesheet" href="stylesheets/pygment_trac.css">
<script src=""></script>
<script src="javascripts/main.js"></script>
<!--[if lt IE 9]>
<script src="//"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<p>A lightweight approach to building HTML5 applications with emphasis on elegance and simplicity</p>
<div id="banner">
<span id="logo"></span>
<a href="" class="button fork"><strong>Follow On GitHub</strong></a>
</div><!-- end banner -->
<div class="wrapper">
<h1>Application assembler</h1>
<p>Brunch is an assembler for HTML5 applications. It's agnostic to frameworks, libraries, programming, stylesheet &amp; templating languages and backend technology.</p>
<p>To simplify app development, brunch watches your files for changes and automatically wraps your scripts and templates in require.js modules. All build errors are printed to console. If you have growl / libnotify, brunch will use them too.</p>
<p>Brunch uses node.js plugins to speak with compilers. There are a bunch of plugins already:</p>
<li>Programming languages: JavaScript, <a href="">CoffeeScript</a>, <a href="">IcedCoffeeScript</a>, <a href="">Roy</a>
<li>Pre-compiled templates: <a href="">Handlebars.js</a>, <a href="">Jade</a>, <a href="">Mustache</a>, <a href="">Eco</a>
<li>Styles: CSS, <a href="">Stylus</a>, <a href="">LESS</a>, <a href="">Sass</a>
<li>Minifiers: <a href="">uglify.js</a>, <a href="">clean-css</a>
</ul><p>In case your favorite language / tool is not supported yet, you can write brunch plugin for it, it's <a href="">very simple</a>. Feel free to edit <a href="">the wiki page</a> and add new plugins there.</p>
<p>Brunch doesn't encourage you to use any particular technology, but application skeletons can do it. Some interesting skeletons:</p>
<a href="">Simple coffee (comes with brunch)</a>: very simple, HTML5 Boilerplate with Backbone.js. Main languages are CoffeeScript, Stylus and Handlebars. If you don't like coffeescript, there's a very same project that uses js as main scripting language: <a href="">simple js</a>.</li>
<a href="">Brunch with Chaplin</a>: Bootstrap, HTML5 Boilerplate, Chaplin classes over Backbone.js. Main languages are CoffeeScript, Stylus and Handlebars.</li>
<a href="">@jokull's skeleton</a>: Backbone.js, Zepto.js, forms, Stylus adjustable responsive grid, modernizr, Facebook login, slideshow.</li>
</ul><p>Of course, you can throw skeleton technologies away and build your own structure.</p>
<h2>Getting started</h2>
<p>You'll need node.js 0.6.10+. Execute:</p>
<pre><code>npm install -g brunch
<p>You're done!</p>
<p>To create a new project, execute <code>brunch new &lt;project name&gt;</code>.</p>
<p>Now you can edit the code. <code>app/</code> directory has files of your project and <code>vendor/</code> has libraries etc. that would not be wrapped in common.js modules.</p>
<p>To build it, execute <code>brunch build</code> in project directory.</p>
<p>To continuously rebuild the project on every change, run <code>brunch watch</code>.</p>
<p>To run a simple http server, execute <code>brunch watch --server</code>.</p>
<p>To install / uninstall a plugin, add it to <code>package.json</code> and execute <code>npm install</code>.</p>
<p>More detailed documentation located at <a href=""></a>. If you're upgrading from earlier version, you might be interested in <a href="">upgrading guide</a> and <a href="">changelog</a>.</p>
<p>We know of a few folks who are using brunch already. Ranging from internal tooling to high traffic facebook apps. Know someone else who is enjoying brunch already? Feel free to edit <a href="">the wiki page</a>!</p>
<p class="users">
<img src="images/users/jimbeam.png" alt="Jim Beam">
<img src="images/users/redbull.png" alt="Red Bull">
<img src="images/users/uber.png" alt="Uber">
<img src="images/users/ykky.png" alt="YKKY">
<p><a href="todos/public/">Todos</a> is a port of the famous backbone todos example app (<a href="">code</a>). Uses localStorage to persist data.</p>
<p>Sébastien Béal also made <a href="">an alternative</a> which uses Django + Django Rest Framework to persist data.</p>
<p><a href="twitter/public/">Tweet your brunch</a> is a simple twitter client (<a href="">code</a>). Uses <a href="">Chaplin</a> as app skeleton.</p>
<a href="twitter/public/">
<img src="images/screenshots/twitter.png" alt="">
<p><a href="">Blossom</a> is a lightweight project management tool for lean teams. Backbone.js is heavily used in combination with CoffeeScript to provide a smooth interaction experience. The RESTful backend is built with Flask on Google App Engine.</p>
<a href="">
<img src="images/screenshots/blossom.png" alt="Blossom" />
<p><a href="">ChainCal</a> is an iPhone app that helps you to track your daily goals in a minimalist, visual way. The app is written almost entirely in CoffeeScript, Backbone handles the models, collections and views, and persistence is done with a Backbone.sync localStorage adapter. Templates are written in Eco and the app is packaged with Brunch and deployed with Phonegap.</p>
<a href="">
<img src="images/screenshots/chaincal.png" alt="Chaincal" />
<p><a href=""></a> provides a space where photographers, artists and designers freely arrange their visual art on virtual walls. runs on Rails, but does not use much of the traditional stack, as the entire frontend is designed as a single page web app, using Backbone.js and CoffeeScript.</p>
<a href="">
<img src="images/screenshots/salon.png" alt="Salon" />
<a href=""></a> help you collect your thoughts and your opinions about your favorite topics, and discover others who care about the things you care about.
<a href="">
<img src="images/screenshots/snipit.png" alt="" />
<a href="">Uber</a> is everyone's private driver. Their <a href="">clients app</a> is made with brunch.
<p>Follow <a href="">@brunch</a> on twitter to get latest updates &amp; news.</p>
<h2>Contributing to Brunch</h2>
<li>Fork the <a href="">official repository</a>.</li>
<li>Clone your fork: <code>git clone;your-username&gt;/brunch.git</code></li>
<li>Make sure tests are passing for you: <code>npm install &amp;&amp; npm test</code></li>
<li>Create a topic branch: <code>git checkout -b features/new-feature-name</code></li>
<li>Add tests and code for your changes.</li>
<li>Once you're done, make sure all tests still pass: <code>npm install &amp;&amp; npm test</code></li>
<li>Make sure your code conforms <a href="">coffee style guide</a></li>
<li>Commit and push to your fork.</li>
<li>Create an pull request from your branch.</li>
<li>Sit back and enjoy.</li>
<h2>Brought to you by</h2>
<p class="builders">
<a href=""><img src="" alt="Paul Miller">
<span class="name">Paul</span> Miller</a>
<a href=""><img src="" alt="Nik Graf">
<span class="name">Nik</span> Graf</a>
<a href=""><img src="" alt="Thomas Schranz">
<span class="name">Thomas</span> Schranz</a>
<a href=""><img src="" alt="Stefan Huber">
<span class="name">Stefan</span> Huber</a>
<a href=""><img src="" alt="Jan Monschke">
<span class="name">Jan</span> Monschke</a>
<p><small>Hosted on GitHub Pages &mdash; Theme by <a href="!/michigangraham">mattgraham</a></small></p>
<!--[if !IE]><script>fixScale(document);</script><!--<![endif]-->
<script type="text/javascript">
var _gauges = _gauges || [];
(function() {
var t = document.createElement('script');
t.type = 'text/javascript';
t.async = true; = 'gauges-tracker';
t.setAttribute('data-site-id', '4f1631bbcb25bc723b000007');
t.src = '//';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(t, s);
Jump to Line
Something went wrong with that request. Please try again.