Portfolio Scripts

CSS will get you a long way here building a grid that is flexible and fluid. To really get you the extra mile, you may want to check out a plugin like Masonry http://masonry.desandro.com or another popular one is Isotope http://isotope.metafizzy.co

You will probably like this page, lots of options here: http://www.queness.com/post/11133/the-famous-pinterest-dynamic-grid-layout-and-design-inspirations

Looking at the code of the site you linked, it is a wordpress site. My guess on how he is doing it is he more than likely as a custom field on his post type with a color picker, that allows him to set the hover color of each project individually.

He is putting the hover color into a HTML5 data attribute. He is than using either Javascript, or likely Jquery since he pulling that in too, to take the hex color value being stored in the data-attribue, and than probably using the MouseOver or MouseEnter method.

He is hiding the div that expands and than on mouse over the div is changed from display: none; to display:block; and the background color added to the element from what is stored in the data attribute.

Hope that helps you, what he did is probably custom. Certainly pretty cool.

Thanks Kevin, some great stuff here. I've used the isotope before and it definitely has some fantastic features. I really like the inspiration site with the grid that has some sort of algorithm that pulls colors from the particular image and placing that particular color in the text box below. I have to do some searching for a plug-in that has a nice layout as such. Thanks again for your thoughts.

I'd like to be able to tap into the power of Jquery and create a similar grid that flexes and adapts

There's no connection between responsive web design & JQuery.

However, you might be interested in checking out http://purecss.io/grids/

Thank you James. My confusion lies in creating boxes or basic grids that can flex and extend depending upon the size of the device. I like and understand media queries, but run into some problems when the monitor size becomes overwhelming.

For some good example of grid systems – treehouse's recent promo still looked sharp and crisp at a large resolution. If you would recommend creating something similar – would you just start with a grid system or what his treehouse using to maintain the grid along with the typography. Thanks again for your thoughts…

http://teamtreehouse.com/perks?utm_source=Treehouse+Student+Newsletter&utm_campaign=f4c8264bd2-Treehouse_Student_Newsletter_110_17_2013&utm_medium=email&utm_term=0_33a4039768-f4c8264bd2-33730921