Example app found at http://goo.gl/K0Lf61
This app requires EmberCLI to be installed. You can install it via npm using npm install -g ember-cli
$ ember new guru-app
$ cd guru-app
Install additional npm and bower dependencies
$ npm install --save-dev broccoli-merge-trees
$ npm install --save-dev broccoli-static-compiler
$ npm install --save-dev broccoli-sass
$ bower install --save ratchet
Modify your Brocfile
/* global require, module */
var mergeTrees = require('broccoli-merge-trees');
var pickFiles = require('broccoli-static-compiler');
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var app = new EmberApp();
app.import('vendor/ratchet/js/modals.js');
app.import('vendor/ratchet/js/popovers.js');
app.import('vendor/ratchet/js/segmented-controllers.js');
app.import('vendor/ratchet/js/sliders.js');
app.import('vendor/ratchet/js/toggles.js');
var fonts = pickFiles('vendor/ratchet/fonts', {
srcDir: '/',
files: ['ratchicons.eot', 'ratchicons.svg', 'ratchicons.ttf', 'ratchicons.woff'],
destDir: '/fonts'
});
module.exports = mergeTrees([app.toTree(), fonts]);
Rename app/styles/app.css
to app/styles/app.scss
$ ember serve
and open http://localhost:4200
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
$ ember g adapter application
import DS from 'ember-data';
export default DS.RESTAdapter.extend({
host: 'http://addressbook-api.herokuapp.com'
});
$ ember g model contact
import DS from 'ember-data';
export default DS.Model.extend({
first : DS.attr('string'),
last : DS.attr('string'),
avatar : DS.attr('string'),
github : DS.attr('string'),
notes : DS.attr('string'),
fullName: function() {
return this.get('first') + ' ' + this.get('last');
}.property('first', 'last')
});
$ ember g route index
import Ember from 'ember';
export default Ember.Route.extend({
redirect: function() {
this.transitionTo('contacts.index');
}
});
$ ember g route contacts/index
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
return this.store.find('contact');
},
actions: {
refresh: function() {
this.controller.set('isRefreshing', true);
Ember.run.later(this, function() {
this.store.find('contact').then(function(data) {
this.controller.set('content', data);
this.controller.set('isRefreshing', false);
}.bind(this));
}, 3000);
}
}
});
$ ember g route contacts/show
import Ember from 'ember';
export default Ember.Route.extend({
model: function(params) {
return this.store.find('contact', params.id);
}
});
import Ember from 'ember';
var Router = Ember.Router.extend({
location: GuruAppENV.locationType
});
Router.map(function() {
this.resource('contacts', { path: '/contacts' }, function() {
this.route('show', { path: '/:id' });
});
});
export default Router;
@import "vendor/ratchet/sass/ratchet";
.content {
background-color: #efeff4;
&.has-footer {
padding-bottom: 45px;
}
}
.bar-nav {
background-color: #f7f7f7;
}
.table-view.has-header {
margin-top: 0px !important;
}
.table-view-cell.media img {
width: 40px;
height: 40px;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}
.card.padded {
padding: 20px;
}
.spin {
-webkit-animation: spin 2s infinite linear;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
@-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
Created a gist with some initial ideas for some simple ratchet components...
https://gist.github.com/kristianmandrup/8ec0dc2b9419d9afcbb5