<commit_before># Flexi

[![npm version](https://badge.fury.io/js/flexi.svg)](http://badge.fury.io/js/flexi)
[![Ember Observer Score](http://emberobserver.com/badges/flexi.svg)](http://emberobserver.com/addons/flexi)
[![Build Status](https://travis-ci.org/html-next/flexi.svg)](https://travis-ci.org/html-next/flexi)
[![Code Climate](https://codeclimate.com/github/html-next/flexi/badges/gpa.svg)](https://codeclimate.com/github/html-next/flexi)

Flexi is a lightweight, mobile first, performance focused layout framework for Ember.  Flexi makes
building layouts that are fluid, responsive, and platform aware fun, easy and fast.

Flexi does most of it's heavy lifting at `build` time, happily adding very little
runtime code and CSS to your project.

## Learn More

- Documentation: [https://html-next.github.io/flexi/#/docs](https://html-next.github.io/flexi/#/docs)
- Blog Post: [A Tale of Two States: Modern Responsive Design illustrated with Ember & Flexi](http://blog.isleofcode.com/modern-responsive-design/)
- Talk: [Responsive and Cross Platform Design](https://www.youtube.com/watch?v=2w77wrinwsY&list=PLaKDKbFmAv-aLYGogQ63zzKeUpy_opDia&index=1)

## Installation

```cli
ember install flexi
```

That's all that required if you're using the classic component layout. If you are using a _pod_-based structure you will also need to install the shim for `ember-app`. This is done by modifiying your  `ember-cli-build.js` file. This shim makes ember-cli's template tree able to find
the templates for layouts.

```js
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var shim = require('flexi/lib/pod-templates-shim');

shim(EmberApp);
```


## Support, Questions, Collaboration

Join the [flexi](https://embercommunity.slack.com/messages/flexi/) channel on Slack.

[![Slack Status](https://ember-community-slackin.herokuapp.com/badge.svg)](https://ember-community-slackin.herokuapp.com/)


### Layouts

With flexi, you can separate your markup into layouts, one for each breakpoint name
defined in `config/flexi.js`.

Given the following breakpoint names: `mobile`, `tablet`, `desktop`.

**Example:**
```cli
ember g layout index/<size>
```

This will add the `index/-layouts/<size>.hbs` file to your application.

Layouts are compiled into a single `template.hbs` for the route or component
which will activate the correct layout based on booleans provided by the
`device/layout` service.

Layout booleans are available for use in any layout template.
For instance, for the `mobile` breakpoint, you can include a conditional block
with so:

```
{{#if FlexiLayout.isMobile}}

{{/if}}
```

This is useful if you only need one or two layouts, but still need to make some
smaller modifications for other breakpoints.

**Example File Structure:**

This is an example route structure using `routes` as the `podModulePrefix` and `layouts`

```cli
app/
  routes/
    foo/
      -layouts/
        mobile.hbs
        desktop.hbs
      components/
        foo-bar/
          component.js
          template.hbs
```

### Sustain

`Sustain` allows you to recycle a component instance across layout and route boundaries.

A sustain is essentially a "marker" for where a particular component instance is able to
be reused. It allows you to explicitly declare what features of your app can be "recycled".

Sustain improves the performance of your app by reducing the amount of work your app needs to do.
 Instead of tearing down one instance and creating an entirely new instance, sustain seamlessly
 swaps a component instance's location as layouts and routes transition from one position to the next.


```hbs
{{sustain <path-to-sustain> model}}
```

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.

```hbs
{{sustain <path-to-sustain> model copy=true}}
```

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.

```hbs
{{sustain <path-to-sustain> expires=<time-in-ms>}}
```

### Layout Attributes

Layout attributes are converted to classes at build time, giving you the
convenience of a nice attribute syntax and the performance of class based
selectors.

```hbs
<box
  justify="start|end|center|between|around"
  align="start|end|stretch|center|baseline"
  fit
  fill
  vertical
  horizontal
  wrap
  nowrap>
```

[Read More](https://html-next.github.io/flexi/#/docs/layout-attributes)


## @container breakpoints

Flexi uses a service with an optimized window resize handler and an optimized width calculator
to efficiently add `.container-<breakpoint-prefix>` classes to `<container>` and `<grid responsive>`
components.  This results in the defined breakpoints using the width of the container instead of
the width of the viewport.

**Without rows**
```hbs
<grid responsive>
  <box xs="6" sm="4" md="3" lg="2"><commit_msg>add raf polling to readme<commit_after># Flexi

[![npm version](https://badge.fury.io/js/flexi.svg)](http://badge.fury.io/js/flexi)
[![Ember Observer Score](http://emberobserver.com/badges/flexi.svg)](http://emberobserver.com/addons/flexi)
[![Build Status](https://travis-ci.org/html-next/flexi.svg)](https://travis-ci.org/html-next/flexi)
[![Code Climate](https://codeclimate.com/github/html-next/flexi/badges/gpa.svg)](https://codeclimate.com/github/html-next/flexi)

Flexi is a lightweight, mobile first, performance focused layout framework for Ember.  Flexi makes
building layouts that are fluid, responsive, and platform aware fun, easy and fast.

Flexi does most of it's heavy lifting at `build` time, happily adding very little
runtime code and CSS to your project.

## Learn More

- Documentation: [https://html-next.github.io/flexi/#/docs](https://html-next.github.io/flexi/#/docs)
- Blog Post: [A Tale of Two States: Modern Responsive Design illustrated with Ember & Flexi](http://blog.isleofcode.com/modern-responsive-design/)
- Talk: [Responsive and Cross Platform Design](https://www.youtube.com/watch?v=2w77wrinwsY&list=PLaKDKbFmAv-aLYGogQ63zzKeUpy_opDia&index=1)

## Installation

```cli
ember install flexi
```

That's all that required if you're using the classic component layout. If you are using a _pod_-based structure you will also need to install the shim for `ember-app`. This is done by modifiying your  `ember-cli-build.js` file. This shim makes ember-cli's template tree able to find
the templates for layouts.

```js
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var shim = require('flexi/lib/pod-templates-shim');

shim(EmberApp);
```


## Support, Questions, Collaboration

Join the [flexi](https://embercommunity.slack.com/messages/flexi/) channel on Slack.

[![Slack Status](https://ember-community-slackin.herokuapp.com/badge.svg)](https://ember-community-slackin.herokuapp.com/)


### Layouts

With flexi, you can separate your markup into layouts, one for each breakpoint name
defined in `config/flexi.js`.

Given the following breakpoint names: `mobile`, `tablet`, `desktop`.

**Example:**
```cli
ember g layout index/<size>
```

This will add the `index/-layouts/<size>.hbs` file to your application.

Layouts are compiled into a single `template.hbs` for the route or component
which will activate the correct layout based on booleans provided by the
`device/layout` service.

Layout booleans are available for use in any layout template.
For instance, for the `mobile` breakpoint, you can include a conditional block
with so:

```
{{#if FlexiLayout.isMobile}}

{{/if}}
```

This is useful if you only need one or two layouts, but still need to make some
smaller modifications for other breakpoints.

**Example File Structure:**

This is an example route structure using `routes` as the `podModulePrefix` and `layouts`

```cli
app/
  routes/
    foo/
      -layouts/
        mobile.hbs
        desktop.hbs
      components/
        foo-bar/
          component.js
          template.hbs
```

### Sustain

`Sustain` allows you to recycle a component instance across layout and route boundaries.

A sustain is essentially a "marker" for where a particular component instance is able to
be reused. It allows you to explicitly declare what features of your app can be "recycled".

Sustain improves the performance of your app by reducing the amount of work your app needs to do.
 Instead of tearing down one instance and creating an entirely new instance, sustain seamlessly
 swaps a component instance's location as layouts and routes transition from one position to the next.


```hbs
{{sustain <path-to-sustain> model}}
```

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.

```hbs
{{sustain <path-to-sustain> model copy=true}}
```

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.

```hbs
{{sustain <path-to-sustain> expires=<time-in-ms>}}
```

### Layout Attributes

Layout attributes are converted to classes at build time, giving you the
convenience of a nice attribute syntax and the performance of class based
selectors.

```hbs
<box
  justify="start|end|center|between|around"
  align="start|end|stretch|center|baseline"
  fit
  fill
  vertical
  horizontal
  wrap
  nowrap>
```

[Read More](https://html-next.github.io/flexi/#/docs/layout-attributes)


## @container breakpoints

`<container>` and `<grid responsive>` components are used as @container 
breakpoints utilize a `raf` polling technique to simulate element
specific resize events with high granularity.

Based on their width these components add `.container-<breakpoint-prefix>`
classes.  This results in classes which utilize these breakpoints using
the width of the container instead of the width of the viewport.

**Without rows**
```hbs
<grid responsive>
  <box xs="6" sm="4" md="3" lg="2">
{'fraction_non_alphanumeric': 0.10846507904742846, 'fraction_numerical': 0.0022013207924754855, 'mean_word_length': 4.4350190320826535, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 27, 'https://': 24, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7090297', 'n_tokens_mistral': 3106, 'n_tokens_neox': 2945, 'n_words': 1136}