Responsive Design
One structure to create 90% of all app and websites layouts, fully responsive.
Last updated
One structure to create 90% of all app and websites layouts, fully responsive.
Last updated
The openBuild structure consists of 5 levels of containers, with their own specific rules making the framework to be responsive from small phone (320px) to 4K monitor. But don't worry, you only need to worry about one to build!
| Element | Container Type | Min Width | Padding | Gap |
|---|---|---|---|---|
This is a bubble page. By default we use Page as column and set up the UI width at 1280px.
A content area is the container holding all your sections. So it's basically holding all your page contents except your page navigation (Header, Left Menu, etc.). As the content area is located differently whether your page is with a left menu, a header or a right menu for example, its margins will be modified according to the page layout.
A section is the container holding all your row containers. Depending on how you use your page (Single Page App (SPA) or website) a section has a different usage. In the case of a website page, think of the hero image of a site as a section, or the features area as a section. In the case of SPA, a section is used as a 'virtual' page that is hidden/shown depending the navigation URL parameter.
Row containers are used to build the contents of a section. As the name explains, these are rows that build the section interface from top to bottom. Row containers always have 20px padding on left/right, to ensure a 20px distance from the screen edges on any device.
Finally, blocks are components that are added into row container. This is your actual page content, like a table, image, map or card.
One or multiple blocks can be combined together. Note that a standard block has a minimum width of 280px to ensure correct display on 320px Mobile (280px + 20x2 padding from their Row container).
Column
-
-
Column
-
-
Column
-
-
20
Row
-
0 0 20 20
20
Varies
280px
Varies
Varies
