vanilla-append-around
v1.0.0
Published
A vanilla JavaScript version of Filament Group's AppendAround
Downloads
38
Readme
vanillaAppendAround
A vanilla JavaScript port of Filament Group's AppendAround. A pattern for responsive markup.
No dependencies. 1K minified before gzip.
Installation
Install with JSPM
jspm install appendAround=github:davidrapson/vanillaAppendAround
Install with bower
bower install https://github.com/davidrapson/vanillaAppendAround.git
How-to
- Insert potential element containers throughout the DOM
- Give each container a
data-set
attribute with a value that matches all other containers' values - Place your appendAround content in one of the potential containers
- Configure your CSS to only display one potential container at a time (and display others depending on
@media
conditions in your CSS) - Call
appendAround()
once when the DOM is ready, and it'll keep all appendAround elements in a visible container at all times.
Usage
See examples for full usage. Configuration options are as follows:
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
});
Browser Support
~IE9+ or any browser with support for: