openBuild
  • Introduction
    • Introduction
    • The Framework
    • The Library
    • Release Notes
  • Core Concepts
    • Bubble vs openBuild
    • Responsive Design
      • Repeating groups
      • Advanced Responsiveness
    • Styles
      • Typography
      • Colors
      • Groups & Box Shadow
      • Inputs
      • Buttons
      • Style Variations
      • Changing styles
      • Custom CSS
    • Pages
      • index
      • base-menu
      • base-top
      • base-ribbon
      • base-mobile
      • admin
      • verify
      • styleguide
      • terms
      • login
      • reset_pw
      • privacy
      • 404
      • Menu
      • Base Layouts
  • WORKING WITH the framework
    • Getting Started
    • Navigation
      • Go to page
      • Navigation through custom states
      • Navigation through URL parameters
      • Navigation through URL parameters with Option sets
    • Data & Workflows
      • Custom States
      • Custom Events
      • Working with Reusables
      • CRUD
      • Source Popup
      • Backend Workflows
    • Users and Roles
    • Signup, Login, Password reset
    • Security & Privacy
      • Authenticating endpoints
    • Transactional Email
      • Setup Sendgrid
      • Setup Postmark
    • Alerts and Confirmations
    • Customization
    • Best Practices
      • Syntax
      • Color Coding
  • openBuild Library
    • Chrome Extension
  • Framework Elements
    • Menus
    • Option sets
    • Plugins
    • API Connector
    • User Access Management
    • CRUD Floating Group
    • CRUD Popup
    • Data Table
    • Security Redirect
    • Mail management
    • User Settings
    • Header & Footer
Powered by GitBook
On this page
  • Specifications
  • Page
  • Content Area
  • ❖ Section
  • ▭ Row Container
  • ⧆ Block
  1. Core Concepts

Responsive Design

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

PreviousBubble vs openBuildNextRepeating groups

Last updated 2 years ago

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

Column

-

-

Column

-

-

Column

-

-

20

Row

-

0 0 20 20

20

Varies

280px

Varies

Varies

Page

This is a bubble page. By default we use Page as column and set up the UI width at 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.

❖ Section

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

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

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
Page
⃞ Content Area
❖ Section
▭ Row Container
⧆ Block
The Block element is where all the stuff in your app happens.
Width of the editor is 1280px.
Example of content area according to page layout
In SPA's a Section acts as a Page.
Row containers build your content in neat rows.
Blocks make up of the actual visual content of your page.