Tily is built with simplicity in mind, but a bit of documentation is never wrong.
A .tile-row is the base of the whole system, it is inside of these that you put your tiles. The row provides the structure that is used when deciding the size of a tile. The default system supports upp to .tiles12, but this can be increased if needed.
<div class="tile-row tiles*">
<div class="tile">
</div>
...
</div>
The .tile-row must always have a .tiles* modifier class, this class decides how many tiles will fit horizontally in the row before they start to flow below.
<div class="tile (double||wide)">
<div class="tile-content">
</div>
</div>
The tile is the element with perfect proportions that you want. A tile will by default take up 1/* of your .tile-row.tiles*s width and have a height that is equal to its width. The content that you want to display goes inside the .tile-content element.
A .tile has two modifier classes, the .double and the .wide classes. These changes the size and or proportions of the tile in question. Adding .double to a tile will double its height and its width. Adding the .wide class will instead double the width but leave the height as it is.
Tily allows for infinite nesting because of its fluid nature, this allows you to create any combination of tiles that you need. Simply replace the .tile-content with a .tile-row.tiles* in the tile that you want to create a new row in.
<div class="tile-row tiles*">
<div class="tile">
<div class="tile-row tiles*">
<div class="tile">
</div>
...
</div>
</div>
...
</div>
Tily ships with a few responsive features for tile-rows and tiles. These allows you to create elements that behaves differently based on the users current viewport.
<div class="tile-row tiles* tiles*-phone tiles*-tablet">
<div class="tile wide-phone double-tablet">
</div>
</div>
The .tile-row has the ability to fit a different amount of horizontal tiles based on the viewport by using the .tiles*-(tablet||phone) class. Tiles that no longer fit horizontally will simply be pushed down below but will still show.
The .tile have a similar transform class .(tile||double||wide)-(phone||tablet). This causes the tile to display as the chosen modifier class (tile/double/wide) on the chosen viewport (phone/tablet)
The .collapse is a utility class that is very seldom needed. The use case for it is when nesting and transforming .tile-row elements inside of a .tile, sometimes the nested row content doesn't add up to the height (either higher or shorter) of the containing tile. What the collapse does is that it allows the height of the containing tile to "collapse to content". The
<div class="tile-row tiles2">
<div class="tile double collapse">
<div class="tile-row tiles2">
<div class="tile">
</div>
<div class="tile">
</div>
</div>
</div>
</div>
This example create a double tile that fills its container, we then add a tile row that can display two horizontal and two vertical tiles, we only add two tiles meaning that there will be a gap, one tile in height below the two inner most tiles. The .collapse simply removes this gap, making the double tile in this example appear as a wide tile.
A simple use case for tily is to insert tiles in an arbitrary container and have them look a certain way independant of the initial or responsive size of the parent.
The example to the right shows the three sizes of tiles in the basic system without any nesting or transforming elements.
What we do is that we define a .tile-row with a modifier of .tiles5. This tells the row that it should fit five tiles horizontally. We then add a .tile.double, this is a tile that is double the size of a normal size in both height and width. The following .tile.wide is a tile that is double the width but equal the height of a normal tile. The next .tile will stay on the same row but the following three will float down to the next one since we have filled the width of our .tile-row 2 (double) + 2 (wide) + 1 = 5.
<div class="tile-row tiles5">
<div class="tile double">
<div class="tile-content"></div>
</div>
<div class="tile wide">
<div class="tile-content"></div>
</div>
<div class="tile">
<div class="tile-content"></div>
</div>
<div class="tile">
<div class="tile-content"></div>
</div>
<div class="tile">
<div class="tile-content"></div>
</div>
<div class="tile">
<div class="tile-content"></div>
</div>
</div>
Sorry but Tily currently ships with absolutely no styling whatsoever. The reason for this is the myraid of design choices that one can pick when building a layout with tiles.
The simple tip is to target the .tile-content class and set a background on it and then simply add content to it.