How to create Responsive Content Using CSS Regions

How to create Responsive Content Using CSS Regions


CSS Regions allow content to flow across multiple areas called regions.  

With CSS Regions you can separate the content from the layout therefore you can create responsive content very easily.

Let's see how.

flow-into and flow-from

The flow-into CSS property can be used to prevent some content from displaying normally, but rather have its display redirected to a named flow:

#source {   
 
 -webkit-flow-into: main-thread; 
     
flow-into: main-thread;  
 
}

Then you can specify the layout, and tell it where to get its content from using theflow-from CSS property:

.region { 
     
 -webkit-flow-from: main-thread;
  
flow-from: main-thread;  
  
}

Note that all of the content in the element with ID source will actually get rendered into the layout specified by all of the elements of class region.

Example

Let’s take a look at an example.  

First of all, make sure you are using this with either a Webkit nightly, Chrome Canary or an up-to-date Chrome browser.  Then, enable CSS regions by navigating to chrome://flags and clicking on “Enable” under Enable experimental Webkit features.  

HTML

<div class="region"></div> 
   
<img src="https://media.ma-no.org/imgr/1000-600/admin-php.jpg"> 
   
<div class="region"></div>  
  
<div class="region"></div>  
  
<div class="region"></div>  
  
<div class="region"></div>  
  
<div class="region"></div>  
  
<div class="region"></div>    
  
<div id="source">
    
Far far away, behind the word mountains, far from the countries Vokalia and 
Consonantia, there live the blind texts. Separated they live in 
Bookmarksgrove right at the coast of the Semantics, a large language 
ocean. A small river named Duden flows by their place and supplies it
 with the necessary regelialia. It is a paradisematic country, in which 
oasted parts of sentences fly into your mouth. 
</div>
  

CSS

#source {   
  
 -webkit-flow-into: main-thread;
      
float-into: main-thread;  }
  
    
img {    
  
width: 200px;    
  
float: left;    
  
margin: 10px 5px;  
  
}    
  

.region {    
  
width: 150px;    
  
height: 150px;    
  
float: left;    
  
margin: 10px 5px;    
  
-webkit-flow-from: main-thread;
      
flow-from: main-thread;  
  
}

Basically, we have a div: ID issource.  That div contains all of the text to be displayed,  but, thanks to the CSS

#source {-webkit-flow-into: main-thread;float-into: main-thread;  }

the text  gets redirected into the named flow called main-thread and doesn’t display in its original div.

We also have other divs, all of class region.  In the CSS we have:

.region {   
  
width: 150px; 
height: 150px;
float: left;
margin: 10px 5px;
-webkit-flow-from: main-thread;
flow-from: main-thread;
}

Those regions will get their content from the main-thread named flow.  

The divs will automatically re-layout as you adjust the width of the window.

Finally,we stuck an image in the middle to show that the regions can be easily interspersed with other content.

You can find out more about CSS Regions here.

 

 

 

 

This article was inspired by http://blattchat.com/2013/08/16/responsive-text-using-css-regions/

 

 
by Janeth Kent Date: 21-08-2013 responsive design web development apps resources mobile RWD menu jquery css3 html5 hits : 8370  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN END DEVELOPMENT.

 
 
 

Related Posts

How to access webcam and grab an image using HTML5 and Javascript

We often use webcams to broadcast video in real time via our computer. This broadcast can be viewed, saved and even shared via the Internet. As a rule, we need…

How to Send Email from an HTML Contact Form

In today’s article we will write about how to make a working form that upon hitting that submit button will be functional and send the email (to you as a…

Use the SRCSET attribute to improve your SEO

There is a new standard HTML attribute that can be used in conjunction with IMG called SRCSET. It is new and important as it allows webmasters to display different images…

How to multiply matrices in JavaScript

It may seem strange to want to know how to multiply matrices in JavaScript. But we will see some examples where it is useful to know how to perform this…

JavaScript Formatting Date Tips

Something that seems simple as the treatment of dates can become complex if we don't take into account how to treat them when presenting them to the user. That is…

How to set up your Android phone: learn how to get your new phone up and running

If you've just bought a great new Android phone, you'll want to start using it as soon as possible. You'll see that it's not hard to get the initial set-up and…

Top tools for UX design and research

This article is a compilation of the "ux tools" I have tested in recent years. I've separated the tools by categories, although I recommend you to take a look at all…

How to make a multilingual website without redirect

Today, we're going to talk about how to implement a simple language selector on the basic static website, without the need of any backend or database calls or redirection to…

Starting with Bootstrap-Vue step by step

Today we will show you how to use BootstrapVue, describe the installation process and show basic functionality. The project’s based on the world's most popular CSS framework - Bootstrap, for building…

Bootstrap 5 beta2. What offers?

Since the release of the Bootstrap 4 is three years, in this article we will present what is new in the world’s most popular framework for building responsive, mobile-first sites.…

Graphic design and its impact on Web Development

In today's article we will explain the concept of graphic design, its fundamentals and what it brings into web development. Graphic design is applied to everything visual, believe or not,…

Creating simple CSS spinner-loader

In today's article we will show you how to animate a basic loader that spins when some predefined action is defined, such as loading an image. That can be used…

We use our own and third-party cookies to improve our services, compile statistical information and analyze your browsing habits. This allows us to personalize the content we offer and to show you advertisements related to your preferences. By clicking "Accept all" you agree to the storage of cookies on your device to improve website navigation, analyse traffic and assist our marketing activities. You can also select "System Cookies Only" to accept only the cookies required for the website to function, or you can select the cookies you wish to activate by clicking on "settings".

Accept All Only sistem cookies Configuration