A reflexion about semantic grids
Metal grid on city place by METROgrl
In webdegign, we often hear of grids. Some of us uses CSS frameworks in order to accelerate our productivity when working with them. How can we make semantics websites using those frameworks ?
In this post, I will take the exemple of BlueTrip Css Framework that I regard as one of the best in the market.
BlueTrip grid system
BlueTrip uses a 24 column grid. Here is the css implementation of this grid : 24 column grid from BlueTrip. BlueTrip uses a fixed width grid. We should use em relative units to change it : for instance 800 px = 50 em. This allows more reliability and accessibility.
BlueTrip uses three kinds of classes : span-xx that fixes the length in column of a box, suffix-xx that fixes the number of whitespace columns after a box, and prefix-xx that fixes the number of whitespace columns before a box.
There are also two additional classes : pull-xx and push-xx that shift a box without adding of whitespace.
Update 06/22/2009 :
Following the mood of br1o from css4design, I note than we can find semantism into the continuation of .span-xx. Indeed, we can see it as a marker of importance of content : level 1 (.span-1) to level 24 (.span-24).
End of the update
Well, how could we be semantic with that ?
The css frameworks are not semantic. That’s the point of view of Jonathan Christopher in his famous article : Please do not use CSS frameworks. And that’s mine too !
However, I claim it’s possible to use a CSS framework semantically. How do we work ? First, we make design on Photoshop, Fireworks or the software we prefer. Here we can use a grid to help designing. Next, we create the XHTML structure of the document and its content, without thinking about design. We make it semantic and readable. And finally, we create the CSS files without modifying the XHTML code in order to be as semantic as possible.
The greatest error of CSS framework users is to break this order, to create CSS before XHTML. This is not a semantic and productive way to work. Yes it’s faster, but it is not professional. We are here not only to be fast, but also to be perennial in our work.
We can use CSS frameworks, if we regard them as libraries of useful code. A CSS framework allows not to reinvent the wheel each time we make a design. Unfortunately, aliasing doesn’t exist in CSS. If that had been the case, I would have told you to use the framework and to link functions of the framework with your semantic naming. But it isn’t. And we are forced to use copy and paste. Well, there it’s a less evil.
The good use of a CSS framework is to use only the classes that we need and to rename them in order to make them adapt to our XHTML code.
A little gift for you : my fluid version of BlueTrip CSS Framework
Yes, this is my gift for you ! You can download it here : fluid-version-of-bluetrip-css-framework.zip
But you ? How do you use CSS frameworks ? How do you work with semantic ?
[...] The rest is here: A reflexion about semantic grids [...]
« The greatest error of CSS framework users is to break this order, to create CSS before XHTML »
Je ne suis pas totalement convaincu par la démonstration : je reste sur ma faim quant à l’aspect « sémantique » de ton approche et par ailleurs, la sémantique ne peut se réduire à la place des actions à effectuer dans le flux de production : à partir du moment où l’on connait le pas de la grille etc., pourquoi ne pas commencer par générer le fichier grid.css avec un générateur en ligne quelconque.
En ce qui me concerne, j’aime bien tester différentes déclinaisons d’une charte graphique avec les framework parce que ça va très vite. Ensuite, une fois que les choix sont validés, je refais un layout.css avec les éléments utilisés réellement.
Ensuite, une chose rarement évoquée par ceux qui trouvent que les frameworks ne sont pas sémantiques, c’est que la suite des .span-x peut se comprendre comme l’importance accordées à chaque bloc : du moins important (.span-1) au plus important (.span-24), un peu comme dans la presse écrite où l’on titre en 8 colonnes à Une, etc.
Certes la sémantique ne se réduit pas à la place des actions dans le flux de production. Cependant, ce que je voulais souligner était l’importance selon moi de choisir les sélecteurs CSS en fonction de la sémantique et non en fonction des considérations d’apparence.
Ton approche des .span-x est quand à elle très intéressantes. J’avoue ne pas y avoir pensé… Je la retiens donc comme nuance à mon propos. (j’ai modifié l’article en conséquence)
Yep, c’est d’ailleurs pour ça que je préfère un span-x à un grid-x vu qu’il existe déjà une balise SPAN en HTML
[...] reviens vers vous sur la question des frameworks CSS suite à la lecture de A Reflexion About Semantic Grids qui défend grosso modo le point de vue selon lequel les frameworks ne sont pas sémantiques et [...]
[...] vous souvenez sans doute de cet article où je présentais mes doutes quand à la sémantique des framework CSS ? Eh bien Bruno Bichet de [...]
3bB0wr secrsthufkde, [url=http://avsxabcvxwra.com/]avsxabcvxwra[/url], [link=http://gndlgmlawodi.com/]gndlgmlawodi[/link], http://jbwhthxovzbu.com/
bLl2YK sqxzupkriuhg, [url=http://mbfxpgakjjlx.com/]mbfxpgakjjlx[/url], [link=http://qvykouhqdsds.com/]qvykouhqdsds[/link], http://ugsaoyrlmmzb.com/