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>

mattberg@live.com

Re: Wedding Annoucement!

Congratulations! I'm really excited to celebrate with you all. Thanks for...

12
Store 6

michael_angiulo

I just saw Thor last night. It was awesome! I think you'd love it.

RT @julie_green

Tweet@rama

Tiles content built-in subclasses

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

Subclass .icon
Subclass .image
Subclass .image-set
    <div class="tile icon(image)">
        <div class="tile-content">
            <img />
        </div>
    </div>
    <div class="tile icon">
        <div class="tile-content">
            <i class="icon-"><i/>
        </div>
    </div>
    ------------
    <div class="tile image-set">
        <div class="tile-content">
            <img />
        </div>
        <div class="tile-content">
            <img />
        </div>
        <div class="tile-content">
            <img />
        </div>
        <div class="tile-content">
            <img />
        </div>
        <div class="tile-content">
            <img />
        </div>
    </div>
    ------------
    <div class="tile image-slider" data-role="image-slider">
        <div class="tile-content">
            <img />
        </div>
        ...
        <div class="tile-content">
            <img />
        </div>
    </div>

Subclass .icon

Subclass .image

Subclass .image-set

Tag <i />

Tile Slider Plugin

For use tile-slider you mus include tile-slider.js in head of you page and add attribute data-role="tile-slider" to tile object. To set specific parameters such as direction, duration and period you must add param data-param-direction(duration, period) to tile object.

mattberg@live.com

Re: Wedding Annoucement!

Congratulations! I'm really excited to celebrate with you all. Thanks for...

tina@live.com

Re: Wedding Annoucement!

Huh! Waw!!! I'm really excited to celebrate with you all. Thanks for...

12

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>
99

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>
10
Mail
12
Photos

Examples of tiles made with Metro UI CSS

10
Mail
Video
Pictures
5
Calendar
Store 6
Music

michael_angiulo

I just saw Thor last night. It was awesome! I think you'd love it.

RT @julie_green

Tweet@rama
YouTube
Excel 2013

mattberg@live.com

Re: Wedding Annoucement!

Congratulations! I'm really excited to celebrate with you all. Thanks for...

12

This is a desert eagle. He is very hungry and angry bird.

10
Photos
Internet Explorer