Snippet : intégrer une liste de produits

Ce que j’aime bien lorsque je visite des sites, en dehors de l’aspect visuel, c’est l’aspect technique. Ainsi, il m’arrive, après avoir visité un site, de voir comment est intégré quelque chose. Du coup, un coup d’inspecteur d’éléments et parfois, lol omg en particulier sur une liste de produits avec un block container & des childs en display:inline-block, float:left & on gère les margin à base de :nth-child();. Bon, c’est marrant à voir, selectivzr.js fera le travail pour émuler ça sur IE, mais pourquoi faire compliqué & appeler un JS lorsque l’on peut faire du premier coup du cross-browser ?

La solution, la voici :

Ce qui est pas mal avec cette méthode, c’est que si je veux soit augmenter la largeur de la colonne – ou la réduire de +/-320 pixels, soit augmenter/réduire la taille de mes « vignettes », aucun soucis MAGIE.

Voilà, tout simplement. Bon, je parle d’une liste de produits parce que je fais essentiellement du Magento, mais cela s’applique naturellement à une liste d’articles de blogs et j’en passe.

Article simple, code simple, mais pas forcément connu de tous.

Oh and I probably should have written this article in English but I’m afraid that I haven’t enough skill to do it. We’ll see later, so.

PS: astuce visible sur CSSNormalize, allez voir, ça vous changera de vos conneries de « framework » CSS à la con, tiens.