Horizontal scroll with HTML5 for Windows Store apps

These days I have spent some of spare time developing an application for Windows 8 using the Karmacracy API. For this, I have tried to minimize the WinJS usage and default controls, while maintaining the design previously known as “Metro”. The result so far is this, although it may be subject to changes and improvements:

karmacracy-stage-6

In this article we will see how to get the horizontal scroll, keeping elements such as the title and the login box.

First steps

The first thing that we need is to generate an empty HTML5 project for Windows 8, and add this code within the body field of the default.js file

    <div class="content">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

On the other hand we must add the following CSS style to look like a tile:

.content ul {
    list-style-type:none;
}

.content li {
    background: #00ff90;
    width:540px;
    height:100px;
    margin:40px;
}

The result is shown below. As we can see, the tiles are placed one under the other, and we have no horizontal or vertical scroll:

horizontal_scroll_1

To get them placed side by side, we will have to add the following code to our CSS, setting a width to the columns property.

.content {
    columns:600px;
}

Finally, to get the scroll, we have to add the following values to the body element of our page:

body {
    overflow-y:hidden;
    overflow-x:scroll;
    display:-ms-flexbox;
    -ms-flex-direction:row;
}

The result is what we see then:

Despite the fact that it is not the exact result that we are looking for, it can be a first aproach. The next step is to get some consistency, as in previous video one of the elements was cut. For fixing it, is as simple as adding the following lines:

* {
    margin:0;
    padding: 0;
}

.content li {
    ...
    display:inline-block;
}

With these small changes we have already corrected the cut of the tile, and an issue that arised with the margin of the first element.

Setting margins

Style guides recommend a margin of 120px right and 140px upwards to the content, this being the area occupied by the title. It’s also recommended a margin of around 60px on the bottom of the content, so the next step is to add margins to our content block:

.content {
    columns:600px;
    margin-top:140px;
    margin-left:120px;
    margin-bottom:60px;
}

On the other hand, we will modify the margins of the li element to match the spaces:

.content li {
    width:590px;
    margin:10px 0;
}

With all these changes, we can get a page that looks like this:

horizontal_scroll_2

Adding a title

The title consists primarily of a text in an h1 block. In this case, I used some styles and bases of Windows 8 (specifically what would be obtained if we add a new page) to get better alignment. We add the following HTML code:

    <div id="title">
        <header aria-label="Header content" role="banner">
            <button data-win-control="WinJS.UI.BackButton"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Titulo</span>
            </h1>
        </header>
    </div>

And some CSS:

#title {
    position:absolute;
    left:120px;
}

The positions set are absolute to become independent of the scroll action.

The last step is to add our login box, in this case I’ll use an empty blue block with fixed dimensions, but as seen at the beginning of the article, you can replace it with your own content.

    <div id="account">
    </div>

The properties of this login box are the following:

#account {
    position:absolute;
    top:15px;
    right: 0;
    margin:40px;
    background: #0026ff;
    width:200px;
    height:60px;
}

As the title, has a fixed position, but it attaches to the right instead of to the left. We finally set some margins getting the following result:

horizontal_scroll_3

With these steps, we already have a basis on which start to show our content.

Recap and more

In this article we have seen how to create a tiled interface with horizontal scolling, using standard html and CSS for almost all the article. This one, and the article about Angular.js for Windows Store Apps, can be used to start developing native apps for Windows 8, which can be then easily portable to HTML5 based operating systems such as as Firefox OS or Blackberry, or applications using Phonegap or Apache Cordova technologies for other mobile platforms.

Additional links:

Developing for Windows 8 with Angular JS
W3CSchools Reference
Index of UX guidelines for Windows Store apps

Un pensamiento en “Horizontal scroll with HTML5 for Windows Store apps

  1. Pingback: Challenges developing Karmacracy for Windows 8 | rlbisbe @ dev

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s