Des grilles CSS responsive design toutes simples

Blog du Freelance > La grille CSS Gridism

La grille CSS Gridism

Des grilles CSS responsive design

Posté le 04 septembre 2014 | Rangé dans Ressources

Des grilles CSS responsive design toutes simples

Dans l'univers des ressources web gratuites, il existe les frameworks qui peuvent être très lourds à implanter sur notre site et qui ont des fonctionnalités qui ne nous servent pas forcément... Heureusement, il existe d'autres petites ressources gratuites et utiles autour des frameworks HTML/CSS. Gridism est une petite ressource très légère qui permet de réaliser des grilles en CSS avec la gestion du responsive design en prime. Son fonctionnement est tout simple : on ajoute un lien vers le fichier CSS de Gridism dans notre HTML par la balise link (à mettre dans le head) et on défini la balise viewport dans le head également. A partir de là, il n'y a plus qu'à utiliser les classes définis par gridism à l'intérieur de notre document comme dans le visuel ci-dessous :

Système de grille CSS gridism

L'installation

L'installation de gridism dans notre intégration HML/CSS se fait en 2 étapes. D'abord, on défini la balise link vers notre fichier gridism.css :

<link rel="stylesheet" href="/css/gridism.css">

Et on défini également le viewport dans le head de notre document :

<meta name="viewport" content="width=device-width,initial-scale=1">

Cela permettra au navigateur de comprendre l'échelle à considérer pour le responsive webdesign (je simplifie volontairement)

L'utilisation de Gridism

Maintenant que notre fichier gridism.css est ajouté et que la balise meta viewport est défini, il faut créer une div qui encadrera notre système de grille par la classe .grid. ensuite, à l'intérieur, on utilisera des éléments par les classes proposées dans le fichier gridism.css comme par exemple la classe .one-third pour définir une largeur d'un tiers...

Les options de Gridism

Gridism propose quelques options en plus de son système de grille CSS responsive, comme par exemple l'utilisation de gouttières ou la définition d'une largeur maximale en CSS. Par défaut, le responsive prend le pas à la taille de 568 pixels de large et défini tous les blocs à 100% de large, mais vous pouvez modifier ces règles CSS ou en ajouter d'autres... L'écriture ou la modification est très simple et vous permettra de rajouter des éléments si besoin.

Conseils

Je vous suggère d'ajouter la CSS de Gridism directement dans votre fichier CSS, afin d'éviter de charger un autre élément lors du chargement de page via votre navigateur. Il est important aujourd'hui d'optimiser au mieux le chargement des pages et de tous les éléments qui constituent votre site Internet : CSS, JavaScript, images, typos, ...

Maintenant que vous savez tout sur Gridism, je vous laisse le tester, il est vraiment simple et agréable à utiliser :

Télécharger Gridism

A propos de l'auteur

jacques Danilo, blogueur et freelance

Jacques Danilo
www.pixelcrea.com

Graphiste indépendant depuis 11 ans, photographe et formateur freelance dans le Grand-Ouest. Passionné par le web et les nouvelles technologies, blogueur et entrepreneur, je suis à votre disposition :

Contactez-moi

Sur le blog du freelance

Calendrier des animations e-commerce en 2017
oui

Calendrier e-commerce 2017

L'année 2017 approche à grand pas et il est grand temps de préparer sa stratégie e-commerce. Pour ne rien rater, j'ai préparé une onfographie ...

Prestashop 1.7 : Toutes les nouveautés
oui

Nouveautés Prestashop 1.7

Prestashop, le leader du CMS e-commerce vient (enfin!) de faire une grosse mise à jour, aussi bien sur le fond que sur la forme. Une grosse refonte qui concerne aussi bien la partie ...

10 points à vérifier avant d’acheter un thème Wordpress
oui

acheter un thème Wordpress : 10 points importants

Avant de partir tête baissée sur le thème coup de cœur vu sur une plateforme d’achat (ThemeForest, Elegant Themes, …) sous prétexte que le ...

5 infographies pour comprendre WordPress
oui

5 infographies pour WordPress

WordPress est le CMS le plus utilisé dans le monde, avec près de 25% des sites web dans le monde. Dans tous les domaines, à tout niveau, WordPress est l'outil ...

Vérifiez si votre site est optimisé pour la version mobile
oui

Testez si votre site est mobile-friendly

Un tout nouvel outil SEO pour la compatibilité mobile, le mobile-friendly, vient de sortir sur la plateforme Think With Google. Il s'agit d'une version remasterisée de ...

Partagez cet article sur les réseaux sociaux

Les commentaires

Il n'y a pas encore de commentaires, soyez le premier à réagir
Laissez un commentaire

Laissez un commentaire








* Champs obligatoires

» Retour au blog du freelance