I’m here asking some advices about the best usage of fluid responsive grid systems.
Correct me if I’m wrong but it seems it’s now good usage to use fluid % grid systems, that resize all the time so that more future (unknown) resolutions can get a good layout. be(and get rearranged occasionnaly with media queries).
Still, I have the impression a lot of websites using % grid systems still look like fixed responsive systems, the % spans keep the same width until they kick a media queries…so what’s the point using % instead of px exactly ?
So my question, if real fluid % grid system is the best way to go, can you point me to a grid system I could start my projects with ?
Please, if I got i wrong above, correct me
When you use a framework (or grid system) then you are tied into the framework and must design your site with the framework in mind. Your framework knows nothing about your design so instead creates a set of optimal media queries and layout/grid widths and makes changes at these widths rather than at points where your design actually needed it.
Bootstrap can cater for fluid or fixed width by use of the correct classes so you can pick and choose to some degree. In bootstrap’s fixed width layout you get a set of optimal fixed widths and as you narrow your window to approach the fixed width the layout changes to a smaller fixed width. This is not a bad approach but it does mean that some designs will not be full width as the layout will change to the smaller width as your window approaches the current layout width. This method will still collect all devices on the way because at no point is the layout causing a horizontal scrollbar as it changes to a smaller layout before that point is reached and therefore will fit devices as required except that it will not fit them edge to edge in some cases. At smaller widths the layout usually does revert to fluid in bootstrap so it will fit mobiles more snugly.
The fluid width grid in bootstrap will allow the layout to fit more snugly on all devices as it just fills available space and you don’t get this jump in layout size as you open and close the window. However, the fluid grid still will have media queries at set points and it may be that the layout jumps from two columns into one column at 768px width whether the design actually needed to change at that point or not.
If on the other hand you designed the site from scratch then you can set breakpoints at the point in the design where they are needed and not at some arbitrary value that you think might fit a certain device.
Most frameworks are built to cater for all devices but they do mean that you need to embrace the framework and design with that framework in mind.
One thing that is important with any framework is to understand how they work and to have a good understanding of html and css because otherwise you won;t be able to fix things when they go wrong (as they often do).
I’d suggest that you download bootstrap or foundation and just play around with them for a week or so and get a feel for what they do and whether you can work that way or not.
For small sites I don’t see the need for a framework but on large sites with many contributors then frameworks can standardise things and make the work flow easier.
In fact I’m already a long time Bootstrap user, but as time passes, I sometimes find myself spending more time canceling classes properties, or adding lots and lots of classes to my source, that I think maybe it’s the time to find only a good fluid grid system ? what’s your opinion ?
About the fixed/fluid grids, I may be wrong but more and more people tend to say fluid grids should be used because they are peripheral agnostic and better(they can also be ‘stopped’ with max-width properties for large screens)…I never used them right now, partially because I feel more comfortable to stick with px than playing with 37.7777%. But again I want to improve and if it’s the way to go, please tell me.
I used bootstrap 2.2 on a project last year that run into over 100 pages and it worked very well but I found that I very rarely used the grid structure apart from the main container or for a couple of columns. I found it more efficient and easier to use my own css for the inner workings especially as I was working with drawings from psds that did not fit into the percentage columns nicely. The problem I have with grids is that in most cases they need designs that are made for the grid and most of the designs I get to code are not made for the grid. If I was the designer then it would be different as I could plan the layout to fit the grid from the start.
As I said before it only take a couple of seconds to fit 4 items across or six items across using normal css so why the need for a grid to do that?
Where frameworks are useful is in all the other extra functions you get with them as in bootstrap (dropdowns, buttons, labels, hide and show,accordions and so on…) which make life much easier.
About the fixed/fluid grids, I may be wrong but more and more people tend to say fluid grids should be used because they are peripheral agnostic and better(they can also be ‘stopped’ with max-width properties for large screens)…I never used them right now, partially because I feel more comfortable to stick with px than playing with 37.7777%. But again I want to improve and if it’s the way to go, please tell me.
Thanks!
Yes fluid widths are better as a ‘catch all’ but that doesn’t always mean setting up columns using 37.777773% etc as that is not a great approach. Instead I would use the main container a s a max-width (max-width:1170px) which gives you your fluid layout to start with and will fit all screens and won;t grow too large.
If you then want columns inside then usually you have one fixed width column and a fluid content section taking up the rest of the space so again a grid is no needed as you would just let the content section take up the remaining space. If you do need 6 columns across then I would not float 6 columns at 16.666666% as that is too fragile and instead use the display:table-cell properties and let the cells distribute equally across without the need for any widths. A much more robust and browser friendly way to do it.
If you find that you are constantly over-riding classes the you are either using the grid incorrectly or perhaps you have outgrown it as you want more control than it gives you.
