The Flexi Developer Hub

Welcome to the Flexi developer hub. You'll find comprehensive guides and documentation to help you start working with Flexi as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

Viewport-Specific Templates

Splitting your templates into viewport-specific files

Flexi lets us separate our markup into viewport-specific templates, one for each breakpoint name defined in config/flexi.js.

The default breakpoint names are: mobile, tablet, and desktop. See Config for customization options.

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. The device/layout service is injected in all viewport-specific templates as FlexiLayout.

Example File Structure

A route, foo, using viewport-specific templates with routes as the podModulePrefix.

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

Updated less than a minute ago

Viewport-Specific Templates


Splitting your templates into viewport-specific files

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.