Skip to content

Instantly share code, notes, and snippets.

@kybishop
Last active February 1, 2017 22:41
Show Gist options
  • Save kybishop/e17d7391de06c31db49cf1b022914db5 to your computer and use it in GitHub Desktop.
Save kybishop/e17d7391de06c31db49cf1b022914db5 to your computer and use it in GitHub Desktop.
Introduction to flexi
/* 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
};
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
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;
<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>
<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>
{
"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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment