3 ms·

Any recommendations on how to use grids? I've seen them talked about but I don't actually know what to do with it. How does it help you?

dangrossman 15y ago
You can line up every element in your design without figuring out and writing widths and margins for every element by hand. You just assign one of the provided class names and you automatically get the desired result.
- tstegart 15y ago
  So how do you find what to adjust in the CSS? Just read through it until you figure it out? For example, if I wanted to make four columns instead of three?
  - tptacek 15y ago
    In Haml: .span3 = render :partial => "col1" .span3 = render :partial => "col2" .span3 = render :partial => "col3" .span3 = render :partial => "col4" Or, to do 3-col: .span4 = render :partial => "col1" .span4 = render :partial => "col2" .span4 = render :partial => "col3" Nothing in the partial needs to especially care about the grid (as long as its simple) --- but if it wanted to, it could nest columns.
    - aaronbrethorst 15y ago
      or better yet, you have semantically named elements and assign them column values in your .less file: #sidebar { .makeColumn(4); } #main_pane { .makeColumn(8); } #sidebar = render :partial => 'common/sidebar' #main_pane = yield
  - dangrossman 15y ago
    You don't have to edit the CSS at all. You don't even have to open the file, ever, to use Bootstrap. Just link it in the head of your document like any stylesheet and use the class names from the documentation. Want something on your page to be 3 columns wide? <div class="span3">...</div> Want to make it 4 columns wide instead? <div class="span4">...</div>
    - tstegart 15y ago
      You sirs, are both awesome. I think I need to do more research into all of this and find a good how-to guide because if I didn't know how to do the above, I probably shouldn't be doing it until I know more. I've been down that path before and it leads only to frustration when I realize I know no idea what I'm doing :)
tptacek 15y ago
Your whole web app becomes a giant nesting table, using divs, classes, and CSS instead of HTML table markup. The math on cell sizes is already done for you, and you're not stuck with wonky table markup and styling.
ThomPete 15y ago
You use grids to group and align your content. Basically you need look at your design in order to determine what would make most sense. A very popular choice is to divide it into three equal sizes and then have one of them be the right or left column, while the two others combine to form the other column. So you end up with two columns one for content and one for navigation (typical blog look) Grids can obviously also be much more complicated as those used in photoshop, 3dmax, word or windows/osx. If you want to get really into grids I can recommend probably the best book written about them. Josef Muller Brockman Grid Systems http://www.amazon.com/Systems-Graphic-Systeme-Visuele-Gestaltung/dp/3721201450 http://www.amazon.com/Systems-Graphic-Systeme-Visuele-Gestal...
- tptacek 15y ago
  I have this book and like it, but I doubt it's particularly useful for the typical nerd wiring up a credible looking web application.
  - tstegart 15y ago
    Can you recommend a different book that would be more useful to someone trying to edit Twitter Bootstrap from a beginner's perspective?
    - tptacek 15y ago
      You don't need a book. You just need to build a hello-world application with the Bootstrap CSS/JS code, using one of the layouts they provide as a starting point. Then just use the page of Bootstrap demos as an a la carte menu as you find yourself needing UI features. The Grid Systems book that was recommended earlier is a better bet if you're a typographer or graphic designer, and particularly if you're thinking about designing novel grid systems. But you're not doing that. The Bootstrap grid is trivial and does not require any background in design to use.
      - ThomPete 15y ago
        That doesn't mean one can't educate oneself on what it is though no? I mean I am a designer but still taught myself programming and is generally interested in technology. Understanding design better will make you a better programmer IMHO.

dangrossman 15y ago

You can line up every element in your design without figuring out and writing widths and margins for every element by hand. You just assign one of the provided class names and you automatically get the desired result.

tstegart 15y ago
So how do you find what to adjust in the CSS? Just read through it until you figure it out? For example, if I wanted to make four columns instead of three?
- tptacek 15y ago
  In Haml: .span3 = render :partial => "col1" .span3 = render :partial => "col2" .span3 = render :partial => "col3" .span3 = render :partial => "col4" Or, to do 3-col: .span4 = render :partial => "col1" .span4 = render :partial => "col2" .span4 = render :partial => "col3" Nothing in the partial needs to especially care about the grid (as long as its simple) --- but if it wanted to, it could nest columns.
  - aaronbrethorst 15y ago
    or better yet, you have semantically named elements and assign them column values in your .less file: #sidebar { .makeColumn(4); } #main_pane { .makeColumn(8); } #sidebar = render :partial => 'common/sidebar' #main_pane = yield
- dangrossman 15y ago
  You don't have to edit the CSS at all. You don't even have to open the file, ever, to use Bootstrap. Just link it in the head of your document like any stylesheet and use the class names from the documentation. Want something on your page to be 3 columns wide? <div class="span3">...</div> Want to make it 4 columns wide instead? <div class="span4">...</div>
  - tstegart 15y ago
    You sirs, are both awesome. I think I need to do more research into all of this and find a good how-to guide because if I didn't know how to do the above, I probably shouldn't be doing it until I know more. I've been down that path before and it leads only to frustration when I realize I know no idea what I'm doing :)

tptacek 15y ago

Your whole web app becomes a giant nesting table, using divs, classes, and CSS instead of HTML table markup. The math on cell sizes is already done for you, and you're not stuck with wonky table markup and styling.

ThomPete 15y ago

You use grids to group and align your content. Basically you need look at your design in order to determine what would make most sense. A very popular choice is to divide it into three equal sizes and then have one of them be the right or left column, while the two others combine to form the other column. So you end up with two columns one for content and one for navigation (typical blog look) Grids can obviously also be much more complicated as those used in photoshop, 3dmax, word or windows/osx. If you want to get really into grids I can recommend probably the best book written about them. Josef Muller Brockman Grid Systems http://www.amazon.com/Systems-Graphic-Systeme-Visuele-Gestaltung/dp/3721201450 http://www.amazon.com/Systems-Graphic-Systeme-Visuele-Gestal...

tptacek 15y ago
I have this book and like it, but I doubt it's particularly useful for the typical nerd wiring up a credible looking web application.
- tstegart 15y ago
  Can you recommend a different book that would be more useful to someone trying to edit Twitter Bootstrap from a beginner's perspective?
  - tptacek 15y ago
    You don't need a book. You just need to build a hello-world application with the Bootstrap CSS/JS code, using one of the layouts they provide as a starting point. Then just use the page of Bootstrap demos as an a la carte menu as you find yourself needing UI features. The Grid Systems book that was recommended earlier is a better bet if you're a typographer or graphic designer, and particularly if you're thinking about designing novel grid systems. But you're not doing that. The Bootstrap grid is trivial and does not require any background in design to use.
    - ThomPete 15y ago
      That doesn't mean one can't educate oneself on what it is though no? I mean I am a designer but still taught myself programming and is generally interested in technology. Understanding design better will make you a better programmer IMHO.