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?
Solved! Go to Solution.
Views
Replies
Total Likes
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
Views
Replies
Total Likes
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.
Views
Replies
Total Likes
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
Views
Replies
Total Likes
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.
Views
Replies
Total Likes
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
Views
Replies
Total Likes
Views
Likes
Replies
Views
Likes
Replies