Fluid grid type layouts | Community
Skip to main content
J
joel_triemstra
Level 2
October 16, 2015
Solved

Fluid grid type layouts

  • October 16, 2015
  • 4 replies
  • 1867 views

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%20Grid. 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/par/image.img.png/1359582020270.png[/img]

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by brucelef

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

4 replies

smacdonald2008
smacdonald2008
Level 10
October 16, 2015

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. 

B
Adobe Employee
brucelefAdobe EmployeeAccepted solution
Adobe Employee
October 16, 2015

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

J
joel_triemstraAuthor
Level 2
October 16, 2015

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
Ojjis
Level 7
October 16, 2015

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
 

Terms & ConditionsAccessibility statement

Loading footer...