Skip to content

Home

Jump to bottom
Thomas Handorf edited this page May 1, 2019 · 62 revisions

Introduction

layerJS is an open source Javascript UI/UX library allowing to create intuitive, visually intense, mobile app-like experiences for web apps and websites in pure HTML.

Dynamic modifications in a UI are not arbitrary but follow clear patterns:

  1. interfaces mostly consist of HTML fragments (screens/pages, menus, popups, cards, slides, etc.) which are itself static.
  2. in response to user interaction those fragments are shown, hidden, swapped, moved or transformed — mostly in an animated way.

layerJS introduces the Stage-Frame concept. Frames are arbitrary HTML fragments - just DIVs containing the content of your site - that can be fit into Stages (also DIVs serving as viewports) dynamically. The root Stage is usually the browser window and its Frames represent sub pages or app screens. Frames can be exchanged within Stages using animated transitions like swipes, fades or 3D transitions. Frames can be placed on overlapping layers allowing effects like floating menus or parallax backgrounds.

layerJS supports directional touch and touchpad gestures to trigger transitions. Use your fingers to pull down menus or swipe through a list of sub pages. Transitions can further be triggered through API calls or above mentioned links.

layerJS can be completely controlled by pure HTML. It is controlled by HTML attributes and HTML links.

Documentation

Quickstart

layerJS can be included into your site from our CDN. Simply include the following tags into the head of your HTML document.

<script src="http://cdn.layerjs.org/libs/layerjs/layerjs-0.6.2.min.js"></script>
<link href="http://cdn.layerjs.org/libs/layerjs/layerjs-0.6.2.css" type="text/css" rel="stylesheet" />

If you would like to use the libraries locally, download them from the above urls and link them locally in your HTML.

In layerJS you will define stages, layers and frames simply by adding HTML-attributes to <div>s. Here is an example structure:

<div lj-type="stage">
    <div lj-type="layer">
        <div lj-type="frame" >
            … your HTML code …
        </div>
    </div>
</div>

The following example HTML document will create a slider that can be controlled by two links at the bottom:

<html>
<head>
  <script src="http://cdn.layerjs.org/libs/layerjs/layerjs-0.6.2.min.js"></script>
  <link href="http://cdn.layerjs.org/libs/layerjs/layerjs-0.6.2.css" type="text/css" rel="stylesheet" />
</head>
<body>
  <div lj-type="stage" style="width:100%; height:500px">
    <div lj-type="layer" lj-default-frame="frame1">
      <div lj-type="frame" lj-name="frame1">
        ... content of frame 1 ...
      </div>
      <div lj-type="frame" lj-name="frame2">
        ... content of frame 2 ...
      </div>
    </div>
  </div>
  <a href="#frame1">Frame 1</a>
  <a href="#frame2">Frame 2</a>
</body>
</html>

The example first includes the library from our CDN, then a structure of two frames inside a single stage with width:100%and height:500px is defined. This becomes the slider. Below that to links are included that link to #frame1 and #frame2 which will trigger transitions to frame1 and frame2, respectively.

Read a step by step tutorial on how to get started on Medium.

How to build

Please note: building layerJS is not required to use it. Simply use our CDN versions.

Building layerjs requires nodejs and npm. Necessary node packages can be installed by following these simple instructions:

Open a console/command line (for example: command prompt (CMD) or Terminal). Install mercurial (if you haven't already) and clone the repository with the following command:

hg clone https://bitbucket.org/layerjs/layerjs

you can also use other programs like Sourcetree to clone the directory. The latest development version may have issues. In this case download one of the releases.

Navigate to the layerJS folder:

cd layerjs

Enter the command:

npm install

and press Enter.

At the end of the installation, in order to start the build process,

enter the command:

npm run build

which automatically runs all unit tests via npm test. The result can be found in the ./dist directory.

You can now explore the examples in the ./examples directory.

Issues, bug reports and feature requests

If you experience any issues or bugs using layerJS or you would like to request features, please let us now through bitbucket issue tracking. This issue tracker is open to everyone so we encourage discussion on all issues.

How to contribute

Contributions to layerJS are more than welcome. Get in touch with us at developers@layerjs.org and discuss your ideas. You can also fork the repository and start building.

layerJS uses a contribution agreement to be able to republish code under future licenses if necessary: layerJS contribution agreement

Learn more about Harmony agreements.

Clone this wiki locally