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.
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 can be separated into two steps
- there are HTML fragments (e.g. screens/pages, menus, popups, cards, slides, etc.) which are itself static.
- 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:
- the static HTML fragments are “frames”, which are simply
divs with the attribute
- “Stages” define where those frames should be shown. They are kind of “viewport”
divs identified by the attribute
lj-type="stage". Stages contain one or more “layers” to allow to stack frames on top of each other.
- 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.
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
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.
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.
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-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
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.