UIElements

components.ui-component.js

import Ember from 'ember';

/**
 * mb - margin-bottom
 * mt - margin-top
 */
export default Ember.Component.extend({
  //classNames: ['ui-component'],
  classNameBindings: ['_mb', '_mt'],
  
  _mb: Ember.computed('mb', function getSpacing() {
  	return this.get('mb') ? `mb${this.get('mb')}` : '';
  }),
  
  _mt: Ember.computed('mt', function getSpacing() {
  	return this.get('mt') ? `mt${this.get('mt')}` : '';
  }),
});

components.ui-typography.js

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

const DEFAULT_SIZE = 'fz1';
const DEFAULT_WEIGHT = 'fw-normal';

/**
 * fw - font-weight
 * fz - font-size
 */
export default UIComponent.extend({
  classNameBindings: ['_fw', '_fz'],
  tagName: 'span',
  //classNames: ['ui-typography'],
  
  _fz: Ember.computed('fz', function getSpacing() {
  	return this.get('fz') ? `fz${this.get('fz')}` : DEFAULT_SIZE;
  }),
  
  _fw: Ember.computed('fw', function getSpacing() {
  	return this.get('fw') ? `fw-${this.get('fw')}` : DEFAULT_WEIGHT;
  }),
});

controllers.application.js

import Ember from 'ember';

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

styles.app.css

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

/* Padding and Margins */
.mb0, .mv0 { margin-bottom: 0; }
.mb1, .mv1 { margin-bottom: 4px; }
.mb2, .mv2 { margin-bottom: 6px; }
.mb3, .mv3 { margin-bottom: 8px; }
.mb4, .mv4 { margin-bottom: 10px; }
.mb5, .mv5 { margin-bottom: 12px; }
.mb6, .mv6 { margin-bottom: 14px; }

.mt0, .mv0 { margin-top: 0; }
.mt1, .mv1 { margin-top: 4px; }
.mt2, .mv2 { margin-top: 6px; }
.mt3, .mv3 { margin-top: 8px; }
.mt4, .mv4 { margin-top: 10px; }
.mt5, .mv5 { margin-top: 12px; }
.mt6, .mv6 { margin-top: 14px; }

.fw-thin { font-weight: thin; }
.fw-normal { font-weight: normal; }
.fw-bold { font-weight: bold; }

.fz1 { font-size: 8px; }
.fz2 { font-size: 12px; }
.fz3 { font-size: 16px; }
.fz4 { font-size: 20px; }
.fz5 { font-size: 24px; }
.fz6 { font-size: 28px; }

.white { color: white }
.black { color: black }

.fop1 { opacity: 90% }
.fop2 { opacity: 80% }
.fop3 { opacity: 70% }

.Sans-fz4-black-op3 { 
 	font-size: 20px;
  color: black;
  opacity: 70%
}

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>
{{#ui-typography
	tagName="h1"
  fz=6
}}
	Heading 1
{{/ui-typography}}

{{#ui-typography
	tagName="h2"
  fz=5
  fw=3
}}
	Heading 2
{{/ui-typography}}

{{#ui-typography
	tagName="p"
  fz=3
  class="hello world"
}}
	Paragraph
{{/ui-typography}}

{{#ui-typography
	tagName="p"
  size=1
  family="Sans"
  color="black"
  opacity=3
  weight=2
  type="caption"
}}
	Paragraph
{{/ui-typography}}

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"
  }
}

utils.typography-matrix.js

// hello world