Polymer Web Component that builds vertically ordered columns (timelines) from arbitrary DOM content. Unlike CSS columns, earlier content is always rendered closer to the top of the page than later content.
Unlike other other grid layout libraries such as Masonry, this web component rearranges DOM elements instead of using CSS repositioning. This allows better overall CSS support for styling elements, better support for flex/% based sizing, as well as retaining the ability to use nth-of-type CSS matchers.
Automatic Element Ordering
bower install --save ordered-columns
Import Web Components' polyfill:
Import Custom Element:
<link rel="import" href="bower_components/ordered-columns/ordered-columns.html">
Start using it!
Set the column count, and add content:
<ordered-columns count="5"> <!-- Any number of <article> or elements with role="article" --> </ordered-columns>
For detailed changelog, check Releases.
MIT License © Steven Skelton