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

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.