Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Darren Healy
Front End Web Development Techdegree Student 23,565 PointsHelp with front end development - website layout
Turning to the community for some help on this one.
I would like to develop a site homepage very similar to this site: https://madebrave.com/ albeit for a deli.
What I am most interested in is the section where this company are showcasing their client work (TedX Glasgow is there if you are unsure). It looks to me like it's in a container div, then an unordered list, with each piece a list item, but after that I'm getting a little lost. How do they do the varying sizes and have them all neatly fix next to one another? How do they do the animation to reveal the text?
Any help is appreciated!
P.S. If it helps to know I plan to use the bootstrap 3 framework to help with a grid layout.
2 Answers
Kevin Korte
28,149 PointsIf you take a peak at their source code, you can see they are using the Isotope plugin, which basically is javascript doing calculations, and manipulating the size and position of the divs with absolute position.
Here is the link to the js plugin they use
Darren Healy
Front End Web Development Techdegree Student 23,565 PointsI see, thanks for the help with the theory Kevin. Buying the plugin lol.
Kevin Korte
28,149 PointsI didn't realize they charge for the plugin. I'm find with supporting authors, but there are also some free options. If you haven't bought it already, check out this similar one: http://masonry.desandro.com/
Darren Healy
Front End Web Development Techdegree Student 23,565 PointsDarren Healy
Front End Web Development Techdegree Student 23,565 PointsThanks Kevin, taking the animation features out of it, any ideas on how you would do this using html and css only?
Kevin Korte
28,149 PointsKevin Korte
28,149 PointsJavascript is setting the positioning here too....
To not do any dynamic position with js, which is what isotope is doing, you would need to look at using either flexbox, or css grids, however, grids has poor support to really be used today. I'm not sure if flexbox can pull off the dynamic grid quite like this. I've seem similar layouts done in flexbox, but there still is the visual axis line flexbox uses so it's not as dynamically laid out.
The only other option is to figure the absolute positioning out yourself, and set those values manually. However, you'll have to know the size of your elements before hand, and you wouldn't be able to add new elements in without a massive rewrite....in other words you'd lose the dynamic-ness of the layout.
To make this layout responsive, you'd have to redo all of the calculations, sizing, and manually code that for each breakpoint.