This package has been deprecated

    Author message:

    this package has been deprecated

    frags

    0.2.0 • Public • Published

    Build Status

    Frags

    Conditionally load HTML fragments based on screen size.

    How it works

    Installation

    You can download frags from this repo at /dist/frags.min.js, or install it via npm.

    npm install frags
    

    Include frags as a Node module (with something like Browserify), or with a script tag.

    var frags = require('frags');
    

    OR

    <script src="/path/to/frags.js"></script>
    

    Initialize frags with a class name of your choosing:

    frags('js-fragment'); // Use the same class name for your fragments (see below)
    

    Usage

    Declare which pieces of your page should be loaded conditionally.

    index.html

    <h1>Fragments are cool</h1>
    
    <div class="js-fragment" data-fragment-media="min-width:760" data-fragment-template="fragments/frag.html"></div>
    
    // You can also use a max-width query: "max-width:760"
    

    Create a fragment in a separate HTML file.

    fragments/frag.html

    <section class="frag">
      <h2>This is a fragment</h2>
      <p>Cool things are happening here.</p>
    </section>
    

    When the browser window reaches a minimum width of 760px, the contents of frag.html will replace the element in index.html:

    Result (index.html):

    <h1>Fragments are cool</h1>
    
    <section class="frag">
      <h2>This is a fragment</h2>
      <p>Cool things are happening here.</p>
    </section>
    

    You can also include <script> tags in your fragments:

    fragments/frag.html

    <section class="frag">
      <h2>This is a fragment</h2>
      <p>Cool things are happening here.</p>
    
      <script src="/path/relative/to/index.html/script.js"></script>
    
      <script>
        console.log('Hello world');
      </script>
    </section>
    

    Script tags will be executed when the fragment has been downloaded and inserted into the calling page.

    Install

    npm i frags

    DownloadsWeekly Downloads

    0

    Version

    0.2.0

    License

    MIT

    Last publish

    Collaborators

    • restlessbit