4

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?

3
  • Please use a proper search engine and the tools designed for searching websites. Dec 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.
    – Ergec
    Dec 8, 2012 at 17:08
  • 2
    I got value out of this question, since I was looking for Isotope. The qeustion could be better, though. Jun 28, 2013 at 20:53

4 Answers 4

6

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-widths if you don't like 400.

1
  • Tnx, but what about in IE 9
    – Developer
    Feb 17, 2015 at 12:33
2

I'd try Salvattore, it uses CSS for the configuration and all the design, no need to even touch JavaScript.

http://salvattore.com/

0
1

Why not just check the source of its counterpart, Isotope: http://isotope.metafizzy.co/index.html

1
  • Didn't even know it's the same guy
    – Ergec
    Dec 8, 2012 at 17:14
1

Here is another alternative if anyone finds it useful: http://suprb.com/apps/nested/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.