Mobile web app layout from scratch

by Gene — posted on 22 July 2018

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

(Bummer! The interactive demo that used to be here is no longer available due to the hosting provider shutting down the service. Sorry about that!)

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.

  drawerLayout: {
    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)

(Bummer! The interactive demo that used to be here is no longer available due to the hosting provider shutting down the service. Sorry about that!)

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

(Bummer! The interactive demo that used to be here is no longer available due to the hosting provider shutting down the service. Sorry about that!)