Jump to content
chrisdhanaraj

Fixed Grid Bootstrap

Recommended Posts

chrisdhanaraj

Hey guys,

 

I'm probably missing something really obvious, but I'm looking for the Fixed Grid that Bootstrap natively has for their responsive grid. I see a fluid option, but I just want fixed with the standard breakpoints changing the grid  - i.e. I want the 

 

 70px 30px - Large Display column grid size

 60px 20px - normal 

42px 20px - tablet

 

I see I can turn it on for the Large Display and Portrait tablets in the responsive.less, but can't seem to find it for anything else. And I'm not 100% sure how to actually make the changes I do in responsive.less stick. Help would be appreciated. Thanks!

Share this post


Link to post
Share on other sites
James B

Hi there,

 

The grid system is incorporated into the Pagelines Shortcodes, which you can find here - http://demo.pagelines.me/tools/

 this is the responsive layout, if you want it to be fixed you can change the site layout options to a static layout. I've looked in the bootstrap docs but the only fixed layout i can see is using standard container divs? Is this what you mean?

 

Pagelines does have the entire bootstrap code intergrated, so if you have the html direct from bootstrap for the layout you want to include you can simply paste the code in to the content area of the page and publish.

 

The option to change the layout at the required breakpoints can be edited using @media queries in the css - http://css-tricks.com/css-media-queries/


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
chrisdhanaraj

Oh I just realised that this might be the wrong forum for this topic, sorry if it is!

 

To clarify, I was talking about the column/gutter width. In pagelines it seems to have taken the fluid portion of bootstrap (I couldn't find the .core grid in the grid.less file) - i.e., whenever I resize my browser the column size changes. Bootstrap's default, though, is to use a specific column/gutter size until the breakpoint - to further clarify, they keep the grid 70px columns 30px gutter until you hit 978, where upon it defaults to the 60,20 grid until the next breakpoint etcetc. When it hits the mobile sizing it goes to fluid (like what Pagelines has), but I'm trying to get that defined column/gutter sizing for the tablet/desktop/large displays.

Share this post


Link to post
Share on other sites
Danny

As far as I am aware we have only implemented the responsive grid, thats why when you view our grid code it doesn't contain a class called .row-fluid, its simply .row.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
chrisdhanaraj

So the file I'm looking at is the grid.less in the LESS folder - it reads

 

 

// Draw Grid
#grid > .fluid(@fluidGridColumnWidth, @fluidGridGutterWidth);

 

 

Standard Bootstrap's reads (https://github.com/twitter/bootstrap/blob/master/less/grid.less

 
// Fixed (940px)
#grid > .core(@gridColumnWidth, @gridGutterWidth);
 
// Fluid (940px)
#grid > .fluid(@fluidGridColumnWidth, @fluidGridGutterWidth);
 

 

The core grid system is based on those variables, and you can toggle whether you're choosing fluid or fixed - fixed being different than static, since it's still responsive. For example, you can see in their 1200 file (https://github.com/twitter/bootstrap/blob/master/less/responsive-1200px-min.less

), the #grid > .core changes to the variables for 1200 width.

 

 

@media (min-width: 1200px) {
 
  // Fixed grid
  #grid > .core(@gridColumnWidth1200, @gridGutterWidth1200);

}

 

I can bring those variables (the core) into my child theme, but I'm not sure how to tell Pagelines to look at #grid > .core, instead of #grid > .fluid (which is what it responds to if you choose Responsive with Pixel Widths).

 

 

 

EDIT:

 

So I'm looking at the mixins file and yeah, its missing the .core section for the grid building. I can drop that section into my child theme's less folder too, still trying to find a way to point Pagelines at the proper LESS/CSS though.

Share this post


Link to post
Share on other sites
Simon

Create a folder called /less/ in your child theme, copy the core less file into it then edit away.

 

The framework will use your less file instead if it finds it.

Share this post


Link to post
Share on other sites
chrisdhanaraj

kk will do. I guess I'm just confused why only the fluid grid was included into Pagelines, instead of both the fluid and the core grid. It seems to run counter to what @Danny was saying - just seems like .row-fluid has been renamed .row.

Share this post


Link to post
Share on other sites
Danny

Do as Simon suggested above, add your own so code so that it supports both the fluid and fixed grid layouts.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
chrisdhanaraj

kk will do - though to clarify, it's not my own code. It's the default Bootstrap core grid. Consider a feature request, then, to include it in Pagelines in the next build.

 

Thanks for all your help guys, appreciate it :).

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×