metro-bootstrap with improved tiles
Yesterday we released metro-bootstrap 18.104.22.168. The highlights of this release are based on improvements to tiles. We have been working to give you the flexibility to implement tiles where you want and as you want.
In the previous version metro-bootstrap tiles were based on the Thumbnail component of bootstrap that will let you place them side by side easily. Now you will be able to place a tile in a "div" tag, for example, and set the positioning as you want.
Here's a look at tiles news.
New positioning - Remove Thumbnail dependency
In the last version was mandatory to use thumbnails, now don't. If you want, you can use them, but you aren't obligated anymore. For example, if you want to create a Tile board taking part of the Bootstrap grid system you can (you can find here an example of how you can accomplish this).
You can find here a template of a responsive dashboard based on tiles.
Using the info, danger, warning and success colors already defined in bootstrap, you can add the following classes to your tiles:
New default variables
In the variables.less file you can find the following variables:
- @tile-bg to define the default color for tiles
- @tile-border to define the border size
- @tile-border-bg to define the border color
Following the Microsoft Guidelines were implemented new classes and now it's possible define the following sizes:
- Small (70x70). Add the css class tile-small.
- Medium (150x150). Add the css class tile-medium.
- Wide (310x150). Add the css class tile-wide.
- Large (310x310). Add the css class tile-large.
Place a tile title on the lower left corner.
<span class="tile-label">Tile 5</span>
Well, since Bootstrap v3.2.0 has been released we'll be updating metro-bootstrap to be compatible with it soon.