Cells and responsive layouts

Frontastic provides you with a set of predefined cells and breakpoints. Cells in the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`. can be used to influence how Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. are displayed in the frontend.

The breakpoints relate to target devices. We currently support mobile, tablet, and desktop as the 3 breakpoints. These breakpoints primarily enable users in the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`. to hide or show entire layout elementslayout elements - What needs to be added to a page before a Frontastic component can be added or a component group. Previously known as `cells`. or Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. on certain devices. You can use more breakpoints in your CSS to implement more specific behavior.

Inside the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`., there's a selector for the target device/breakpoint you're working on the top middle of your screen, but this is only to illustrate which Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. and layout elementslayout elements - What needs to be added to a page before a Frontastic component can be added or a component group. Previously known as `cells`. are active on this device. We don't adapt the grid inside the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`. because the displaying of layout elementslayout elements - What needs to be added to a page before a Frontastic component can be added or a component group. Previously known as `cells`. can be modified inside the CSS in your project instance and this would then confuse users of the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`.. They're asked to use the real preview with a correct target device.

JavaScript based breakpoints

minWidth breakpoints for the 3 main devices must be added to your project.yml configuration file so that they're loaded with Server Side Rendering. This also allows for better performance on your site.

To add this, just paste the below into the data-node section within your project.yml file in your config folder:

data:
    layout:
        breakpoints:
          - identifier: mobile
            name: Mobile
            userAgentRegexp: (Android|webOS|iPhone|iPod|BlackBerry|Windows Phone)
            userAgentRegexpModifiers: i
          - identifier: tablet
            name: Tablet
            userAgentRegexp: iPad
            userAgentRegexpModifiers: i
            minWidth: 768
          - identifier: desktop
            name: Desktop
            minWidth: 1025

You can define any other breakpoint you want within CSS but the above breakpoints must be in JavaScript.

Additional layout information

We don't allow you to specify any additional layout information inside the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`. for multiple reasons. If we start allowing people to specify CSS values like margins and paddings inside the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`., they would need to really verify their changes on every device, and CSS developers know how hard it can be to create a sensible behavior for all target devices. We assume that this would break layouts more often than it would allow fixing layouts.

We say that Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. and layout elementslayout elements - What needs to be added to a page before a Frontastic component can be added or a component group. Previously known as `cells`. should be created in a way that they look great at least 90% of the time. If you really need some additional space somewhere that can easily be applied in the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`., you could create a spacer Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. that could have configuration options like Space: {s, m, l} and you can then implement a spacing to this in a more stable way.

Pages should survive layout refactorings

The idea behind page configurations in the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`. is that they survive visual refactorings which is why you shouldn't give user of the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`. the possibility to change concrete layout values. If Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. have a concrete padding or margin assigned (or any other CSS option) all these Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. will have to be reconfigured after any layout changes which affect the platform. For this reason, we highly recommend avoiding margins for Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code..


Did this page help you?