Topcoat Components _{^{for Ember.js}}

Use these components for your Ember.js JavaScript project that uses Adobe's Topcoat CSS framework. Inspired by ember-addons/bootstrap-for-ember

Download

• Minified
• Source

Demo and Examples

View the demo

Available Components

• Button
• Button Bar
• Checkbox
• Radio Button
• List
• Navigation Bar
• Notification
• Range
• Switch
• Tab Bar
• Text Input
• Search Input
• Textarea

Getting Started

Download the source from above or add to your project via Bower:

bower install ember-topcoat-components --save

Then include it in your HTML following jQuery, Handlebars, and Ember:

<!-- Frameworks -->
<script src="scripts/jquery.js"></script>
<script src="scripts/handlebars.js"></script>
<script src="scripts/ember.js"></script>

<!-- Components and other plugins -->
<script src="scripts/ember-topcoat-components.js"></script>

<!-- Your Ember App -->
<script src="scripts/app.js"></script>

You will now have access to the components within the TC Ember namespace. Before you can use these in your templates, you have to inject them into your app's scope. Quickly do this with the provided TC.inject() function:

// app.js
var App = Ember.Application.create();

// Define controllers, views, etc.
// ...

// Components
TC.inject(App);

// ...

App.Router.map(function () {
  // ...
});

Contributing

Prerequisites

• Node.js
• Bower and Grunt
• Compass

Once you have Node set up, you can install Bower and Grunt through the terminal:

npm install bower -g
npm install grunt-cli -g

Then install the Compass Ruby gem:

gem install compass

Finally, clone this repo to your computer, navigate to the root folder, and install the project dependencies:

git clone https://github.com/nfrasser/ember-topcoat-components.git
cd ember-topcoat-components
npm install
bower install

Development Tasks

This project uses Grunt for building code and running automated unit tests. Run a task from the terminal using grunt <taskName> To view all availiable tasks, run grunt --help. Here are tasks you'll use most often:

• build - Compile source code and the demo site
• test - Run the complete test suite with QUnit and Phantom.js
• server:demo - Begin watching files for changes and launch the demo site at localhost:9000
• server:test - Begin watching files for changes and launch the QUnit test site at localhost:9001
• publish - Publish the demo and documentation to GitHub pages
• default - JSHint, test, and build

License

MIT

Built With

• css
• javascript