Tiles

Metro 4 present classes for creating tiles such as tiles in Windows 8/10.

About

Metro 4 contains classes to create tiles such as application tiles in Windows 8/10. To create tile you can add role tile to element with attribute data-role.

Important! Tiles work with grid layout css feature. But IE11 supports it in old format. Old format for grid layout not supported in Metro 4. For IE11 in Metro 4 present fallback into floated blocks.


                    <div data-role="tile"></div>
                

Tile sizes

You can use four sizes for your tiles: small, medium, wide and large. To set tile size use attribute data-size.


                    <div data-role="tile" data-size="small"></div>
                    <div data-role="tile" data-size="medium"></div>
                    <div data-role="tile" data-size="wide"></div>
                    <div data-role="tile" data-size="large"></div>
                

Tile icon & branding bar

The tile can have icon for the identification of target process. To create icon you can add element with class .icon inside a tile with image. Also you can use icon from font as tile icon.


                    <div data-size="small" data-role="tile"><img src="images/github.png" class="icon"></div>
                    <div data-size="medium" data-role="tile"><img src="images/github.png" class="icon"></div>
                    <div data-size="wide" data-role="tile"><img src="images/github.png" class="icon"></div>
                    <div data-size="large" data-role="tile"><span class="mif-github icon"></span></div>
                

To create branding bar, you must add element with class .branding-bar inside a tile.

Branding bar
Branding bar

                    <div data-role="tile">
                        <span class="branding-bar">Branding bar</span>
                    </div>
                

You can combine icon and branding bar in one tile.

Facebook
Store

                    <div data-role="tile">
                        <span class="branding-bar">Branding bar</span>
                    </div>
                

Badges

The tile can have two types od badges. Top badge and bottom badge. To create badge, you must add element with class .badge-top or .badge-bottom inside a tile.

10
10
Facebook 10
Store 10

                    <div data-role="tile">
                        <span class="badge-top">10</span>
                    </div>
                    <div data-role="tile">
                        <span class="badge-bottom">10</span>
                    </div>
                

Colors

You can change tile color with color classes or inline css style.


                    <div data-role="tile" data-size="small" class="bg-red"></div>
                    <div data-role="tile" data-size="wide" style="background-color: #4a00b3"></div>
                

Selected tile

If you add class .selected to tile, you can make tile as selected.

Applications

                    <div data-role="tile" class="bg-green selected">
                        <span class="icon mif-apps"></span>
                        <span class="branding-bar">Applications</span>
                    </div>
                

Cover for tile

You can create tile with cover image. To create it add attribute data-cover to tile.

Sergey Pimenov
Author

                    <div data-role="tile" data-size="large" data-cover="images/me.jpg">
                        <span class="branding-bar">Sergey Pimenov</span>
                    </div>

                    <div data-role="tile" data-cover="images/me_civil.jpg">
                        <span class="branding-bar">Author</span>
                    </div>
                

In additional, you can create covered slides with attribute data-cover for slides see below.

Tiles effects

You can add any affects to tiles. This is can be hover affects and live effects. To set effect, use attribute data-effect and create required slides. You can use next effects:

Hover effect

To set hover effect use next values for data-effect attribute: hover-slide-up, hover-slide-down, hover-slide-left, hover-slide-right, hover-zoom-up, hover-zoom-down, hover-zoom-left and hover-zoom-right. Also you must create two slides with classes: .slide-front and .slide-back


                    <div data-role="tile" data-effect="...">
                        <div class="slide-front">...</div>
                        <div class="slide-back">...</div>
                    </div>
                

Tumultumque de brevis historia, aperto heuretes!

hover-slide-up

Tumultumque de brevis historia, aperto heuretes!

hover-slide-down

Tumultumque de brevis historia, aperto heuretes!

hover-slide-left

Tumultumque de brevis historia, aperto heuretes!

hover-slide-right

Tumultumque de brevis historia, aperto heuretes!

hover-zoom-up

Tumultumque de brevis historia, aperto heuretes!

hover-zoom-down

Tumultumque de brevis historia, aperto heuretes!

hover-zoom-left

Tumultumque de brevis historia, aperto heuretes!

hover-zoom-right

                    <div data-role="tile" data-size="medium" data-effect="hover-zoom-right">
                        <div class="slide-front">
                            <img src="images/pumba-bg.jpg" class="h-100 w-100">
                        </div>
                        <div class="slide-back d-flex flex-justify-center flex-align-center p-4 op-mauve">
                            <p class="text-center">
                                Bubos mori in moscua! Tumultumque de brevis historia, aperto heuretes!
                            </p>
                        </div>
                        <span class="branding-bar fg-dark">hover-zoom-right</span>
                    </div>
                

Live tiles

Metro 4 contains a number of effects for tiles who transform tile to live tile. Add attribute data-effect with values: animate-slide-up, animate-slide-down, animate-slide-left, animate-slide-right and animate-fade.

1

2

3

4

5

1

2

3

4

5

1

2

3

4

5

1

2

3

4

5

1

2

3

4

5


                    <div data-role="tile" data-effect="animate-slide-up">
                        <div class="slide">1</div>
                        <div class="slide">2</div>
                        <div class="slide">3</div>
                        <div class="slide">4</div>
                        <div class="slide">5</div>
                    </div>
                

Also, you can use live tile with image set effect. To create this tile, add attribute data-effect="image-set" and add images inside tile.


                    <div data-role="tile" data-size="wide" data-effect="image-set">
                        <img src="images/1.jpg">
                        <img src="images/2.jpg">
                        <img src="images/3.jpg">
                        <img src="images/4.jpg">
                        <img src="images/5.jpg">
                    </div>
                

Tiles grid

To collect tiles in group Metro 4 contains special class .tiles-grid. This class create css grid layout for tiles with special cell sizes.


                    <div class="tiles-grid">
                        ...
                    </div>
                

With tiles grid you can easy place tiles as you wish. The grid is divided into cells of size 70x70 with an interval of 10 px without limitation to height or width. You can limit the size of the grid with subclasses .size-* from 1 to 10. One size is equivalent of small tile. Sizes include gap.

Tiles position in grid

You can place a tile to a specified position in grid with special classes .col-* and .row-*. This classes defined from 1 to 12 and allow you to place the tile in the specified column and row.


                    <div class="tiles-grid">
                        <div data-role="tile" data-size="small"></div>
                        <div data-role="tile" data-size="small"></div>
                        <div data-role="tile" data-size="small" class="col-1 row-2"></div>
                        <div data-role="tile" data-size="small" class="col-2 row-2"></div>
                        <div data-role="tile" data-size="medium"></div>
                        <div data-role="tile" data-size="wide"></div>
                        <div data-role="tile" data-size="large"></div>
                        <div data-role="tile" data-size="medium"></div>
                        <div data-role="tile" data-size="medium"></div>
                        <div data-role="tile" data-size="wide"></div>
                    </div>
                

Tiles groups

To grouping tiles you can use special class .tiles-group. To set group fixed size, add one of classes: .size-half, .size-1, .size-2, .size-3, .size-4, .size-5, .size-6, .size-7, .size-8, .size-9, .size-10.

Also, you can use media breakpoints for change size. To get it, use classes: .size-{media}-half, .size-{media}-1, .size-{media}-2, .size-{media}-3, .size-{media}-4, .size-{media}-5, .size-{media}-6, .size-{media}-7, .size-{media}-8, .size-{media}-9, .size-{media}-10. Where {media} is a breakpoint: fs, sm, md, ld, xl, xxl.

Github 30
Email 10
Chrome
Tables

                    <div class="tiles-grid tiles-group size-2" data-group-title="General">
                        <a href="https://github.com/olton/Metro-UI-CSS"
                                data-role="tile" class="bg-indigo">
                            <span class="mif-github icon"></span>
                            <span class="branding-bar">Github</span>
                            <span class="badge-bottom">30</span>
                        </a>
                        <div data-role="tile" class="bg-cyan">
                            <span class="mif-envelop icon"></span>
                            <span class="branding-bar">Email</span>
                            <span class="badge-bottom">10</span>
                        </div>
                        <div data-role="tile" class="bg-orange" data-size="wide">
                            <span class="mif-chrome icon"></span>
                            <span class="branding-bar">Chrome</span>
                        </div>
                        <div data-role="tile" data-size="small">
                            <span class="mif-apple icon"></span>
                        </div>
                        <div data-role="tile" data-size="small" class="bg-red">
                            <span class="mif-bell icon"></span>
                        </div>
                        <div data-role="tile" data-size="small" class="bg-teal col-1 row-6">
                            <span class="mif-windows icon"></span>
                        </div>
                        <div data-role="tile" data-size="small" class="bg-brown col-2 row-6">
                            <span class="mif-wind icon"></span>
                        </div>
                        <div data-role="tile" class="bg-cyan">
                            <span class="mif-table icon"></span>
                            <span class="branding-bar">Tables</span>
                        </div>
                    </div>