Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Fluid grid type layouts

Avatar

Level 2

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...

1 Accepted Solution

Avatar

Correct answer by
Employee

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

View solution in original post

4 Replies

Avatar

Level 10

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. 

Avatar

Correct answer by
Employee

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

Avatar

Level 2

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.

Avatar

Level 7

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