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.
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.
There is a better approach. Dynamic modifications in a UI are not arbitrary but follow clear patterns:
- interfaces mostly consist of HTML fragments (screens/pages, menus, popups, cards, slides, etc.) which are itself static.
- 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.
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.
We now would like to transition from the home screen/page to a second screen/page. Here we simply add another frame in the
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
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.