DEV Community

Cover image for Mobile web app layout from scratch
{Gene}
{Gene}

Posted on • Updated on • Originally published at glabs.it

Mobile web app layout from scratch


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>
Enter fullscreen mode Exit fullscreen mode

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
      }
    }
  }
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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();
      }
    }
  }
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

And this was the last piece of this mobile app layout

Read next:

Discussion (9)

Collapse
fyodorio profile image
Fyodor

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

Collapse
genejams profile image
{Gene} Author

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.

Collapse
fyodorio profile image
Fyodor

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 Thread
genejams profile image
{Gene} Author

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.

Thread Thread
fyodorio profile image
Fyodor

Yes, this library and approach are great! As well as your posts about them 👍 thanks!

Collapse
mhugac profile image
Alicem Bülbül

Quick and dirty, love it!

Collapse
ben profile image
Ben Halpern

Love this post!

Collapse
sleepycodernotes profile image
sleepycodernotes

Agly performance menu

Collapse
genejams profile image
{Gene} Author

Not sure what you mean but I would like to improve.
Any hint?
Thanks :)