Looking for a Card Based Layout or Template

[NooseLadder]

Hi,

Has anyone used card-based layouts with processwire, like Pinterest, drrrible etc? I'm looking for inspiration and a template to generate content.

Rgds,

Keith

[Macrura]

there's really nothing to it... you just need a way of rendering the objects, like a function or include file, or template render;

I have a site that i do an isotope 'wall' homepage, and it pulls in all of the site content, and renders each wall item with a different function depending on the template of the page..

the isotope/masonry is pretty well documented and easy to use, if you're planning on using that;

[renobird]

http://assessment.ifas.ufl.edu/assessments/

This is a very simple example from a site I built.

No frameworks, just a simple responsive grid. As Macrura said, there really isn't a whole lot to it. 

[adrian]

http://assessment.ifas.ufl.edu/assessments/

This is a very simple example from a site I built.

No frameworks, just a simple responsive grid. As Macrura said, there really isn't a whole lot to it. 

I know it's off-topic, but I do love what you've done with that site - I've seen it before, but it looks like you've improved on the filter functionality - very clean, visually appealing, and super functional!

[renobird]

The site linked below is currently live, but it's still very much a WIP. All the responsiveness has been disabled for now until we can get some other issues addressed. I've been reluctant to post anything about it, as it's really not complete. 

That said, here is another example of a card based layout.

http://arts.ufl.edu/in-the-loop/news/

I'll post more about that site over the summer when it's officially live and complete.

@adrian,

Thanks!

Lots more coming soon too. I'm waist deep in phase II.

[NooseLadder]

Thanks for the replies. A couple of nice looking sites. Certainly food for thought. Thanks again. 

Edit: I was also hoping to implement more interactive cards rather than only links to the full page/artiicle. For example when you click on a card it expands or flips showing more content on the same page. Probalby justt JS or jquery need implementing to do this.

[diogo]

First in google

http://nnattawat.github.io/flip/

Edit: and a bit lower http://pingmin-tech.com/flipcardjs

Edit2: and with Masonry http://codepen.io/rmarmer1/pen/bkaAK

[renobird]

I was also hoping to implement more interactive cards rather than only links to the full page/artiicle. For example when you click on a card it expands or flips showing more content on the same page. Probalby justt JS or jquery need implementing to do this.

Yeah, preferably you would load that additional content via ajax. Otherwise you are loading lots of hidden content that may never get seen.

[NooseLadder]

First in google

http://nnattawat.github.io/flip/

Edit: and a bit lower http://pingmin-tech.com/flipcardjs

Edit2: and with Masonry http://codepen.io/rmarmer1/pen/bkaAK

Would you use this in preference to CSS transforms / transitions?

Edit: @Diogo Re: masonry: looks like you edited before I added this comment 

Yeah, preferably you would load that additional content via ajax. Otherwise you are loading lots of hidden content that may never get seen.

Very good point.

Edited March 19, 2015 by NooseLadder

[diogo]

Would you use this in preference to CSS transforms / transitions?

Maybe it even uses them, I didn't check.

But I don't necessarily prefer CSS transitions to animations in JS. In the case of velocity.js for instance, the animations can be smoother than CSS transitions,

[NooseLadder]

Maybe it even uses them, I didn't check.

But I don't necessarily prefer CSS transitions to animations in JS. In the case of velocity.js for instance, the animations can be smoother than CSS transitions,

I think I'll give velocity a try. Thanks for the link.

[jacmaes]

This one's nice: http://codyhouse.co/gem/css-product-quick-view/

[NooseLadder]

This one's nice: http://codyhouse.co/gem/css-product-quick-view/

Yes it is. Thanks for the link