fg-appendaround

1.1.0 • Public • Published

AppendAround

A pattern for responsive markup

  • © 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)
  5. Call appendAround() on that element when the DOM is ready, and it'll keep itself in a visibile container at all times

Demo

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

/fg-appendaround/

    Package Sidebar

    Install

    npm i fg-appendaround

    Weekly Downloads

    24

    Version

    1.1.0

    License

    none

    Unpacked Size

    12.2 kB

    Total Files

    8

    Last publish

    Collaborators

    • filamentgroup-admin
    • jlembeck
    • johnmbender
    • maggiewachs
    • scottjehl
    • zachleat