Allcancode Platform v5
  • Introduction
  • Getting started
  • Managing projects
    • The list of projects
    • Creating a project
    • Sharing projects with teams
    • Basic project settings
  • Creating UI layouts
    • The container
    • Basic components
    • Creating a component
    • Working with layout properties
    • Working with styling properties
    • Building responsive layouts
  • Writing frontend logic
    • Introducing Blockly
    • Handling data
      • Session
      • Variable
    • Binding inputs to data
    • Binding text to data
    • Visualizing a list
    • Handling events
    • Navigating between pages/screens
    • Sharing data between pages/screens/components
    • Using native components
    • Creating native components
    • Creating a library of functions
  • Creating a backend
    • Defining endpoints
    • Creating a library of backend functions
  • Testing and debugging
    • Previewing a web application
    • Previewing a mobile app
    • The build log
    • The debug panel
  • How-to Guides
    • Sync code with git
      • Sync with GitHub
      • Sync with Gitlab
      • Sync with Bitbucket
    • Publish web applications
      • Publish web apps to Vercel
      • Publish web apps to Netlify
    • Publish mobiles apps
      • Publish mobile apps to stores
      • Publish mobile apps to Expo Go
      • mobile app with Expo
    • Implementing authentication
    • Implementing authorization
    • Supporting multilingual UIs
  • Release Notes
    • Release notes
Powered by GitBook
On this page

Was this helpful?

  1. Creating UI layouts

Building responsive layouts

PreviousWorking with styling propertiesNextIntroducing Blockly

Last updated 1 year ago

Was this helpful?

Considering the various screen sizes available today, we must build UIs that can adapt gracefully to any width and height. Sometimes it is possible to have one layout with rules on how that should change based on the width and height of the screen. Other times, we may need to build different layouts for big and small displays. In other words, layouts must be responsive.

There are different mechanisms to achieve layout responsiveness. One of the most popular available on both the web and mobile devices is the FlexBox. Its official documentation for browsers (web apps) is available here:

But there is also an interactive guide that makes it more fun to play with and understand the concepts behind FlexBox and the tools it provides, even for very complex UI layouts:

Responsive Layout on the Platform

By clicking on these tabs you can select the size of the screen you want to make changes on the layout.

  • Default : All the screens' sizes.

  • XS : 0 - 599px

  • S : 600 - 959px

  • M : 960 - 1279px

  • L : 1280 - 1919px

  • XL : 1920px and up

  1. Click the tab of the screen size you want to change properties of an element.

  1. Select or type all properties you want to be different in this screen size.

See the differences on the layout by clicking on different tabs.

a.

b.

Flexbox - Learn web development | MDN
An Interactive Guide to Flexbox
Logo
Logo