{Gene}

Posted on Jul 22, 2018 • Updated on May 15, 2022 • Originally published at glabs.it

Mobile web app layout from scratch

#showdev #webdev #javascript #zuixjs

Though the topic covered on this post might still be actual, this content referrers to an older version of zuix.js library. See zuix.js website for up-to-date documentation.

First we add the header bar, with the logo and a menu button.

<div class="logo">
    <a href="/">app-logo</a>
</div>
<div data-ui-load="@lib/components/hamburger_icon"
     data-ui-options="options.menuButton"
     class="menu-button"></div>

See the actual code in the layout folder of the example below

To take some action when the menu button is clicked we "pass" to the data-ui-options attribute the options.menuButton object which is defined in the index.js like this

  menuButton: {
    on: {
      'menu:open': function() {
        // TODO: handle event
      },
      'menu:close': function() {
        // TODO: handle event
      }
    }
  }

Next we add a so called DrawerLayout which is basically a panel that contains the app menu and it will show in when the menu button is clicked or with a swipe gesture from left edge to the right.

<div data-ui-load="@lib/controllers/drawer_layout"
  data-ui-options="options.drawerLayout">

  <!-- Add Navigation Drawer menu and content here -->

</div>

Also for the drawer layout component we pass the options.drawerLayout object, so we can open/close the menu button as well, when the drawer is open/closed.

  drawerOptions: {
    on: {
      'drawer:open': function(e) {
        if (menuButton) menuButton.open();
      },
      'drawer:close': function(e) {
        if (menuButton) menuButton.close();
      }
    }
  }

And the following is the live example (swipe from left edge or click the menu button)

Now if we put a very long content in the page we might want the header to fade out/in as the user scrolls up/down.
For the purpose we load the header_auto_hide component on the body element.

<body data-ui-load="@lib/controllers/header_auto_hide"
      data-o-target="header-bar">

And this was the last piece of this mobile app layout

Unique, lovely web bits

{Gene} ・ Jul 26 '18 ・ 3 min read

#showdev #webdev #reusability #zuixjs

Top comments (9)

Fyodor • Jul 29 '18

Doesn’t it make sense to add a ‘...with zUIx’ or something to the post title?

{Gene} • Jul 29 '18

I try to keep titles short =) but I did put it in the taglist. And anyway no one knows about "zuix". It's just another unknown utility library.

Fyodor • Jul 29 '18

Yes, I understand it, but I guess the message of this post is the easiness of mobile web app layout from-scratch-building because of using the zuix, isn't it?

{Gene} • Jul 29 '18

My very first post here is an introduction to zuix.js. Other posts are kind of a continuation.
I understand your point as well... though I think that unknown words, odd acronyms, buzzwords are not good especially for beginners.
See it as an encouragement for curious people to start reading and go further even if they don't know the name zuix.js.
Perhaps they will understand the design principle illustrated in this post (modularization, component-based) and that would be a good thing anyway even if they end using some other library.
So, beside the title of the article, do you find this easy?
This is one of the reasons I wrote this library, but I am still trying to figure out if it's really easy to use for others too.