Bonjour,
Cela faisait assez longtemps que je n'avais pas écrit d'article sur le site. Aujourd'hui, je vais vous présentez un système de grille CSS utilisant la puissance de l'HTML5 et du CSS3 ainsi que de ses nouveaux sélecteurs.
1. Une grille CSS c'est quoi ?
Les grilles sont de plus en plus utilisées dans le domaine du web. Elles permettent de mettre en place un système de présentation clair et modulable tout en gardant une cohérence dans celle-ci. La taille de celle-ci varie selon le site ou l'envie. Pour ce test nous utiliserons la plus commune: celle de 960px.
2. Et si on passait à SCSS ?
Le SCSS (ou SASS) est un langage qui nécessite compilation pour devenir du CSS. Il permet, avec une syntaxe similaire, d'ajouter des fonctions étendues comme le nesting, l'interpolation, des fonctions de modification des couleurs et plein d'autres choses. Je vous invite à consulter leur site SITEHERE pour plus d'informations.
3. Le code et son utilisation:
4. Example en Live:
Préférez un navigateur moderne comme Chrome ou Safari !
http://sassmeister.com/gist/8236510
5. Dernier petit mot:
Il s'agit d'un exemple très simple, il faut bien sur rajouter les préfixe pour que ce soit valide entre les différents navigateurs. J'ai écrit ceci pour vous montrer qu'il existe des solutions simple à la portée de tous grâce aux nouvelles fonctionnalités parfois oubliées de CSS3 !
6. Mise-à-jour:
- Changement des selecteurs, auto-nesting de la grille.
Cela faisait assez longtemps que je n'avais pas écrit d'article sur le site. Aujourd'hui, je vais vous présentez un système de grille CSS utilisant la puissance de l'HTML5 et du CSS3 ainsi que de ses nouveaux sélecteurs.
1. Une grille CSS c'est quoi ?
Les grilles sont de plus en plus utilisées dans le domaine du web. Elles permettent de mettre en place un système de présentation clair et modulable tout en gardant une cohérence dans celle-ci. La taille de celle-ci varie selon le site ou l'envie. Pour ce test nous utiliserons la plus commune: celle de 960px.
2. Et si on passait à SCSS ?
Le SCSS (ou SASS) est un langage qui nécessite compilation pour devenir du CSS. Il permet, avec une syntaxe similaire, d'ajouter des fonctions étendues comme le nesting, l'interpolation, des fonctions de modification des couleurs et plein d'autres choses. Je vous invite à consulter leur site SITEHERE pour plus d'informations.
3. Le code et son utilisation:
// Défini la taille de notre grille.
$grid-width: 960px;
// Flex-Grid.
[grid-role~="row"] {
display: flex; margin-left: auto; margin-right: auto; width: $grid-width;
& > & {
[grid-role~="column"]:first-child { margin-left: 0; }
[grid-role~="column"]:last-child { margin-right: 0; }
}
& > [grid-role~="column"] {
margin-left: 10px; margin-right: 10px;
@for $i from 1 through 12 { &[column-size="#{$i}"]{ flex: $i; }}
}
}<div grid-role="row">
<div grid-role="column" column-size="4">Collonne de 4 rangées</div>
<div grid-role="column row" column-size="6">
<div grid-role="column" column-size="2">2:Start</div>
<div grid-role="column" column-size="2">2</div>
<div grid-role="column" column-size="2">2:End</div>
</div>
<div grid-role="column" column-size="2">2 rangées</div>
</div>4. Example en Live:
Préférez un navigateur moderne comme Chrome ou Safari !
http://sassmeister.com/gist/8236510
5. Dernier petit mot:
Il s'agit d'un exemple très simple, il faut bien sur rajouter les préfixe pour que ce soit valide entre les différents navigateurs. J'ai écrit ceci pour vous montrer qu'il existe des solutions simple à la portée de tous grâce aux nouvelles fonctionnalités parfois oubliées de CSS3 !
6. Mise-à-jour:
- Changement des selecteurs, auto-nesting de la grille.
