Application Layout with Ember

www.kylecoberly.com

Where are the containers?

  • Nested Routes
  • Index Routes
  • Great place to start

Components === Encapsulation + Reusability

  • Reusing something in more than one route
  • SASS nesting to namespace
  • Media query in the component or separate components?

Creating a Viewport Service

import Ember from 'ember';
 
export default Ember.Service.extend({
    smallBreakpoint: 400,
    isSmall: Ember.computed("deviceWidth", function(){
        return this.get("deviceWidth") < this.get("smallBreakpoint");
    }),
    updateDeviceWidth: Ember.on("init", function(){
        this.set("deviceWidth", window.innerWidth);
    }),
    updateOnResize: Ember.on("init", function(){
        window.onresize = this.updateDeviceWidth.bind(this);
    })
});
  • Create breakpoints
  • Listen for changes
  • Inject into compontents
import Ember from 'ember';

export default Ember.Component.extend({
    viewport: Ember.inject.service("viewport")
});

Flexbox!

  • Shrink & Grow
  • Reflow content
  • Order content
  • Combine with media queries for semantics + adaptability

Flexbox!

.member-list-controls {
    display: flex;
    .search-box {
        order: 2
    }
    .filter-options {
        order: 1
    }
    @media (max-width: $small-breakpoint){
        .search-box {
            order: 1
        }
        .filter-options {
            order: 2
        }
    }
}
<section class="member-list-controls">
    <input class="search-box" />
    <select class="filter-options">...</select>
</section>

Questions?

Thank you!

www.kylecoberly.com

Application Layout with Ember

By Kyle Coberly

Application Layout with Ember

Presentation to Ember Denver March 2016

  • 524
Loading comments...

More from Kyle Coberly