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 : 7937  
 
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

The easiest way to align items using flexbox

With the release of flexbox in CSS, it has become an essential tool when placing elements next to each other, since, by default, the children of a display: flexare stacked…

Dark Mode on website using CSS and JavaScript

In today’s article we are going to learn how to build pretty much standard these days on the web pages and that is the alternative color mode and switching between…

JavaScript: Spread and Rest operators

In today’s article we are going to talk about one of the features of the ES6 version(ECMAScript 2015) of JavaScript which is Spread operator as well as Rest operator. These features…

How To Add Filter Effects to Images with CSS

To achieve interesting effects on your images, learn about the 'filter' and 'Backdrop-Filter' properties of CSS. CSS filters are a very attractive feature of CSS that allows you to apply certain…

Why You Should Hire Node.js Developer for Your Backend Development

When developers are building a new website, they mainly focus on both frontend and backend development. The frontend code helps create the interfaces through which the app interacts with the…

Introduction to REGEX - Regular Expression

Today we are going to write about Regular Expressions known as regex or shortened  regexp, a very useful concept of using search patterns. Surely you were in a situation when you…

HTTP Cookies: how they work and how to use them

Today we are going to write about the way to store data in a browser, why websites use cookies and how they work in detail. Continue reading to find out how…

How to write our own Privacy Policy

In this article we will talk about Privacy Policy statements, how you can write one and implement it on your page. Why did it pop up? These days when we browse on…

How to securely access the Dark Web in 15 steps. Second part

Let's continue with the 2nd part of our article in which we try to give you some advice on how to safely and securely explore the dark web. Let's restart from…

How to securely access the Dark Web in 15 steps. First part

The dark web can be a pretty dangerous place if you don't take the right precautions. You can stay relatively safe with a good antivirus and a decent VPN. However,…

How to Browse the Internet Anonymously: 6 tips

Most of the actions you take online are not as private as you might imagine. Nowadays, countless people and groups try to follow our online behaviour as closely as possible. Our…

How to run Android apps in Windows 10

Forget about having to constantly pick up your phone to see notifications or answer messages, Your Phone in Windows 10 is what you need and here we tell you how…

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