Mobile web app layout from scratch

{Gene} Jul 22 '18 Updated on May 05, 2019 ・2 min read

#showdev #webdev #javascript #zuix

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

That's it. Things we've been using so far:

hamburger_icon
drawer_layout
header_auto_hide
zuix

Unique, lovely web bits

{Gene}

#showdev #webdev #reusability #zuix

DISCUSS (9)

{Gene}

Yet another programmer =) accidentally creator of HomeGenie (open source smart-home server) and zUIx.js (component-based web development library).

Fyodor

Jul 29 '18

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

{Gene}

Author

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?

THREAD

{Gene}

Author

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.