Getting started with layerJS

layerJS is a different 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 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.

As the fragments — layerJS calls them frames — are static, their final experience is clearly defined by their 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.

Note: The fragments could actually show dynamic data using frameworks like VueJS, React or Angular. For the purpose of this article we still call them static as they will not change in structure. They are dynamic with respect to the data shown but are static with respect to the state of the user interface.

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:

Here is what the shown HTML 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.

Note: There is also a “Filerouter” which can load frames dynamically. That’s helpful for SEO.

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 an 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" .

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. 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