Lisa Gringl

Francesco Novy

UI Design



JS Development




  • Collaboration
  • Why ...
    • ... should designers code?
    • ... should developers design?
  • Documentation: Why & How?
  • Code Documentation
  • Living Styleguide
  • Component Guide


Between Developers & Designers


Common Workflow

Better Workflow


Why you need to be able to code


When you try to code for the first time


<div class="message {{if isError "message--error"}}">
  Info Message!

Handlebars Code Example

  {{#each items as |item|}}
    <li class="my-item {{if item.hasError "my-item--error"}}">

"The button should have a transition between all states"


$transition-time: 0.3s;
transition: background-color box-shadow $transition-time ease-in-out;


Design Specifications


Why you need to be able to understand design

Developers should care about Design

  • Does it make sense?
  • Is it consistent to other pages/components?
  • Talk to the Designer!
  • Give constructive feedback

CSS Quality is Important


CSS Structure

BEM = Block, Element, Modifier

 <ul class="nav">
     <li class="nav__item">Index</li>
     <li class="nav__item nav__item--active">Products</li>
     <li class="nav__item">Contact</li>
  • Naming Convention 
  • Block (nav) 
  • Element (nav__item) 
  • Modifier (nav__item--active)

Data Model != UI



Why and How



  • Consistency
  • Easier Cross-Browser Testing
  • Faster Workflow 

But How?

Always be 100% in sync with your codebase!


Code Documentation

 * A simple component to display a loading spinner.
 * ```hbs
 * {{loading-spinner}}
 * ```
 * @namespace Component
 * @class LoadingSpinner
 * @extends Ember.Component
 * The lot to display in this component.
 * @attribute lot
 * @type {Model.Lot}
lot: null,
 * This action is called whenever the lot is clicked.
 * @event action
 * @param {Model.Lot} lot The lot that was clicked on
 * @public
action: null
 * A specific function that does something.
 * @method doSomething
 * @param {Model.Lot} lot The lot to do something with
 * @return {Boolean}
doSomething(lot) {
  // do something in here
  return !!lot;

Living Styleguide

UI Inventory

of existing application


outlines design direction

Living Style Guide

Workflow Summary

CSS Partial

.button {
  padding: 13px 20px;
  width: 100%;
  border: none;
  font-family: $main-font;
  border-radius: $border-radius;
  box-shadow: 0 2px 3px rgba($color-darkgrey, 0.4);

  @include base-button($white, $color-primary);

Stylesheet: _button.scss

.button--secondary {
  @include base-button($color-darkgrey, $color-lightgrey);

Markdown Partial


<button class="button">Button</button>

<button class="button button--secondary">Button</button>


Style Guide file structure

Shared Add-on

  • Addon contains general styling information
  • Multiple apps use this addon
// index.js
// ...
isDevelopingAddon: function() {
  return true;
# in app folder
npm link ../my-addon

Component Guide

{{#component-guide-item name="c-button" description="A custom button."}}

    {{#component-guide-attributes-item name="isLoading" type="Boolean"}}
      If true, the button will become disabled and show a loading spinner.
    {{! ... }}

    {{#c-button action=(action "clickButton") isLoading=isLoading}}

\{{#c-button action=(action "clickButton") isLoading=isLoading}}


Small Projects

  • Collection of routes in app
  • Might need authorization checks

Big Projects

  • Separated into multiple addons
  • Separate docs-app
  • Automatic building whenever an addon changes


  1. Try to understand you teammates
  2. Work out a workflow together
  3. Keep documentation 100% in sync with your codebase
  4. Reiterate and improve your workflow

Lisa, @kringal

Francesco, @fnovy

Ember - Between Design & Development

By Lisa Gringl

Ember - Between Design & Development

  • 1,864
Loading comments...

More from Lisa Gringl