I remember a CSS grid system alternative to Masonry (Vanilla) http://masonry.desandro.com/ . That site was black background and displaying/arranging colored boxes (periodic table elements) . It also had filtering boxes based on their shapes and size (like round, square e.t.c) . It was also using hardware acceleration. I spend a lot of time to find it but no luck. Anyone knows this site?
-
Please use a proper search engine and the tools designed for searching websites.– PenguinCoderDec 8, 2012 at 16:45
-
Here I'm not asking you guys to find me a random website/code. I'm asking the name of the CSS system which is a direct alternative to Masonry and it already exists, I just fotgot it's name. I'm not even asking "if there is such system". So I believe my question is legit.– ErgecDec 8, 2012 at 17:08
-
2I got value out of this question, since I was looking for Isotope. The qeustion could be better, though.– Petrus TheronJun 28, 2013 at 20:53
4 Answers
I'm using this. And it works great with Bootstrap. Basically instead of container, I am using WALL:
<style>
.wall {
width: 100%;
padding: 0 20px;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
column-gap: 20px;
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
.wall > .brick {
display: inline-block;
width: 100%;
}
@media screen and (min-width:860px) {
.wall {-moz-column-count: 2; -webkit-column-count: 2; column-count: 2;}
}
@media screen and (min-width:1280px) {
.wall {-moz-column-count: 3; -webkit-column-count: 3; column-count: 3;}
}
@media screen and (min-width:1700px) {
.wall {-moz-column-count: 4; -webkit-column-count: 4; column-count: 4;}
}
</style>
This is designed so bricks must be a minimum of 400px. You can do math and change the min-width
s if you don't like 400.
I'd try Salvattore, it uses CSS for the configuration and all the design, no need to even touch JavaScript.
Here is another alternative if anyone finds it useful: http://suprb.com/apps/nested/