This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Tagged: ,

Grid System

  • Creator
    Topic
  • #15536
    Paul Littlewood
    Participant

    Currently Jumpstart uses the Bootstrap grid system to control content/sidebar and an internal grid system to control most of the elements.

    I was just wondering whether you would ever consider just using Bootstrap grid to control everything? To me it feels a bit weird to be using two grid systems and a little awkward to customise. If just BS was used maybe it might even be possible to filter in the new BS3 column classes on grids etc to give greater control of how the design responds to breakpoints rather than just stacking at 767px? I know things like 5 columns can be a little tricky in BS but I think it can be hacked to work a couple of different ways.

    Anyway, just wondering. I’m sure there are very good reasons for it being the way it is.

Viewing 12 replies - 1 through 12 (of 12 total)
  • Author
    Replies
  • #15555
    Jason Bobich
    Keymaster

    There are actually many features that are brand new to Bootstrap 3 (which was just implemented in our last major update) that would give promise to moving everything to Bootstrap’s grid system — for example, nested grids, and different responsive stacking classes.

    But attempting to implement everything over to Bootstrap’s grid system would be such a huge process. Making huge changes like this just require so much in terms of pushing out those updates to the users. People don’t like when big things change, and I’ve thought a lot about that one and it would be a tough one to get people through. I contemplated a lot about doing this in the last update when updating to Bootstrap 3.

    Additionally, in terms of organization, I personally don’t like the idea of having to manually code in just the tenths and fifths, so they work with Bootstrap’s system. I see that process as becoming a mess, fast.

    #16466
    Jason Bobich
    Keymaster

    I’ve been doing some pretty big updates recently, and tonight I was looking more into the possibility of setting all of the inner columns of the theme up with Bootstrap. So now I have a better answer for you as to why it’s just not going to work, other than the fact they don’t support all the column variations we do.

    1) A row of columns needs to be wrapped in <div class="row">...</div>. This is a problem because when people are using the shortcodes, they set it up like this:

    [one_third]Col 1...[/one_third]
    [one_third]Col 2...[/one_third]
    [one_third last]Col 3...[/one_third]

    I don’t know how it would be possible to know when a row starts to add the markup before the row. You could use “first” like this:

    [one_third first]Col 1...[/one_third]
    [one_third]Col 2...[/one_third]
    [one_third last]Col 3...[/one_third]

    But then not only would this add an extra step of complication, then everyone’s columns would break on updating the theme.

    2) And the other major thing is how the gutters work in Bootstrap grid system. Each column has gutter space (inner padding) on both the right and the left of the column. In our system, we have margin to the right of each column, and then on the last column, no margin. This allows for the left and right to be flush up against the main container.

    So, for example, if the row of columns was put in the middle of the content of a WordPress page, the edges are not going to line up like they do now. Consider this:

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
    
    <div class="row">
    <div class="col-xs-4">...</div>
    <div class="col-xs-4">...</div>
    <div class="col-xs-4">...</div>
    </div>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>

    … The set of columns will be 15px inward on both sides from the paragraphs of text.

    #16467
    Paul Littlewood
    Participant

    Hi Jason, thanks for giving it some thought…

    To reply to 2, if I understand correctly, I don’t think this is a problem. Bootstrap sets a negative left and right margin to rows so nesting like this works just fine.

    Example here:
    http://jumpstart.pjlittlewood.co.uk/columns-test/

    #16469
    Paul Littlewood
    Participant

    Could the problem of the shortcode not be solved by setting a flag variable the first time the shortcode is called (and inserting the row div) and then resetting it when you run the shortcode marked as “last”?

    #16473
    Jason Bobich
    Keymaster

    Wow, both issues solved!

    To reply to 2, if I understand correctly, I don’t think this is a problem. Bootstrap sets a negative left and right margin to rows so nesting like this works just fine.

    I hadn’t noticed that. The Bootstrap grid system can be complicated with all of its little nuances. But now even looking at their live demo, I can see where the purple columns hang 15px out to the left and right of the container of the documentation.

    Could the problem of the shortcode not be solved by setting a flag variable the first time the shortcode is called (and inserting the row div) and then resetting it when you run the shortcode marked as “last”?

    That’s a great idea. If I were output the shortcode through some sort of object, I could keep track of everything happening through each one as a whole. If I’m doing this, I could even keep track of the fractions until they add up to 100% for a marker of when to end. Then, the “last” wouldn’t even be needed at all any more.

    #16474
    Paul Littlewood
    Participant

    And with this solution to 5 columns you have no excuse!
    http://www.wearesicc.com/quick-tips-5-column-layout-with-twitter-bootstrap/
    Demo:
    http://jsfiddle.net/sct3j/

    That’s a great idea. If I were output the shortcode through some sort of object, I could keep track of everything happening through each one as a whole. If I’m doing this, I could even keep track of the fractions until they add up to 100% for a marker of when to end. Then, the “last” wouldn’t even be needed at all any more.

    I think you would still need “last” to finish the row prematurely.

    #16475
    Jason Bobich
    Keymaster

    Thanks for the link. That will save me some time!

    Aw, ok so now I understand what “container-fluid” does — It essentially removes that negative margin on the sides.

    <div class="container-fluid">
       <div class="row">
          ...
       </div>
    </div>

    I think you would still need “last” to finish the row prematurely.

    Good idea. So, it could be optional. The row ends if you get to 100% or user puts “last”.

    #16476
    Jason Bobich
    Keymaster

    Another positive from this I realized is that I can use the push/pull classes to finally just put the left sidebar below the content in the HTML markup and have it work on all sidebar layouts containing a left sidebar.

    #16478
    Jason Bobich
    Keymaster

    I think this could work pretty smoothly —

    .col-*-20 -- 1/5
    .col-*-30 -- 3/10
    .col-*-40 -- 2/5
    .col-*-60 -- 3/5
    .col-*-70 -- 7/10
    .col-*-80 -- 4/5

    Another big problem I have on other themes is that people always want to change the widths of the main content/sidebars, and when they filter the Bootstrap classes, they don’t like the limitation of column widths. So this would give more options there.

    #16480
    Paul Littlewood
    Participant

    Nice, I like the column class names – makes sense. You essentially have 2 grids, a 12 column grid and a 10 column grid. I guess you could use Bootstrap customize to generate the css for the 10 column grid for you. Just turn off everything but the grid system and select 10 columns.

    #16481
    Jason Bobich
    Keymaster

    Yeah that’ll make a good starting point, but then still a lot to change in order to keep it in conjunction with 12-col system.

    … I don’t think anyone will complain about not having enough main column width options for sidebar layouts.

    http://dev.themeblvd.com/tutorial/grid-system/

    #16501
    Paul Littlewood
    Participant

    Awesome, looking forward to seeing the result..

Viewing 12 replies - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.