Ember Freestyle

Ember Freestyle is an Ember addon that allows you to quickly create a living styleguide for your Ember app. Whereas other living style guide projects showcase current CSS using dummy HTML, Ember Freestyle presents existing Ember components from your app in a dedicated living style guide.

Live Demo

http://chrislopresto.github.io/ember-freestyle/

Anatomy of a Basic Style Guide

Here is a simple style guide, where {{loading-spinner}} is a hypothetical component in your application.

{{#freestyle-guide title="My Living Style Guide" subtitle="Showcasing My App's Components"}}
  {{#freestyle-section name="UI Elements"}}
    {{#freestyle-usage "loading-spinner" title="Loading Spinner"}}
      {{loading-spinner}}
    {{/freestyle-usage}}
  {{/freestyle-section}}
{{/freestyle-guide}}

Living Style Guide Driven Development

Ember Freestyle facilitates a living style guide driven development approach for Ember apps. Chris LoPresto gave a talk on this topic at EmberConf 2016. Interactive Slides

Acknowledgements

Ember Freestyle would not be possible without inspiration from the Ember community at large. Specific thanks go out to: