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.
#content{
/* pull content into a named flow */
flow-into: myflow;
}
.region{
/* 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/
testem
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
The code in this repository implies and respects different licenses. This is a quick overview. For details check each folder's corresponding LICENSE.md file.
- Apache 2 for CSS Regions polyfill
- Public Domain for tests, demos and docs
- Third party assets under their own licenses
See LICENSE.md for details.