Masonry Playground

NEW

BRZ Super Secret Exhaust

test inside this little box dot dot

test inside this little box dot dot

test inside this little box dot dot

text


test

You can put text inside these elements if you don't want to use imagery


test

You can put text inside these elements if you don't want to use imagery


test

You can put text inside these elements if you don't want to use imagery



How this works

Create an element with a class of "perrin-masonry", then put elements inside of it, each with a class of "tile"

Rows are 1120px wide, each tile has a margin of 5px on every side. This means that each tile subtracts 10 horizontal pixels.

The widest tile you can have is 1110px

you can declare the dimensions of each element by applying class names to an element. <div class="tile width-270"></div>. It doesn't have to be a 'div'. You are restricted to a set of pre-determined widths; 1110, 970, 830, 690, 550, 410, 270, 130.

You can put text inside these elements if you don't want to use imagery



Width Combinations Examples




Height Combinations Examples

The default height for each element is 130 so you don't have to declare that height.

Otherwise you can declare a height with a classname such as "height-270", "height-410", "height-550", or "height-690". The order in which you place these elements matters



All classes for the masonry elements

.tile (this class is required for each element)
.rounded (this will add rounded corners to the element)
.backgroud-gray-dark
.backgroud-gray-light
.backgroud-red
.backgroud-black
.width-130
.width-270
.width-410
.width-550
.width-690
.width-830
.width-970
.width-1110 (full width)
.height-130 (you don't actually have to declare height 130, this is the default height)
.height-270
.height-410
.height-550
.height-690



Tile Sizes





2017 Subaru WRX & STI

NEW

2 ways to stay cool

'15 WRX Cold Air Intake - No Tune Required!

'15 STI - The Front Mount Intercooler You've Been Waiting For