Responsive Design

One structure to create 90% of all app and websites layouts, fully responsive.

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!

Specifications

Element	Container Type	Min Width	Padding	Gap
Page	Column	-	-
⃞ Content Area	Column	-	-
❖ Section	Column	-	-	20
▭ Row Container	Row	-	0 0 20 20	20
⧆ Block	Varies	280px	Varies	Varies

The Block element is where all the stuff in your app happens.

Page

This is a bubble page. By default we use Page as column and set up the UI width at 1280px.

Width of the editor is 1280px.

Content Area

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.

Example of content area according to page layout

❖ Section

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.

In SPA's a Section acts as a Page.

▭ Row Container

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.

Row containers build your content in neat rows.

⧆ Block

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).

Blocks make up of the actual visual content of your page.