Skip to content
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

CSS Regions polyfill

Prototype library for using CSS Regions features in browsers that don't have support for them.

UPDATE, April 2014: This polyfill is obsolete.

François Remy wrote an improved CSS Regions polyfill with better browser support and broader feature coverage.


Include the polyfill script in your page

<script src='cssregions.js'></script>

Use standard CSS regions syntax on the same page.

    /* pull content into a named flow */
    flow-into: myflow;

    /* flow the content into other boxes */
    flow-from: myFlow;

    width: 200px;
    height: 100px;

The #content will be extracted and split across .region elements. Regions should be block elements and have explicit dimensions for the polyfill to work.


DO NOT directly modify the cssregions.js or cssregions.min.js files in the project root. These files are automatically built from components located under the src/ directory.

The project uses Grunt to automate the build process.

Grunt depends on Node.js and npm.

Install Grunt

npm install -g grunt

Tell Grunt to watch for changes and automatically build cssregions.js and cssregions.min.js:

cd ./path/to/polyfill/
grunt watch

While grunt watch is running, every time you make changes to components under src/ the main files, cssregions.js and cssregions.min.js, are built and written to the project root.

To do a one-time build run:

grunt build


The polyfill has a QUnit-driven test suite in the /test/ folder. New code should include at least one test.

Run the tests

Open the test/index.html file in a browser. This runs the QUnit test suite. Refresh compulsively after making changes to project files. You can automatically run the test suite with other tools. See below.


Testem automatically runs the QUnit suite across browsers as you make changes to the files. A configuration is provided in /testem.json. Testem is optional, but pretty cool.

Testem depends on NodeJS and npm.

Install Testem

npm install testem -g

Run Testem

cd ./path/to/polyfill/

This command will open up the browsers specified in the testem.json config file and run the test suite located at /test/index.html. As you make changes to any of the files, Testem will re-run the tests.

Learn more from the Testem docs

License information

The code in this repository implies and respects different licenses. This is a quick overview. For details check each folder's corresponding file.

  • Apache 2 for CSS Regions polyfill
  • Public Domain for tests, demos and docs
  • Third party assets under their own licenses

See for details.


Experimental CSS Regions polyfill written in JavaScript




No packages published
You can’t perform that action at this time.