UIComponent

components.ui-button-secondary.js

import Ember from 'ember';
import UIButton from './ui-button';
import layout from '../templates/components/ui-button';

export default UIButton.extend({
  classNames: ['ui-button--secondary'],
});

components.ui-button.js

import Ember from 'ember';
import UIComponent from './ui-component';
import layout from '../templates/components/ui-button';

export default UIComponent.extend({
  layout,
  tagName: 'button',
  classNames: ['ui-button'],
  classNameBindings: ['_buttonType'],
  
  type: 'primary',
  
  _buttonType: Ember.computed('type', function getButtonType() {
  	return `ui-button--${this.get('type')}`;
  }),
  
  click() {
    console.log('Button Clicked: ', this.get('type'));
    const onClickHandler = this.get('onClick');
    
    if (onClickHandler) {
     	onClickHandler(); 
    }
  },
});

components.ui-column.js

import Ember from 'ember';
import UIComponent from './ui-component';

export default UIComponent.extend({
  tagName: 'div',
  classNames: ['ui-column'],
  classNameBindings: ['_columnSpan', 'isLast:ui-column--last'],
  
  span: 24,
  
  _columnSpan: Ember.computed('span', function getColumnSpan() {
  	return this.get('span') ? `ui-column--span${this.get('span')}` : '';
  }),
});

components.ui-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNameBindings: ['_spacing', '_spacingTop', '_textWeight', '_textSize'],
  
  _spacing: Ember.computed('spacing', function getSpacing() {
  	return this.get('spacing') ? `ui-spacing-${this.get('spacing')}` : '';
  }),
  
  _spacingTop: Ember.computed('spacingTop', function getSpacing() {
  	return this.get('spacingTop') ? `ui-spacing-top-${this.get('spacingTop')}` : '';
  }),
  
  _textWeight: Ember.computed('textWeight', function getSpacing() {
  	return this.get('textWeight') ? `ui-text-${this.get('textWeight')}` : '';
  }),
  
  _textSize: Ember.computed('textSize', function getSpacing() {
  	return this.get('textSize') ? `ui-text-${this.get('textSize')}` : '';
  }),
});

components.ui-heading.js

import Ember from 'ember';
import UIComponent from './ui-component';

export default UIComponent.extend({
  _headingLevel: '1',
  classNames: ['ui-heading'],
  
  init() {
    this.set('tagName', `h${this.getWithDefault('level', '_headingLevel')}`);
    this._super(...arguments);
  },
});

components.ui-row.js

import Ember from 'ember';
import UIComponent from './ui-component';

export default UIComponent.extend({
  tagName: 'div',
  classNames: ['ui-row'],
});

components.ui-text.js

import Ember from 'ember';
import UIComponent from './ui-component';

export default UIComponent.extend({
  tagName: 'span',
  classNames: ['ui-text'],
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('style-page');
  this.route('component-page');
});

export default Router;

routes.component-page.js

import Ember from 'ember';

export default Ember.Route.extend({
});

routes.style-page.js

import Ember from 'ember';

export default Ember.Route.extend({
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

/* Utilities */
.ui-spacing-none { margin-bottom: 0; }
.ui-spacing-micro { margin-bottom: 4px; }
.ui-spacing-small { margin-bottom: 6px; }
.ui-spacing-base { margin-bottom: 8px; }
.ui-spacing-medium { margin-bottom: 10px; }
.ui-spacing-large { margin-bottom: 12px; }
.ui-spacing-xlarge { margin-bottom: 14px; }

.ui-spacing-top-none { margin-top: 0; }
.ui-spacing-top-micro { margin-top: 4px; }
.ui-spacing-top-small { margin-top: 6px; }
.ui-spacing-top-base { margin-top: 8px; }
.ui-spacing-top-medium { margin-top: 10px; }
.ui-spacing-top-large { margin-top: 12px; }
.ui-spacing-top-xlarge { margin-top: 14px; }

.ui-text-thin { font-weight: thin; }
.ui-text-normal { font-weight: normal; }
.ui-text-bold { font-weight: bold; }

.ui-text-micro { font-size: 8px; }
.ui-text-small { font-size: 12px; }
.ui-text-base { font-size: 16px; }
.ui-text-medium { font-size: 20px; }
.ui-text-large { font-size: 24px; }
.ui-text-xlarge { font-size: 28px; }

/* Buttons */
.ui-button {
  border: none;
  font-size: 16px;
  padding: 10px;
  cursor: pointer;
}

.ui-button--primary {
  color: #fff;
	background-color: #2980b9;
}

.ui-button--secondary {
  color: #2c3e50;
  background-color: #bdc3c7;
}

.ui-button--tertiary {
  color: #ecf0f1;
  background-color: #34495e;
}

.ui-row {
  width: 100%;
}

.ui-row:before,
.ui-row:after {
  display: table;
  content: "";
  line-height: 0;
  font-size: 0;
}

.ui-row:after {
 	clear: both; 
}

.ui-column {
 	margin-right: 2%;
  float: left;
  min-height: 1px;
  overflow: visible 
}

.ui-column--last {
 	margin-right: 0; 
}

.ui-row .ui-column--span6 {
 	width: 24.5%; 
}

.ui-row .ui-column--span18 {
 	width: 73.5%;
}

.custom-column { background-color: #16a085; }

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
{{link-to "Style" "style-page"}}
{{link-to "Component" "component-page"}}
<br>
<br>
{{outlet}}
<br>
<br>

templates.component-page.hbs

{{#ui-heading level=1 spacing="base"}}
	Actual Components
{{/ui-heading}}

{{#ui-heading level=2 spacing="small"}}
	Buttons
{{/ui-heading}}
{{#ui-button
	type="primary"
  spacing="small"
}}
	Primary
{{/ui-button}}

{{ui-button text="Secondary" type="secondary"}}
{{ui-button text="Tertiary" type="tertiary"}}

{{#ui-button
	type="primary"
}}
	{{#ui-text}}
  	Composed
  {{/ui-text}}
{{/ui-button}}

{{!-- Different approach to types of buttons --}}
{{ui-button-secondary text="Secondary"}}

{{#ui-heading level=2 spacing="small"}}
	Let's make that Grid!!!
{{/ui-heading}}
{{#ui-row
	spacing="base"
}}
	{{#ui-text}}
  	This row has spacing base
  {{/ui-text}}
	{{ui-button text="Secondary" type="secondary"}}
	{{ui-button text="Tertiary" type="tertiary"}}
{{/ui-row}}
{{#ui-row}}
	{{#ui-text}}
  	This row has no spacing
  {{/ui-text}}
	{{ui-button text="Secondary" type="secondary"}}
	{{ui-button text="Tertiary" type="tertiary"}}
{{/ui-row}}
{{#ui-row
	spacingTop="base"
}}
	{{#ui-column class="custom-column" span=6}}
  	{{#ui-text textWeight="bold"}}
      6 columns
    {{/ui-text}}
  {{/ui-column}}
  {{#ui-column class="custom-column" span=18 isLast=true}}
  	{{#ui-text textSize="medium"}}
      18 columns
    {{/ui-text}}
  {{/ui-column}}
{{/ui-row}}

templates.components.ui-button.hbs

{{#if hasBlock}}
	{{yield}}
{{else}}
	{{text}}
{{/if}}

templates.components.ui-column.hbs

{{yield}}

templates.components.ui-heading.hbs

{{yield}}

templates.components.ui-row.hbs

{{yield}}

templates.components.ui-text.hbs

{{yield}}

templates.style-page.hbs

<h1>Style based "Components"</h1>
<br>
<button class="ui-button ui-button--primary">Primary</button>
<button class="ui-button ui-button--secondary">Secondary</button>
<button class="ui-button ui-button--tertiary">Tertiary</button>
<br>

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}