Getting started with layerJS

layerJS is a new approach to building web user interfaces. It unifies various exiting approaches into ONE universal concept. Although it may have an initial learning curve, you will be awarded with an intuitive way to build any navigational pattern simply by adding some attributes and links to your HTML.

Decomposition of an user interface into frames (cyan). See a full explanation of the Stage-Frame concept on http://layerjs.org

Think HTML in a different way — think layerJS

HTML was created to describe single static documents. Static means that the HTML source code directly represents the final DOM structure in the browser and no further modifications will occur.

This is of course not sufficient anymore. Today most web user interfaces (e.g. websites and web apps) are HTML documents that are dynamically modified by Javascript to create an interactive web experience. This however makes the creation and iteration of user interfaces unnecessarily difficult, as the final appearance is hidden behind code instead of clear declarative HTML.

There is a better approach. Dynamic modifications in a UI are not arbitrary but can be separated into two steps

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

Through this separation, the static fragments can clearly be defined by HTML and some CSS, making their creation much more easy and intuitive. The dynamic part of the interface is solely defined by a set of rules which define how the fragments are re-composed upon user interaction. layerJS allows you to define those rules by regular links and HTML attributes.

layerJS implements this concept as follows:

1. the static HTML fragments are “frames”, which are simply divs with the attribute lj-type="frame".
2. “Stages” define where those frames should be shown. They are kind of “viewport” divs identified by the attributelj-type="stage". Stages contain one or more “layers” to allow to stack frames on top of each other.
3. The rules to dynamically show/hide frames are simply HTML links like href="#mylayer.slide1" which define which frame should be shown where after link click. Such transitions can also be triggered by gestures or API.

Note: The above separation of static and dynamic refers to the user interaction / navigation only. The static fragments could still show dynamic data through frameworks like VueJS, React or Angular. In this case the fragments would be templates, which still can clearly be defined by declarative HTML and CSS. From layerJS’ perspective they are nevertheless simply static fragments that can be shown, hidden or animated upon user interaction.

First steps

To start you need to decide whether layerJS should deal with all user navigation (recommended) or should just act in a part of your interface. In the first case you’ll hook up layerJS right at the body, by making it a stage .

Here is what the HTML on the left is doing: In the head it is loading layerJS from the CDN. The body contains an attribute lj-type which makes it a stage. A stage indicates to layerJS that some fragment (frame) should dynamically be fit into it. The stage contains a layer, in this case the content-layer. A stage can contain more than one layer to compose frames on top of each other. lj-fit-to="responsive-width" tells layerJS to fit the frame into the stage by adapting its width to the stage’s width. Within the layer we added a single frame with id home which will contain the content of the first page/screen. Finally, in the CSS we need to tell the browser to expand the body to the full browser window.

This example will actually just show “Hello World”. So there is a little bit of boilerplate here, but you are actually already through it. You are now set to easily add more pages screens or add layers for menus or popups.

Adding interaction

We now would like to transition from the home screen/page to a second screen/page. Here we simply add another frame in the content-layer .

The new frame has id more . We can now use links to transition between the two frames. <a href="#more"> links to the new frame. lj-transition on the layer defines the type of animation used. See this fiddle for a live demo.

Adding a menu

Adding a menu is now simple. We need a layer menu-layeron top of our content-layer. The layer has two new attributes: lj-native-scroll="false" will disable native scrolling and lj-no-url will prevent the menu state to appear in the URL.

In this layer are two menu frames. The first one is a Menu icon (M) that is shown in the top right corner. Its position is defined by the attributes lj-fit-to="fixed" and lj-start-position="top-right" . This will position the “M” at the top right corner leaving its dimensions as they are.

The whole frame is a link that links to the second menu frame main-menu . This frame has different fitting and transition behaviour as controlled by its attributes. It will also be positioned in the top right corner but will expand its height to the full height. We also define that it should move in from the right using lj-transition="left" .

Within that frame is a “close” link that will link back to the Menu icon. See it live here.

Please note that the whole appearance of the menus is defined by the CSS which is completely independent of layerJS. You can go wild here.

I hope that helps you to get started! There are more examples on the layerJS website. Also please do not hesitate to ask us anything at developers@layerjs.com.

Your feedback is very welcome! Please let me know in the comments.

Best,

Thomas