Tiles
Metro UI present classes for creating tiles such as tiles in Windows 8/10.
About
Metro UI 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 UI. For IE11 in Metro UI 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">Serhii 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 UI 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
.
Slide and fade effects
<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>
Image-set
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 UI 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>