Introduction to flexi

config.flexi.js

/* jshint node:true */
module.exports = {

  // breakpointss, order does not matter, they will be sorted by `begin`
  // `name` is used for layout names and booleans on the device/layout service
  // `prefix` is used for column classes, column attributes, and container breakpoint classes
  // `begin` is the pixel value at which this breakpoint becomes active
  breakpoints: [
    { name: 'mobile',      prefix: 'xs', begin: 0 },
    { name: 'tablet',      prefix: 'sm', begin: 768 },
    { name: 'desktop',     prefix: 'md', begin: 992 },
    { name: 'huge',        prefix: 'lg', begin: 1200 }
  ],

  // the number of columns for the grid
  columns: 12,

  // optional, used for column classes: '<colPrefix>-<breakpointPrefix>-<columnNumber>'
  columnPrefix: 'col',

  // if false, @media css is not included
  includeMediaCSS: true,

  // if false, default element styles are not included
  includeElementCSS: true,

  // if true, will convert layout attributes on non-layout elements to classes as well
  transformAllElementLayoutAttributes: false,

  // grid and layout element gutters
  gutterPadding: '0',

  // if false, no styles are included (trumps 'includeMediaCSS' and 'includeElementCSS')
  includeCSS: true
};

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("row-col");
  this.route("grid");
});

export default Router;

templates.application.hbs

<screen>
  <page>
    <hbox fit class="navbar">
      <box xs="hidden" sm="1 visible" md="2" lg="3" xl="4"></box>
      <centered sm="fit">
        {{#link-to "row-col" class="nav"}}Row-Col{{/link-to}}
      </centered>
      <centered sm="fit">
        {{#link-to "grid" class="nav"}}Grid{{/link-to}}
      </centered >
    </hbox>
    <hbox class="content">
      <box xs="hidden" sm="1 visible" md="2" lg="3" xl="4"></box>
      {{outlet}}
    </hbox>
  </page>
</screen>

templates.grid.hbs

placeholder

templates.row-col.hbs

<vbox>
  <hbox>
    <vbox fit>
      <box>Top</box>
      <box>Bottom</box>
    </vbox>
    <box>Takes the rest of the row</box>
  </hbox>
  <hbox>
    <box>Expands as much as it can</box><box fit>shrinks to fit</box>
  </hbox>
</vbox>

twiddle.json

{
  "version": "0.11.0",
  "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.10.2",
    "ember-data": "2.11.0",
    "ember-template-compiler": "2.10.2",
    "ember-testing": "2.10.2"
  },
  "addons": {
    "flexi-default-styles": "1.2.2",
    "flexi-dsl": "1.2.10"
  }
}