We use cookies to offer you a better browsing experience, analyse traffic and personalise content. Read how we use your data in our privacy policy.

Tile

A single tile element to build 2-dimensional Metro-like, Pinterest-like, or whatever-you-like grids

NEW 1.1.3

Concept

Everything is a tile!

Vertical…

Top Tile

… tiles

Bottom Tile

Middle Tile

With image

Wide Tile

Tall Tile

Download Example

Nesting

Tiles consist of Ancestors, Parents and Children
Ancestors can contain Parents and Children.
Parents can contain Children
Children can contain Children (argh!) or any other content

At least 3 levels deep...

You need at least three levels of hierarchy:


tile ancestor
|
└───tile parent
    |
    └───tile child

... but many more if you want!

You can nest tiles much deeper:


tile ancestor
|
├───tile vertical size 8
|   |
|   ├───tile child neutralized
|   |   |
|   |   ├───tile parent vertical
|   |   |   ├───tile child
|   |   |   └───tile child
|   |   |
|   |   └───tile parent
|   |       └───tile child
|   |
|   └───tile parent
|       └───tile child
|
└───tile parent
    └───tile child

Documentation

All Tiles Are Equal…

Vertical - use this option to stack tiles vertically. Should be used on a Parent or Ancestor tile
With Box - this options drops the tile into a Box element without using the Box stack
Sizing - a tile can be re-sized according to the 12-column grid
Color - here are 10 different standard colors available. Besides the standard colors, the Custom option provides color selectors for the tile background.

…Except the Child Stack

Neutralize - removes the "Child" property from the tile. This way you get a neutral "all purpose" tile.
Round Corners - set the border radius. You can either use the general setting where the parameter sets all corners equally, or activate the Advanced mode where you can set each corner individually.
Padding - you can either use the general setting where the parameter sets the padding for all sides equally, or activate the Advanced mode where you can set each side individually.