A pattern for responsive markup
HTML CSS JavaScript
Latest commit a156743 Jul 19, 2016 @scottjehl scottjehl committed on GitHub Update README.md
Failed to load latest commit information.
demo move demos to demo folder Jul 19, 2016
src move js to src folder Jul 19, 2016
.jenkins Create .jenkins Jul 19, 2016
LICENSE Create LICENSE Feb 24, 2015
README.md Update README.md Jul 19, 2016
package.json add package.json file, 1.0.0 Jul 19, 2016

README.md

AppendAround

A pattern for responsive markup

  • [c]2012, @scottjehl, Filament Group, Inc. MIT/GPL

how-to

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
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 @media conditions in your CSS)
4. Call appendAround() on that element when the DOM is ready, and it'll keep itself in a visibile container at all times

Demos:

http://master.origin.appendaround.fgview.com/demo/ (or, for a branch preview, replace "master" with a branch name).

Sample markup

  <!-- potential container for appendAround -->
  <div class="foo" data-set="foobarbaz"></div>

  <ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
   <li>Vestibulum auctor dapibus neque.</li>
</ul>

  <!-- potential container for appendAround -->
  <div class="bar" data-set="foobarbaz"></div>

  <ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
   <li>Vestibulum auctor dapibus neque.</li>
</ul>


  <!-- initial container for appendAround -->
  <div class="baz" data-set="foobarbaz">

    <p class="sample">Sample appendAround Element</p>

  </div>

Sample CSS

/* the sample appendaround element */
.sample {
    padding: 1em;
    background: tan;
}

.baz {
    display: block;
}
.foo,
.bar {
    display: none; 
}

@media (min-width: 30em){
    .bar {
      display: block;
    }
    .foo, .baz {
      display: none; 
    }
}

@media (min-width: 50em){
    div.foo {
      display: block;
    }
    div.bar, div.baz {
      display: none; 
    }
}

Sample JavaScript call

$( ".sample" ).appendAround();