Grid system

Tiles

Grid consists of container .tiles and children .tile. Each child element should have specified size, available options are:

• .half
• .third
• .two-thirds
• .quarter
• .three-quarters.

Our grid is responsive by default, this means, that these sizes are for full size screen and are automatically scaled up as the display size gets smaller, eventually all of these will span entire width on very small device. We considered making it more explicit, but found out, that this system works for us. Width breakpoints are setup like this:

• small laptop: < 1440px
• tablet: < 960px
• mobile: < 480

One last think, try not to mess with container and/or children margins. It’s probably better idea to use another element. You can add inset css class to .tiles, if you need some extra spacing around children.

Examples

Nesting

You can of course container inside child. Just be careful with child padding / border if you do.

Dashboard tiles

Like regular tiles, but for use within .white-block elements. They negate white block padding and don’t have any space between tiles. Oh and there is also line between tiles.