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

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

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

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

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

layerJS

layerJS, open source Javascript UI/UX library allowing…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store