Re: [css-d] Grids: what's all the fuss ?
11 aug 2014 kl. 17:45 skrev Tim Dawson t...@ramasaig.com: Now it's become a 'Grid System' that I should have. Well, a grid framework is obviously a grid system. Your own concocted grid approach is potentially hopefully also a a grid system of sorts. I thought that was evident. My apologies. Worry? I’m not following there. I just acknowledge good design ideas. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Grids: what's all the fuss ?
I've put off learning about CSS grids until very recently, but now a designer has sent me a PSD to code which he says is 'on a 12-column grid' I thought I'd better get up to speed. I've done some reading. I have discovered that I've been using grids for years, with two and three column designs (even four sometimes). I can make them responsive, too. I've just not thought of them as grids. I've read http://css-tricks.com/dont-overthink-it-grids/ (and others). I understand the method. Useful for three and four column layouts, I can see, but I can already do that. But I don't understand what I'd do with an eight or twelve column design (or why I'd need it, really). I must be missing something important and obvious, so I'm seeking enlightenment, please. Regards, Tim Dawson -- Tim Dawson Maolbhuidhe Fionnphort Isle of Mull PA66 6BP 01681 700718 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Grids: what's all the fuss ?
11 aug 2014 kl. 10:02 skrev Tim Dawson t...@ramasaig.com: what I'd do with an eight or twelve column design (or why I'd need it, really). One word: Flexibility with contained order. The best design book for grids IMHO is Ordering Disorder: Grid Principles for Web Design” by Khoi Vinh (2010 Voices That Matter). It’s totally wonderful and in my opinion contains timeless principles. Better than any article on the subject. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Grids: what's all the fuss ?
On 11/08/2014 09:09, Barney Carroll wrote: 12 is a useful number in that it allows division by 2, 3, 4 and 6. It allows for very flexible designs as a result. Yes, we used to have 12 pence to the shilling. It had its uses. I've struggled with the term 'grid', too: it implies a second dimension (height, ie rows as a vertical unit), when it has mostly come to signify only width, with columns as the horizontal unit. I can see I could make up a 'row' with any number of columns provided the fractional total adds to 1. (purely for example: 1/12 + 1/12 + 1/2 + 1/6 +1/6). But if I wanted to do that I could float five divs with appropriate percentage widths without having to say I was using a grid. I'd also have the flexibility to tweak the 'columns' too, I could add a bit to one and take it off another. But then of course it wouldn't line up nicely with the next row. Perhaps that's the point ? I still can't grasp the desire to define all these strange classes with names like 'col-1-4' (for a quarter). Grids seem so popular I feel I must be missing something. Or is it just the current buzz-word ? Regards, Tim Dawson -- Tim Dawson Maolbhuidhe Fionnphort Isle of Mull PA66 6BP 01681 700718 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Grids: what's all the fuss ?
aug 11 2014 11:04 Tim Dawson t...@ramasaig.com: is it just the current buzz-word ? I don’t think so, no. To me that’s like saying ”design is a buzz word. Grids are everywhere in any design profession. Look att architecture: Grids, Cars: Grids, Papers: Grids. Grids are pretty much ubiquitous. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Grids: what's all the fuss ?
On 11/08/2014 09:43, MiB wrote: 11 aug 2014 kl. 10:02 skrev Tim Dawson t...@ramasaig.com: what I'd do with an eight or twelve column design (or why I'd need it, really). One word: Flexibility with contained order. But I think I can already do that with floated divs, which are even more flexible since they can be any % of the container width (must add to 100%, of course). 'Contained order' suggests a bit more, but only that things should line up vertically and not be all over the place ? (with which I'd agree). So I'd have (say) a 60% div and a 40% div (58.33% and 41.67% if I must be in twelfths). I can't see why I need an 8.33% div. In short, I'm still missing the point. The best design book for grids IMHO is Ordering Disorder: Grid Principles for Web Design” by Khoi Vinh (2010 Voices That Matter). It’s totally wonderful and in my opinion contains timeless principles. Better than any article on the subject. Thanks for the reference. Mixed reviews on Amazon, but I respect books from 'Voices that Matter' (and already have several). Regards, Tim Dawson __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Tim Dawson Maolbhuidhe Fionnphort Isle of Mull PA66 6BP 01681 700718 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Grids: what's all the fuss ?
On 11/08/2014 11:12, MiB wrote: aug 11 2014 11:04 Tim Dawson t...@ramasaig.com: is it just the current buzz-word ? I don’t think so, no. To me that’s like saying ”design is a buzz word. Grids are everywhere in any design profession. Look att architecture: Grids, Cars: Grids, Papers: Grids. Grids are pretty much ubiquitous. Your message crossed with a reply I'd just sent to your previous one. From the design point of view OF COURSE we have a grid. I'm not for one moment opposed to laying out web pages tidily. As I said before I've effectively used 'grids' for years without calling them such, in two three and four column layouts. I'm not suddenly proposing to make untidy web sites (I hope). I AM struggling with what I see in tutorials, all that prepared CSS for narrow columns (1/8, 1/12 and other fractions) that I can't see being of more than very occasional use except in multiples, which comes back to the 60/40 (70/30 or whatever) columns of a typical two column layout etc. Particularly confusing are the rows with eight or twelve postage stamp sized boxes of no practical use at all. Is it all just to make the maths easier ? Grid based CSS seems to me to boil down to: Making a load of 'column' class names for any multiple of one twelfth that I might reasonably want to use and putting them into 'rows' in various combinations each totalling 1. If it's significantly more than that I am seriously missing the entire point, and need help. Regards, Tim __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Tim Dawson Maolbhuidhe Fionnphort Isle of Mull PA66 6BP 01681 700718 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Grids: what's all the fuss ?
11 aug 2014 kl. 12:25 skrev Tim Dawson t...@ramasaig.com: One word: Flexibility with contained order. But I think I can already do that with floated divs, which are even more flexible since they can be any % of the container width (must add to 100%, of course). 'Contained order' suggests a bit more, but only that things should line up vertically and not be all over the place ? (with which I'd agree). Line up to the established grid of the designers choice, that’s all. The actual elements and CSS used are completely irrelevant here as long as you achieve the objective. So I'd have (say) a 60% div and a 40% div (58.33% and 41.67% if I must be in twelfths). I can't see why I need an 8.33% div. In short, I'm still missing the point. I’d expect that would know of that you can use content column width divisions for some content and that further down (vertically) you can choose others that still do adhere to the same basic grid. Grids are not the same as grid frameworks. It sounds to me you mixing these concepts up. You don’t need a framework in order to use grids. All you need is the ability to choose and use grids as a concept and a tool. That’s all you need. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Grids: what's all the fuss ?
Some benefits according to Khoo Vinh: • Grids add order, continuity, and harmony to the presentation of information on frequently high-density web pages. • Grids help users predict where to find information from page to page or from behavioral state to behavioral state, which aids in the communication of that information. • Grids make it easier to add new content to a website in a manner consistent with the overall vision of the original website. • Grids facilitate collaboration on the design of a single website without compromising the overall vision of that website.” It’s the last two that may give you an insight in why choosing a specific grid could be very fruitful. (Page 20 of ”Ordering Disorder, Grid Principles for Web Design” (Khoo Vinh 2010) 11 aug 2014 kl. 13:15 skrev Tim Dawson t...@ramasaig.com: On 11/08/2014 11:12, MiB wrote: aug 11 2014 11:04 Tim Dawson t...@ramasaig.com: is it just the current buzz-word ? I don’t think so, no. To me that’s like saying ”design is a buzz word. Grids are everywhere in any design profession. Look att architecture: Grids, Cars: Grids, Papers: Grids. Grids are pretty much ubiquitous. Your message crossed with a reply I'd just sent to your previous one. From the design point of view OF COURSE we have a grid. I'm not for one moment opposed to laying out web pages tidily. As I said before I've effectively used 'grids' for years without calling them such, in two three and four column layouts. I'm not suddenly proposing to make untidy web sites (I hope). I AM struggling with what I see in tutorials, all that prepared CSS for narrow columns (1/8, 1/12 and other fractions) that I can't see being of more than very occasional use except in multiples, which comes back to the 60/40 (70/30 or whatever) columns of a typical two column layout etc. Particularly confusing are the rows with eight or twelve postage stamp sized boxes of no practical use at all. Is it all just to make the maths easier ? Grid based CSS seems to me to boil down to: Making a load of 'column' class names for any multiple of one twelfth that I might reasonably want to use and putting them into 'rows' in various combinations each totalling 1. If it's significantly more than that I am seriously missing the entire point, and need help. Regards, Tim __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Tim Dawson Maolbhuidhe Fionnphort Isle of Mull PA66 6BP 01681 700718 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Grids: what's all the fuss ?
And some basic principles to keep in mind as suggested by Vinh: A grid should focus on problem solving first and aesthetics second. A grid is a component of the user experience The simpler the grid, the more effective it is. …mathematic precision is a key element of good grid design, but mathematical usefulness is just as important.” (Page 44 of ”Ordering Disorder, Grid Principles for Web Design” (Khoo Vinh, 2010)) These above are about using grids as a tool for solving design problems. And also the notion of a column seems straightforward enough, but on a page based on an eight-column grid, a designer might create a layout with only two columns of text” (page 58, same book) So, just because you have 12 columns, you may still choose to combine these together for different content and different vertical regions of the page and use different divisions and combinations for these regions. But all of them being placed on the same grid and therefore maintaining an invisible order and coherency to all content. You also have the connection between font sizes and vertical rhythm that may very well influence the actual chosen grid. 11 aug 2014 kl. 13:27 skrev MiB digital.disc...@gmail.com: Some benefits according to Khoo Vinh: • Grids add order, continuity, and harmony to the presentation of information on frequently high-density web pages. • Grids help users predict where to find information from page to page or from behavioral state to behavioral state, which aids in the communication of that information. • Grids make it easier to add new content to a website in a manner consistent with the overall vision of the original website. • Grids facilitate collaboration on the design of a single website without compromising the overall vision of that website.” It’s the last two that may give you an insight in why choosing a specific grid could be very fruitful. (Page 20 of ”Ordering Disorder, Grid Principles for Web Design” (Khoo Vinh 2010) 11 aug 2014 kl. 13:15 skrev Tim Dawson t...@ramasaig.com: On 11/08/2014 11:12, MiB wrote: aug 11 2014 11:04 Tim Dawson t...@ramasaig.com: is it just the current buzz-word ? I don’t think so, no. To me that’s like saying ”design is a buzz word. Grids are everywhere in any design profession. Look att architecture: Grids, Cars: Grids, Papers: Grids. Grids are pretty much ubiquitous. Your message crossed with a reply I'd just sent to your previous one. From the design point of view OF COURSE we have a grid. I'm not for one moment opposed to laying out web pages tidily. As I said before I've effectively used 'grids' for years without calling them such, in two three and four column layouts. I'm not suddenly proposing to make untidy web sites (I hope). I AM struggling with what I see in tutorials, all that prepared CSS for narrow columns (1/8, 1/12 and other fractions) that I can't see being of more than very occasional use except in multiples, which comes back to the 60/40 (70/30 or whatever) columns of a typical two column layout etc. Particularly confusing are the rows with eight or twelve postage stamp sized boxes of no practical use at all. Is it all just to make the maths easier ? Grid based CSS seems to me to boil down to: Making a load of 'column' class names for any multiple of one twelfth that I might reasonably want to use and putting them into 'rows' in various combinations each totalling 1. If it's significantly more than that I am seriously missing the entire point, and need help. Regards, Tim __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Tim Dawson Maolbhuidhe Fionnphort Isle of Mull PA66 6BP 01681 700718 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Grids: what's all the fuss ?
On 11/08/2014 12:21, MiB wrote: Grids are not the same as grid frameworks. It sounds to me you mixing these concepts up. I think you've put your finger on it here. I asked the wrong question. It should have been 'Grid frameworks: what's all the fuss about'. But I wouldn't have asked that question because I'm not a devotee of frameworks (doubtless to my detriment, but I prefer first principles. I can always copy my own frameworks). You don’t need a framework in order to use grids. All you need is the ability to choose and use grids as a concept and a tool. That’s all you need. I'm an engineer by background (civil by training, mechanical from practice), not a 'designer' (whatever that may mean). My designs tended to be rectilinear so I was a natural user of grids even before I took up web design. It had just never occurred to me to create all those 1/12 size columns in CSS and I wanted to find out more. I think I have now. To misquote J Caesar: I came, I saw, I went away. Thanks for your help. Tim -- Tim Dawson Maolbhuidhe Fionnphort Isle of Mull PA66 6BP 01681 700718 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Grids: what's all the fuss ?
On Mon, Aug 11, 2014 at 8:14 AM, Tim Dawson t...@ramasaig.com wrote: On 11/08/2014 12:21, MiB wrote: Grids are not the same as grid frameworks. It sounds to me you mixing these concepts up. I think you've put your finger on it here. I asked the wrong question. It should have been 'Grid frameworks: what's all the fuss about'. But I wouldn't have asked that question because I'm not a devotee of frameworks (doubtless to my detriment, but I prefer first principles. I can always copy my own frameworks). You don’t need a framework in order to use grids. All you need is the ability to choose and use grids as a concept and a tool. That’s all you need. I'm an engineer by background (civil by training, mechanical from practice), not a 'designer' (whatever that may mean). My designs tended to be rectilinear so I was a natural user of grids even before I took up web design. It had just never occurred to me to create all those 1/12 size columns in CSS and I wanted to find out more. I think I have now. To misquote J Caesar: I came, I saw, I went away. Thanks for your help. Tim I'm more or less in the same boat as you. Though, designers I work with use a grid, but I see a page differently and can recreate it in html with out the need of a million classes for columns. -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Grids: what's all the fuss ?
I've understood grids, yet I haven't. My personal site I don't use grids, I place things how most people view a site, and what they would see first, second and third, if they need the third. If someone came to me and said I have a 4 column, 12 pixel grid, I wouldn't know how to lay it out, well, maybe I would understand from a design POV, not when it comes to the css. To translate the 4 column, 12 pixel grid, from a designer point of view which is of my forte, I would create four columns, each column with 12pixel spacing, sounds right ! Christopher Tim Dawson wrote: Ordering Disorder: Grid Principles for Web Design __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Grids: what's all the fuss ?
aug 11 2014 14:32 Tom Livingston tom...@gmail.com: I'm more or less in the same boat as you. Though, designers I work with use a grid, but I see a page differently and can recreate it in html with out the need of a million classes for columns. Again, this is a feature of (some) Grid Frameworks and not of Grids per se. AS I already have said Grid Frameworks use grids in specific grid systems, but they are not the same as grids. Columns are not the same as grids either, even though you typically peruse columns when you use grids as a tool for solving problems. That you use columns doesn’t mean you are using grids as effectively as you would if you had your own grid system present in your design work. Of course, in some work of some design artists there will be unintended consistent invisible grids to be found, but that would be the exception I think. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Grids: what's all the fuss ?
On 11/08/2014 15:05, MiB wrote: aug 11 2014 14:32 Tom Livingston tom...@gmail.com: I'm more or less in the same boat as you. Though, designers I work with use a grid, but I see a page differently and can recreate it in html with out the need of a million classes for columns. Again, this is a feature of (some) Grid Frameworks and not of Grids per se. AS I already have said Grid Frameworks use grids in specific grid systems, but they are not the same as grids. Columns are not the same as grids either, even though you typically peruse columns when you use grids as a tool for solving problems. That you use columns doesn’t mean you are using grids as effectively as you would if you had your own grid system present in your design work. Of course, in some work of some design artists there will be unintended consistent invisible grids to be found, but that would be the exception I think. I think we're going round in circles here. I originally asked about 'Grids'. I was told (probably rightly) that I should have asked about 'Grid Frameworks'. Now it's become a 'Grid System' that I should have. Never mind, the chief thing is I'm not going to worry about it any more. Tim -- Tim Dawson Maolbhuidhe Fionnphort Isle of Mull PA66 6BP 01681 700718 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Grids: what's all the fuss ?
Hello, A column is a vertical division of space, a row is a horizontal division of space, a grid is a horizontal and vertical division and allocation of available space. You should ask your client which grid system or framework they use and then follow the example. The grid is the basis of the Swiss school of graphic design and is used for good reason, have images line up horizontally, have the baseline of text line up horizontally across columns, and other niceties of layout that make your pages more useable for the visitor. Norman On 2014-08-11, at 9:45 AM, Tim Dawson wrote: On 11/08/2014 15:05, MiB wrote: aug 11 2014 14:32 Tom Livingston tom...@gmail.com: I'm more or less in the same boat as you. Though, designers I work with use a grid, but I see a page differently and can recreate it in html with out the need of a million classes for columns. Again, this is a feature of (some) Grid Frameworks and not of Grids per se. AS I already have said Grid Frameworks use grids in specific grid systems, but they are not the same as grids. Columns are not the same as grids either, even though you typically peruse columns when you use grids as a tool for solving problems. That you use columns doesn’t mean you are using grids as effectively as you would if you had your own grid system present in your design work. Of course, in some work of some design artists there will be unintended consistent invisible grids to be found, but that would be the exception I think. I think we're going round in circles here. I originally asked about 'Grids'. I was told (probably rightly) that I should have asked about 'Grid Frameworks'. Now it's become a 'Grid System' that I should have. Never mind, the chief thing is I'm not going to worry about it any more. Tim -- Tim Dawson Maolbhuidhe Fionnphort Isle of Mull PA66 6BP 01681 700718 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
