Fluid grid type layouts

[joel_triemstra]

We're looking at some layouts from the creative team that include a variety of grid type structures. I took a look at http://dev.day.com/docs/en/cq/current/developing/mobile/responsive.html#Developing%20a%20Fluid%20Gri.... In the section "Defining the grid using a page component" there is this example:

<div class="page-content"> <div class="row-fluid"> <div class="span12"> <cq:include path="grid-12-par" resourceType="foundation/components/parsys" /> </div> </div> <div class="row-fluid"> <div class="span8"> <cq:include path="grid-8-par" resourceType="foundation/components/parsys" /> </div> <div class="span4"> <cq:include path="grid-4-par" resourceType="foundation/components/parsys" /> </div> </div> </div>

Is the idea here that each parsys would have one grid item added to it, so this grid would always have 3 items? And in the example further down, under "Scaling the grid", this image would indicate 5 parsys components in the JSP?

[img]http://dev.day.com/content/docs/en/cq/current/developing/mobile/responsive/flexiblegrid/_jcr_content...

[smacdonald2008]

You are correct -- in this example- each cq:include path references a  parsys component grid layout . The three referenced components are  grid-12-par, grid-8-par, and grid-4-par. Note that each path attribute must have a different value. 

[Bruce_Lefebvre · Accepted solution]

Is the idea here that each parsys would have one grid item added to it, so this grid would always have 3 items?

In this example the page component (media-home) defines the grid structure. Each parsys can have any number of components added to it, so this grid could potentially have more than three items. The structure on the other hand will be fixed: one row spanning the entire 12 columns, and one 2 column row (8 and 4 units, respectively).

You can read more about Bootstrap fluid grids here [0].

And in the example further down, under "Scaling the grid", this image would indicate 5 parsys components in the JSP?

That image is a bit misleading. I think it was meant to suggest that you could place a component that defines its own grid structure into any of the sections. There will be 3 parsys sections when this component is used (see attached).

[img]grid.png[/img]

[0] http://getbootstrap.com/2.3.2/scaffolding.html#fluidGridSystem

[joel_triemstra]

Is there a recommended pattern for layouts that might not have a defined number of elements, and using a library like isotope for packing? I have a couple ideas on how to make this work, but if there are recommendations, I'd be interested in what people have done. Our front end devs are interested in using inuit.css as a grid system if that matters.

E.g. www.mountaindew.com is similar to what we'd be trying to do.

[Ojjis]

I would say that it's basically up to the team what they prefer.
You can also check out http://masonry.desandro.com/ if you haven't already done so if you are into the
the whole "placing things in an optimal way" (when it comes to the available space in the browser). 

Of course things can be a bit messy using these libraries and might not suite all sites.
Especially if you want to have more control over how the site would look and behave in the different device-widths.
Then a more strict library like bootstrap and the likes of that might be of good use.

/Johan