A pattern for responsive markup
HTML CSS JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
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

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();