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:

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:

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:

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:

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.