Adobe

decor

Web Platform Team Blog

Making the web awesome

Adaptive Web App UI with CSS Regions


By allowing text to automatically flow from one box to another, CSS Regions bring the power and flexibility of complex layout to the web. This makes it easier to build pages with layout similar to traditional newspapers and magazines, but it goes beyond that.

A recent code contest with CSS Regions on CodePen showed us how creative folks can twist and turn this technology to explore new reading experiences. A big “Thank you!” goes out to all those who worked on the demos.

However, regions can do more than just flow text across boxes.

Another use case

Regions work by disconnecting the visual rendering of elements from their order in the DOM. This gives a hint to a potential new use case – building adaptive UI for web applications. I do emphasize on the adaptive term because this accounts for the user and device context.

If you’re building a truly desktop and mobile-friendly web application you want to carefully consider both adjusting to screen size as well as the context in which the web app is being used. For mobile, this usually means repositioning of layout and controls across the screen. However, there are limitations in what you can adjust because of the DOM order of elements.

Here’s one idea to explore:

Moving UI controls with Regions

With CSS Regions, elements can be collected into named flows, and then be visually rendered in other places in the layout, without touching their DOM order. It’s useful to think of regions as applying a visual transformation to elements, moving them from one box to another.

By adding media queries to the mix, you can move links, buttons and controls to optimize the UI for a specific context.

A common design pattern seen in mobile apps is to group non-essential controls under a menu that slides in from the side.

adaptve-ui-regions-illustration

Using CSS Regions, it’s easy to collect elements from the page and visually nest them under a menu that can be toggled on and off.

@media screen and (max-width: 30rem) {
  #account, #language, footer a{
    /* collect elements into the 'controls' named flow */
    flow-into: controls
  }

  #menu{
    /* render elements from the 'controls' named flow into #menu */
    flow-from: controls
  }
}

This code states that, for narrow viewports of 30rem or less, some of the UI controls will be taken from their normal desktop layout position, moved to a named flow called ‘controls’ and then rendered in another element identified by the ‘menu’ ID. Arbitrarily positioned elements can be pulled in together regardless of the DOM order. Notice the controls from the bottom of the page move in the side menu, together with the controls from the top of the page.

Demo

See an example of the idea in this adaptive UI demo. Resize the browser window and notice how the highlighted elements are moved under a slide-out menu when the viewport gets too narrow.

adaptive-ui-demo-screenshot

Make sure to use a browser that supports CSS Regions and that you have enabled any necessary experimental flags.

Chris Coyier from CSS Tricks has explored a similar idea with CSS Regions which he dubbed content folding. In a nutshell, it allows nesting content such as images, embedded media or ads in between paragraphs of an article when the viewport is narrow.

Content folding example with content nested in-between paragraphs

Content folding example on CSS-Tricks.com

Alternatively, this content can be positioned in a sidebar when there is enough horizontal space in the viewport.

More options for adaptive layouts

These examples show that CSS Regions can go far beyond flowing text between boxes. They are building blocks for doing highly adaptive layout on the web. For web developers and designers, this means breaking free from the limitations imposed by element DOM order and opening up a lot more creative approaches for adaptive and responsive designs.

Comments are closed.