How to use the CSS Regions Polyfill

We are really interested in getting your feedback on the CSS Regions Polyfill. So I thought that having a simple example to get you started with this JavaScript library could only help :).

This post assumes that you know what the CSS Regions proposal does and you have a basic knowledge of its syntax. If you don’t know this, maybe you should first read this tutorial.

1. Download the polyfill

Obviously, this is the first step. You can get the code from here (just look for the big green Download button). Save the archive on your computer and unzip the file.

2. Create a new HTML file

Next, create a new HTML file and include the cssregions.js file from the root of the archive. Note that there is a minified version too. But if you want to take a look at what the code does it is more convenient to use the non-minified version.


<!DOCTYPE html>
<html>
<head>
 <title>My first example</title>
 <script src="cssregions.js"></script>
</head>
<body>

</body>
</html>

3. Add some content to act as the source of the regions

This short example is based on Chris Coyier’s example. I’ve just simplified the original example a bit to make it more readable.

First save this archive on your computer, unzip it, and then copy the ads folder to the same folder where your HTML file is stored.

Next add this code to your <body> tag:


<div id="my-source">
 <a href="#"><img src="ads/1.jpg"></a>
 <a href="#"><img src="ads/2.jpg"></a>
 <a href="#"><img src="ads/3.jpg"></a>
 <a href="#"><img src="ads/4.png"></a>
</div>

We will use my-source id to define a name-flow called myregion. As I said this will be the source of our regions.

4. Add DOM elements that will consume the content

Now right before the <div> you copied earlier on, add this code:


<div class="page-wrap">
 <section class="main-content">

<div class="article">Lorem ipsum dolor sit amet...</div>

<div class="ad-region-1"></div>

<div class="article">Lorem ipsum dolor sit amet...</div>

<div class="ad-region-2"></div>

<div class="article">Lorem ipsum dolor sit amet...</div>

<div class="ad-region-3"></div>

</section>

<aside class="group">

</aside>

</div>

This is a simple markup that sets a main content area and a side bar on the right side. Notice that there are four empty DOM elements (<aside> and three divs with a class name starting with ad-region-). These elements will provide the regions that will hold the content retrieved from the div element with the ID “my-source”.

5. Add the CSS for defining the name flows and region chains

Now, it is time to add the CSS for defining the myregion flow. Copy this in the <head> section of your page:


<style>

* {
 margin: 0;
 padding: 0;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 }

body {
 font: 15px/1.4 sans-serif;
 }

.article {
 margin: 0 0 30px 0;
 }

.page-wrap {
 width: 80%;
 margin: 0 auto;
 background: #eee;
 overflow: hidden;
 }

.main-content, aside {
 padding: 80px 20px 20px 20px;
 }

.main-content {
 float: left;
 width: 70%;
 }

#my-source {
 display: block;
 -adobe-flow-into: myregion;
 }

aside {
 display: block;
 -adobe-flow-from: myregion;
 float: right;
 width: 30%;
 }

[class^='ad-region'] {
 display: none;
 height: 155px;
 width: 100%;
 -adobe-flow-from: myregion;
 }

#my-source img { /* the selector is always the source, not the element it flows into */
 width: 100%;
 max-width: 200px;
 height: auto;
 float: right;
 margin: 0 0 10px 0;
 }

@media (max-width: 800px) {
 .main-content [class^='ad-region'] {
 display: block;
 }

.main-content [class^='ad-region']:last-child {
 height: 300px;
 }

aside {
 display: none;
 }

#my-source img {
 float: left;
 width: auto;
 margin: 0 10px 10px 0px;
 }

.main-content {
 width: 100%;
 }
 }

</style>

This might look scary but it isn’t that scary actually. It uses media queries to turn on/off some of the regions used for laying the content. The same media queries are used to display or hide the side bar depending on the width of the page.

This is how the page looks when the width is greater than 800 pixels:

reg1

And here is the same page at about 350 pixels:

reg2

Now, the important CSS bits are:


#my-source {
display: block;
    <strong>-adobe-flow-into: myregion;</strong>
 }

aside {
    display: block;
    <strong>-adobe-flow-from: myregion;</strong>
    float: right;
    width: 30%;
 }

[class^='ad-region'] {
    display: none;
    height: 155px;
    width: 100%;
    <strong>-adobe-flow-from: myregion;</strong>
 }

@media (max-width: 800px) {

...

.main-content [class^='ad-region'] {
    display: block;
 }

aside {
    display: none;
 }

...

}

This is where the region chain and flow name are defined and different regions are showen or hidden depending on the page width.

You can download a ZIP file with the complete example from here.

Give us feedback

If you find issues or you need improvements, or maybe you want to contribute to the project, or you just want to share a cool example you’ve built using this polyfill make sure you tell us.

There are a number of ways to do this: add an issue on the GitHub repo, send me an email (see  the About section of my site for address) or just fork the repo and send us a Pull Request.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>