#Ember Chi - Lightning Fast HTML/CSS Prototyping

Move blazingly fast with prototyping. Demo written for a talk. Use the following technologies:

• Live reloading of HTML/CSS.
• Use reusable components though {{partials}}.
• Structure your layout using {{outlet}}.
• Easily use SASS, LESS, or Stylus CSS preprocessors.

Links

• Talk
• Transcription of Talk
• Slides
• Demo Site

Happy prototyping!

Prototyping 'The Ember Way'

1. Install node.js (brew install nodejs on a Mac, apt-get install nodejs on unix).
2. Install ember-cli (npm install -g ember-cli).
3. Install Bower (npm install -g bower).
4. Create a new Ember project (ember new project-name).
5. Install dependencies (cd project-name && npm install && bower install).
6. Start the server (ember serve).
7. Start editing app/templates/application.hbs and app/styles/app.css.
8. Learn about {{outlet}}s and {{partial}}s to start reusing.

Using a CSS Preprocessor

After doing the above, install the preprocessor of your choice:

• LESS: npm install --save-dev broccoli-less-single
• Sass: npm install --save-dev broccoli-sass
• Stylus: npm install --save-dev broccoli-stylus-single

Modifying this app

1. Install node.js (brew install nodejs on a Mac, apt-get install nodejs on unix).
2. Install ember-cli (npm install -g ember-cli).
3. Clone the repo (git clone git@github.com:deanmarano/ember-chi.git).
4. Install dependencies (cd ember-chi && npm install).
5. Start the server (ember serve).

Have a question? Ask! @pleiadeez on Twitter or open an issue on this repo.