Brunch with Chaplin and Initializr

<<<<<<< HEAD Brunch with Chaplin and Initializr is a skeleton (boilerplate) for Brunch based on Chaplin framework and Initializr.

It is a fork of Brunch with Chaplin extended by Initializr to include Twitter Bootstrap and HTML5 Boilerplate.

See those projects for more information.

For an alternate approach to add HTML5 Boilerplate and Twitter Bootstrap, see Brunch with Chaplin and Bootstrap. The primary difference between this project and that one is this project includes the individual bootstrap LESS style files and javascript plugin files so you can modify or omit ones you don't want. Brunch with Chaplin and Bootstrap includes only the compiled/merged versions of those files.

Brunch with Chaplin is a skeleton (boilerplate) for Brunch based on Chaplin framework.

Requires Brunch 1.4+.

Note: there is a problem running brunch test when package.json contains less-brunch in Brunch 1.3.0. The problem appears to have been fixed in Brunch 1.4.0-pre.

Getting started

Create new project via executing brunch new <project name> --s git://github.com/DallanQ/brunch-with-chaplin-and-initializr.git
Build the project with brunch b or brunch w.
Open the public/ dir to see the result.
Write your code. See Chaplin github page for documentation.

Example app using this skeleton

Here is a fork of the brunch Todos app that uses this skeleton.

If you want to learn how to use the brunch-with-chaplin framework, Ost.io and this Todos app fork are good places to begin. Just be aware that the ToDos app fork is my first effort with brunch-with-chaplin, so it's probably not optimal.

Integrating Initializr

Here's what was done to integrate Initializr

Generate Initializr with

Responsive bootstrap
Modernizr
LESS
chrome frame
IE Classes
Favicon

Remove files in the brunch-with-chaplin project that are no longer needed

rm vendor/styles/normalize.css

Rename the images directory to img so the image references work in the bootstrap style files

mv app/assets/images app/assets/img

Copy files; remove the pre-compiled bootstrap javascript files

cp ../initializr/favicon.ico app/assets
cp ../initializr/img/* app/assets/img
cp -r ../initializr/less/* vendor/styles
cp -r ../initializr/js/libs/bootstrap vendor/scripts
rm vendor/scripts/bootstrap/bootstrap.*

Copy the development version of modernizr from modernizr.com; Initializr includes only the minified version

curl http://modernizr.com/downloads/modernizr-2.5.3.js > vendor/scripts/modernizr-2.5.3.js

Edit config.coffee

add modernizr and bootstrap plugins to files.javascripts.order.before
replace normalize.css with style.less in files.stylesheets.order.before
set paths.ignored to vendor/styles/bootstrap

Edit index.html

replace body content with body content from initializr/index.html, minus the script tags at the bottom

Edit package.json

add less-brunch
add jsdom to devDependencies for brunch test

Other

Versions of software the skeleton uses:

HTML5Boilerplate 3.0.3
Twitter bootstrap 2.0.4
Modernizr 2.5.3
jQuery 1.7.2
Backbone 0.9.2
Underscore 1.3.3
Chaplin 2dc3b2 Example application built with the skeleton: Ost.io.

See Chaplin site for docs and more info.

Difference from Chaplin Boilerplate

Chaplin Boilerplate is a official boilerplate all for chaplin. This skeleton is almost the same, except a few changes:

Added Header.
CommonJS is used instead of AMD, because it's easier to use & debug.

Features

HTML5Boilerplate html & css are included.
CoffeeScript + Stylus + Handlebars as app languages (you can change this to anything you want)
Backbone as main MVC/MVP library, Chaplin as meta-framework.
Support of IE8 and up.
Cross-module communication using the Mediator and Publish/Subscribe patterns
Controllers for managing individual UI views
Rails-style routes which map URLs to controller actions
An application view as dispatcher and view manager
Extended model, view and collection classes to avoid repetition and enforce conventions
Strict memory management and object disposal
A collection with additional manipulation methods for smarter change events
A collection view for easy and intelligent list rendering

Authentication

If you build an application with authentication, there are some useful abstractions for it out there: https://github.com/chaplinjs/chaplin-auth.

License

The MIT license.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

lemieux / brunch-with-chaplin-and-initializr Goto Github PK