Forum Moderators: not2easy

Message Too Old, No Replies

Use Grid Frameworks for Responsive Design?

Moving to Responsive Design

         

graeme_p

4:47 pm on May 4, 2016 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I have a dislike of grid systems because they break separate of style and content that CSS is supposed to provide - you give things classes like "two-thirds column" instead of something like "main-content"

( split from [webmasterworld.com...] )

[edited by: not2easy at 4:12 pm (utc) on May 5, 2016]
[edit reason] Deserved its own Discussion [/edit]

Andy Langton

5:23 pm on May 4, 2016 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I have a dislike of grid systems because they break separate of style and content that CSS is supposed to provide


I'm not sure I follow. If you use HTML5 sections, for instance, you could have <article class="3-columns"> or <nav class="1-column">. I'm not sure that CSS classes themselves are intended to convey any structural meaning - that's a job for HTML. You can, of course, adapt class names if you prefer a different naming system.

graeme_p

5:11 am on May 5, 2016 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



@AndyLangton css class names are supposed to convey semantic information:

[w3.org...]

It also makes it a lot easier to understand and modify an existing design if CSS class names make sense.

Class names and ids are part of the HTML that happens to be used to apply CSS, but is also used from Javascript, for fragment identifiers, and by spiders.

Also consider how, for example, you change the width of a column using a framework. You edit the HTML to change the class names. Without a framework you edit the CSS.

graeme_p

10:02 am on May 5, 2016 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Actually, I need to correct myself and you. They are not "css class names" - they are HTML class attributes (e.g. class="myclass") that can be used in CSS selectors (e,g, .myclass). The same goes for ids, tags, etc.

graeme_p

11:05 am on May 5, 2016 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Yes and no - I think everyone should think about it and it is mostly and an issue for responsive design, so why not warn someone of this when they start responsive design - in short frameworks make it easy, but they they have shortcomings that matter.

If an admin feels it is off topic perhaps this can be split into a separate thread?

not2easy

4:16 pm on May 5, 2016 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



I think that the question on the pros and cons of using a grid layout to achieve device responsive sites is a good idea. ;)

martinibuster

6:51 pm on May 5, 2016 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



This is a good topic for discussion.

A much better way to name your classes is with the role a certain HTML element...


The W3c advises against using naming conventions that describe a styling effect but it seems to me that how many columns a section has is information about the structure itself and not a style effect applied to the structure. So doesn't that conform to the idea of giving the class a useful name that describes the structure itself (16 columns) instead of naming it according to the effect applied to the structure?

Giving the class a name that describes the structure is useful information and I believe that calling the class "16 columns" conforms to the W3C tip about giving classes names that describe the structure.

graeme_p

8:00 am on May 7, 2016 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



The w3c ways semantic information (vs presentational) not structural vs styling.

Suppose you have a a page (or section) that is divided into two columns - one containing the main content, and the other a side bar. You then decide to make the main content narrower and the side bar a bit wider, but you keep the content the same. This is a purely presentational change, but using a grid requires you to edit the CSS to change the classes.

It also makes it harder to understand and maintain a design. For example suppose you have a product page with a summary description, features, etc. All these section are the same width. Using a grid you apply the same class to all of them. Without a grid you give them class names like .summary, .features, .requirements etc. Suppose you initially make them all full width, but after a while you decide make three columns. With a grid framework you need to change the HTML for each, and move them from separate tows to a single row. Without a grid you may need to add a single wrapper element, and you can do the rest with CSS.

The second example is a simplified version of a design I have worked with in the last few days.