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.
<div data-role="tile">
<span class="branding-bar">Branding bar</span>
</div>
You can combine icon and branding bar in one tile.
<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.
<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.
<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.
<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>
<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.
<div data-role="tile" data-effect="animate-slide-up">
<div class="slide"><h1 class="pos-absolute pos-center">1</h1></div>
<div class="slide"><h1 class="pos-absolute pos-center">2</h1></div>
<div class="slide"><h1 class="pos-absolute pos-center">3</h1></div>
<div class="slide"><h1 class="pos-absolute pos-center">4</h1></div>
<div class="slide"><h1 class="pos-absolute pos-center">5</h1></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.
<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>