CODEWITHSUNDEEP
jquerycsscss-transitionsjquery-masonry
Ergec
Ergec

Reputation: 11824

CSS system alternative to Masonry

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?

Upvotes: 4

Views: 16479

Answers (4)

William Entriken
William Entriken

Reputation: 39303

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.

Upvotes: 6

rnmp
rnmp

Reputation: 87

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

http://salvattore.com/

Upvotes: 2

Marcelo Mason
Marcelo Mason

Reputation: 7060

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

Upvotes: 1

BenM
BenM

Reputation: 53228

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

Upvotes: 2

Related Questions