A hallmark of excellent web applications is their ability to seamlessly adapt to changing screen sizes, data, and user access levels. To build an interface as adaptable as those of Slack, Gmail, Pinterest, or LinkedIn, developers must ensure visual consistency and UX integrity across a wide array of users and use cases.

‍

Creating these dynamic experiences DIY requires front-end developers to leverage complex, often difficult-to-use layout modes such as CSS Grid and Flexbox. While low-code development platforms offer more simplicity via drag-and-drop application builders, these tools are often limited to building static, inflexible interfaces.

‍

Today, we’re excited to introduce Superblocks Layouts. This powerful application design tool combines all the dynamism and flexibility of Flexbox with the simplicity of a visual drag-and-drop UI builder. Now, developers with no frontend experience can build beautiful, scalable user interfaces in Superblocks.

Effortlessly build visually consistent applications

With Superblocks, developers no longer have to painstakingly maintain precise padding, alignment, and spacing attributes across multiple CSS classes. 

‍

When designing in Superblocks, each column in the layout can be configured as a fixed grid or one of our new vertical or horizontal stacks. When a column adopts stacking behavior, the components within a column will stack vertically or horizontally, automatically applying the ideal spacing and alignment to each element.

Match Figma perfectly, down to the pixel

Layouts in Superblocks are not only simple to implement, but can also be fine-tuned to match your Figma mocks, down to the last pixel. 

‍

Superblocks users can freely modify the padding, spacing, and component sizing at the pixel level, ensuring developers retain full control over the app layout for each UI element.

Create responsive apps across desktop, tablet and mobile web

Using Layouts, developers can build apps that are fully responsive to the window size. Component sections and columns can be configured to automatically fill their viewport - allowing the app layout to stretch or shrink to fit the browser or screen it’s being displayed on. To prevent components from stretching or shrinking to unusable sizes, each container can specify a min-height and max-height which will bound how large or small the component can get.

‍

Optimizing a Superblocks application for mobile or tablet views is a seamless experience. With Layouts, columns seamlessly stack at dedicated breakpoints for tablet and mobile, allowing users to benefit from a mobile-optimized view without any additional effort on the developer’s part.

Design dynamic layouts that evolve with user interaction and permissions

Layouts also enable components to dynamically resize and realign when the size of content, component visibility, or access level of the user changes. 

‍

Previously, components could only ever use a fixed height within their container. Now, each component is able to either fill the remaining height or width of their parent container, or fit their content. This means that when a visual element or data within your application transforms, the surrounding elements will automatically adjust to either fill the empty space or accommodate the new feature.

Gain the best of advanced frontend layouts with the simplicity of low-code

Superblocks empowers development teams with the ability to create dynamic, modern interfaces with a fraction of the time and effort.

• CTOs & Engineering Leaders enable teams without frontend expertise to build visually consistent applications that scale across their organization. 
• Backend Developers, IT, and Data Teams with no frontend expertise are empowered to create dynamic and adaptable applications without increasing overall development time or wrangling complex CSS styling.
• Customers & business users benefit from an optimized user experience, minimizing visual clutter and improving productivity. 

Get started with layouts today

Ready to accelerate your development and drive innovation within your organization? Contact sales for a quote or learn more about using Layouts in our docs.

‍