Flexi
Layout Components
Layout Elements
Layout Attributes
Mobile First Grid
12 columns with container based breakpoints which fall back to viewport based breakpoints.
Wrap your grid usage with grid
. If you add the responsive
attribute to grid
it will
be converted to a component
allowing for container based breakpoints.
The attribute syntax here is a shorthand for
Container
Container is a component which set's its class depending on it's current width to be one of
.layout-xs
.layout-sm
.layout-md
.layout-lg
Services
device/
device/orientation
device/layout
-sustains
Blog Post
http://blog.isleofcode.com/p/2a16f7dd-52ab-4daa-b15d-0531fd432ede/
Sustain
Sustain inserts a medium-life singleton component (called a sustainable) which wraps a feature group, and provides it stability by seamlessly swapping it's location as layouts change from one position to the next.
Sustainables wrap use of a component or groups of components (think of it as a feature
or feature set). Sustainables are technically components (and you can create them with
a component.js
), but it is recommended to use them as simple templates expecting to
be supplied a model
.
app
/<pod-prefix>
/foo
/sustainables
/bar.hbs
/baz.hbs
/spam.hbs
Only one instance of the sustainable is alive and rendered at a time, but if you are animating from one location to another you can choose to leave behind a copy.
By default, a sustain is destroyed when it has gone unused for one minute. You can alter this
expiration. A value of 0
will cause the sustain to live forever.
Layouts
With flexi, you can separate your markup into layouts for
mobile
, tablet
, desktop
, and huge
.
Example:
ember g layout index/<size>
Layouts are compiled into a single template.hbs
which will
activate the correct layout based on booleans provided by the
device/layout
service.
Resolver
In your app.js
you will need to import the custom resolver. The custom resolver
extends the default ember resolver with the sustainables-resolver
mixin to account
for sustainables.
import Resolver from 'flexi';
app/routes/foo/
layouts/
default.hbs
desktop.hbs
tablet.hbs
mobile.hbs
sustainables/
bar.hbs
baz.hbs
spam.hbs
components/
ham/
component.js
template.hbs
eggs/
component.js
template.hbs
Example Layouts
tablet.hbs
phone.hbs
tablet.hbs
Cross Route Example
emails/structures/index.hbs
emails/layouts/phone.hbs
emails/layouts/tablet.hbs
emails/index/layouts/phone.hbs
emails/index/layouts/tablet.hbs
emails/index/route.js
export default Route.extend({
model() {
return this.modelFor('emails');
}
});
Support, Questions, Collaboration
Join the Slack.
Contributing
- Open an Issue for discussion first if you're unsure a feature/fix is wanted.
- Branch off of
develop
(default branch) - Use descriptive branch names (e.g.
<type>/<short-description>
) - Use Angular Style Commits
- PR against
develop
(default branch).
Commmits
Angular Style commit messages have the full form:
<type>(<scope>): <title>
<body>
<footer>
But the abbreviated form (below) is acceptable and often preferred.
<type>(<scope>): <title>
Examples:
- chore(deps): bump deps in package.json and bower.json
- docs(component): document the
fast-action
component