frags

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.