RapidUI allows full control over how your website looks in every display resolution.
The platforms’ AI-powered responsivity automatically adapts your elements to fit different screen sizes and sets a basic responsive layout to help you adjust your site to fit perfectly to all resolutions.
The generated code is based on position: relative; (CSS code), which creates a cleaner, fluid code for easier responsive adjustment.
You can maximize your responsive results by using these tools:
- Create and manage breakpoints - control how your design looks in every screen resolution
- Use the 'Scale Content' tool to automatically scale objects’ size and styling to fit to your breakpoints
- Want to upload different designs for different screens? Easy. Feel free to upload custom designs to breakpoints (Remember - you’ll have to reactivate interactivity for each design)
What are breakpoints?
Responsive Breakpoints (CSS media queries) are used to control your site's design in different resolutions.
Breakpoints let you create different styling rules, locations and adjustments, for separate breakpoints (more information can be found in our styling guide).
Every breakpoint is marked with a unique color, that appears as arrows on the resolution bar.
How to create breakpoints in RapidUI:
Go to the Responsive Panel (the resolution bar available above your design at any time):
- Navigate to the resolution in which you’d like to create your breakpoint
- Click the “+ Break Point” button, which will appear
Manage or delete breakpoints:
- Right-click/double-click the arrow which marks the breakpoint you wish to edit
- To edit the breakpoints’ resolution - click on the resolution next to ‘Position’ and choose a new breakpoint
- Click the icon next to ‘Clear Content’ to delete all changes specifically in that breakpoint (when editing in a certain breakpoint, the changes made will only appear on that breakpoint)
- Click the bin icon to delete the breakpoint
Remember - once you have created breakpoints, you will have to make changes in every breakpoint separately. It is better to create breakpoints after you have completed all of the other steps of creating your live site such as styling, interactivity, animations, etc.
!RapidTip Try to use as few breakpoints as possible so you only have to make minimal changes necessary to those resolutions!
Uploading PSD/Sketch files to separate breakpoints:
You can upload separate PSD/Sketch files to different breakpoints if you want to create responsive designs in Photoshop/Sketch (mainly used to design unique mobile versions).
Simply drag and drop a PSD/Sketch file into your site while in the desired breakpoint.
Notice: You’ll have to create separate interactions for each design file you upload (forms, menus, animations, etc.), so try to make responsive adjustments using the platform.