SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    819
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question 960 gride not work for larger scale?

    I have a design that goes beyond the 960 grid (1260px in fact). How can I calculate the appropriate column width and gutter to create a fluid/responsive layout?

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Only you can answer that question because you know what type of content structure you have, how wide each column should be. How you calculate the width and margins/padding (gutter) is also entirely up to you. There's no answer to that unless you use someone else's pre-made grid, with a pre-defined set of columns for a pre-defined fixed-width.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    819
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question

    Quote Originally Posted by kohoutek View Post
    Only you can answer that question because you know what type of content structure you have, how wide each column should be. How you calculate the width and margins/padding (gutter) is also entirely up to you. There's no answer to that unless you use someone else's pre-made grid, with a pre-defined set of columns for a pre-defined fixed-width.
    So basically if I was to use Foundation or Bootstrap with custom calculated columns, gutters, etc. then I would be good to go?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,285
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    There's some grid generators here.

    Or you could just make your own as kohoutec mentioned above

  5. #5
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by toad78 View Post
    So basically if I was to use Foundation or Bootstrap with custom calculated columns, gutters, etc. then I would be good to go?

    If you use custom calculated columns, gutters, etc., then you might as well create your own grid or use a generator, as Paul suggested.

    If you use a framework, then you might want to look at the framework's documentation. I don't use any of them, so I really don't know how flexible they are and whether you can adjust columns to fit your own needs without having them break somewhere down the line. I'd be very cautious and avoid the use of a framework, unless you really know it inside out.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,285
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by toad78 View Post
    So basically if I was to use Foundation or Bootstrap with custom calculated columns, gutters, etc. then I would be good to go?
    Bootstrap's responsive grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically. Bootstrap isn't as bad as some people make out but its quite a chunk of code to add unless you have a large site with multiple authors and then it does aid consistency between the group using it. It's all the standard components that make bootstrap useful but you do end up with sites looking much the same and if you want to customise a lot then its probably not the best choice. I have constructed about 100 pages for a client using bootstrap 2 and it wasn't as bad as I thought although the layout took me longer than if I'd coded it from scratch (but al the drop in components were quite useful though and made life easier - jquery plugins/dropdowns/buttons/modals/tooltips/form error handling etc).

    I believe the new Sitepoint design was done using foundation which is supposed to be easier to customise and a lighter footprint that bootstrap.

    The grid aspect of most of these systems is not that hard to code from scratch anyway as you only need a few minutes with normal css to set up a number of columns. The problem with grids is that designs often don't fit into the grid (unless it was designed with a grid in mind) and you spend more time trying to modify the grid to fit the design and in some cases abandoning the grid for certain aspects that are just to hard to manage.

    Designs that are grid friendly can however be done quite quickly but do tend to look the same.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •