Jump to content

Looking for a Card Based Layout or Template


NooseLadder
 Share

Recommended Posts

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;

  • Like 1
Link to comment
Share on other sites

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!

  • Like 2
Link to comment
Share on other sites

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.

  • Like 4
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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 by NooseLadder
Link to comment
Share on other sites

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,

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...