Fastr Workspace - Breakpoint Variants

Overview 

In Fastr Workspace you can make use of breakpoint variants to ensure that your content renders correctly for all device types.  These variants will automatically assign themselves in your Experience based on the widths of the board that has been placed. In most cases two breakpoints is sufficient for mobile and desktop, but you can create as many breakpoints as you would like. For general information about creating a board, please review this article on the widget types available: Fastr Workspace - Widget Types

To get started, you can find the variant options in the top left corner of your screen as shown below. You can either duplicate your initial variant with a right click, or select the plus icon to start a new variant from scratch: 

Override Breakpoints

As mentioned above, Variants will automatically assign themselves, but we do give you the ability to override that if you'd like. If you select a Variant from the Variants menu, you should then see an "Override Breakpoint" button appear in the right hand menu:

This value can be adjusted to change when a certain breakpoint will occur. This allows you to enter a maximum width (in pixels) of your choosing for the Variant to scale up/down to before switching to the other Variant. 

Additional Tips

• The Flex and Grid Layout options in Workspace will greatly increase how efficiently you can build these variants too. These settings can be enabled by highlighting a group of widgets, and then selecting the Layout option from the design tab: 
  
• The Proportional Scaling tool can also be very helpful for making sure your widgets maintain a specific aspect ratio when resizing a group of widgets. This can be enabled by selecting the "K" button on your keyboard, or using the preferences menu: 
  
• Its worth considering building one variant completely before duplicating the content, as this will save effort and time when designing. If you completely finish making a desktop design, it becomes a simple process to duplicate the content and start resizing for a more vertical mobile layout. Please note that changes you make to one variant will not automatically adjust the other layout.
• We have also added a max width option when building a variant, which can ensure that content will render as needed. There may be times when instead of having the content continue to scale upwards, you want it to remain at a certain max size. This option can be found underneath the override option when clicking on your variant: 
  

If you have any follow-up questions or need further assistance, please feel free to reach out to us at support@getfastr.com — we're happy to help!