Teleport

A lightweight layout library for responsive web pages which enables content folding (also referred to as interdigitation).

You may want to pursue a simpler, non-JS dependent layout technique using inline-block, floats, flexbox etc. However, Teleport allows for some sophisticated layouts which cannot be achieved (?) using existing CSS-only solutions and which are a requirement of some content-rich web pages such as the BBC Sport Homepage (which this library was developed for).

Install

Simply include teleport.js into your page (also available as an AMD module or CommonJS export).

Usage

<div id="container">
  <div data-teleport-region>
    <div id="a" data-teleport="default">A</div>
  </div>
  <div data-teleport-region>
    <!--teleport:ex-a-mod-a@big-->
  </div>
</div>
<script>
  var teleport = new Teleport({
    container: '#container',
    breakpoints: {
      big: '(min-width: 600px)'
    }
  });
</script>

Features

• Move elements around the page at defined breakpoints
• Uses comment nodes to act as teleport targets, which is adjacent sibling selector styling friendly.

Browser Support

Should be supported in any modern(ish) version of Chrome, FF, Safari, IE9+ (for IE9 support you'll need to use a polyfill for matchMedia).

Run Tests

First install NPM packages:

npm install

Then start up a Selenium server e.g.

npm install selenium-standalone@latest -g
selenium-standalone install
selenium-standalone start

Then fire up a web server on port 8000 e.g.

python -m SimpleHTTPServer

Finally run the tests:

wdio wdio.conf.js

So, what now?

View source to see how this works, resize your browser to see Teleport in action or open in GitHub.

Examples

Scroll down to see some examples of Teleport in action (these also serve as fixtures for tests!)