A vanilla JavaScript version of Filament Group's AppendAround
npm install vanilla-append-aroundA vanilla JavaScript port of Filament Group's AppendAround. A pattern for responsive markup.
No dependencies. 1K minified before gzip.
Install with JSPM
``
jspm install appendAround=github:davidrapson/vanillaAppendAround
Install with bower
`
bower install https://github.com/davidrapson/vanillaAppendAround.git
1. Insert potential element containers throughout the DOM
2. Give each container a data-set attribute with a value that matches all other containers' values@media
3. Place your appendAround content in one of the potential containers
4. Configure your CSS to only display one potential container at a time (and display others depending on conditions in your CSS)appendAround()
5. Call once when the DOM is ready, and it'll keep all appendAround elements in a visible container at all times.
See examples for full usage. Configuration options are as follows:
`js``
appendAround({
// Selector to use for appendAround elements. [Default '.js-append']
selector: '.js-append',
// Attribute to use for sets. [Default 'data-set']
attribute: 'data-set',
// Amount to debounce resize listener (ms). [Default 66]
debounceDuration: 66
});
~IE9+ or any browser with support for: