Tilesdemo

Windows 8 Start Page Demo

Demo page

General info

Tiles are the representation of your app or sub module. The content shown on your tile can, and ideally should, change regularly, especially if your tile can communicate new, real-time information to your user. Tiles can show a combination of text and images, and a badge to show status. Tile is a block object and can be placed in any container.

The default tile size is 150x150 pixels. Tile size may be increased with add the next subclasses for tile object: .double(-vertical), .triple(-vertical), .quadro(-vertical).

For tile may be set status "selected". You also may be change background color for tile with classes .bg-color-*

Tile definition:

    <div class="tile"></div>
    <div class="tile double"></div>
    <div class="tile selected"></div>
    <div class="tile bg-color-orange"></div>

Tile content

Tile content can be placed in sub container with class .tile-content. Class .tile-content has padding 10px from top, bottom and 15px from left, right.

    <div class="tile">
        <div class="tile-content">
            ...content here...
        </div>
    </div>

Tiles content built-in subclasses

Tiles content can be organized with built-in subclasses: .icon, .image, .image-set, .image-slider.

The default value of params:

• Duration - 1000ms
• Period - 2000ms
• Direction - "up"

Tile status

Tile status (branding info) can be placed in sub container with class .brand or .tile-status. Tile status background color can be changed, example with built-in classes .bg-color-*

    <div class="tile">
        <div class="brand">
            ...status content here...
        </div>
    </div>

Tile status > badge

A badge can display either a number from 1-99 or a status glyph. badge is positioned in tile status container on the bottom right corner. Metro UI CSS support main Windows 8 badges: activity, alert, available, away, busy, newMessage, paused, playing, unavailable, error and attention as built-in. Default badge background color is blue but may be changed, example with built-in classes .bg-color-*.

    <div class="tile">
        <div class="brand">
            <div class="badge activity"></div>
        </div>
    </div>

Tile status > Branding info

A branding info can display brand name or a brand glyph. Branding info is positioned in tile status container on the bottom left corner.

    <div class="tile">
        <div class="brand">
            <div class="name">Name</div>
        </div>
    </div>

    <div class="tile">
        <div class="brand">
            <div class="icon"> <img /> </div>
        </div>
    </div>