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