28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Je viens de prendre connaissance du Framework KNACSS, et il semble très utile et très performant. Aussi, je vous remercie d'avoir développé cet outil.

D'après ce que j'ai compris, l'on peut aller jusqu'à 12 colonnes en grid design.

Je suis tombé sur une image représentant les proportions de la suite de Fibonnacci, à l'adresse suivante :

Ici

Par contre, en tout cela fait 13 colonnes (8+5). Est-il possible de la réaliser avec KNACSS?

Je vous remercie de votre réponse!

Bat
Administrateur
Hello et merci pour les compliments Smiley smile

Comme cela est évoqué dans la Documentation de Grillade (la grille de KNACSS) : "Grillade n'est pas un "framework", il s'agit simplement de fonctionnalités basiques pour réaliser des grilles simples et courantes (et responsive).".

En gros, rien ne t'empêche de customiser la grille de plusieurs manières :

1- En modifiant le nombre de colonnes possibles directement dans le fichier d'origine Sass : https://github.com/alsacreations/KNACSS/blob/master/sass/_library/grillade-grid.scss#L59

2- D'utiliser le mixin de grille déjà existant et qui te permet par exemple de générer une grille de 13 colonnes avec une gouttière de 10px qui se déclenche à partir de 480px : .ingrid { @include grid(13, 10px, 480px);

3- De réaliser ton propre gabarit en utilisant la spécification Grid Layout, ce qui me semble être le meilleur choix au final : https://www.alsacreations.com/article/lire/1388-css3-grid-layout.html

Bon courage !
Hello,

Pas de quoi, cela mérite grands compliments!

Je te remercie pour ces précisions.

J'ai réussi à compiler le fichier sass, avec 13 colonnes; par contre, à part le nombre de colonnes, je n'ai rien changé d'autre. Puis-je te demander ce que les webmasters modifient surtout, dans ce fichier, avant de le compiler? S'agit-il des couleurs?

Si j'utilise l'option n°2 (utiliser le mixin de grille déjà existant ), dans quel fichier devrais-je ajouter .ingrid { @include grid(13, 10px, 480px); ?

J'aurais une dernière question: est-il possible d'avoir une gouttière uniquement sur la droite d'un bloc? Has-gutter sera appliquée à tous les blocs, et je voudrais faire cela:

[ ][ ] [ ]
div|div|gutter|div

Avec has-gutter cela me donne le résultat suivant:

[ ] [ ] [ ]
div|gutter|div|gutter|div

En tous cas, c'est très performant, merci beaucoup!

Merci pour ta réponse,

Bat
Administrateur
bat1 a écrit :
Puis-je te demander ce que les webmasters modifient surtout, dans ce fichier, avant de le compiler? S'agit-il des couleurs?

Généralement il s'agit du fichier de variables en effet : https://github.com/alsacreations/KNACSS/tree/master/sass/_config

En ce qui nous concerne, on adapte toutes les valeurs lors d'un nouveau projet.

bat1 a écrit :
Si j'utilise l'option n°2 (utiliser le mixin de grille déjà existant ), dans quel fichier devrais-je ajouter .ingrid { @include grid(13, 10px, 480px); ?

Dans ton fichier .scss de développement.
Cela ne fonctionne que si tu intègre en .scss et non en .css vanilla.

bat1 a écrit :
J'aurais une dernière question: est-il possible d'avoir une gouttière uniquement sur la droite d'un bloc? Has-gutter sera appliquée à tous les blocs, et je voudrais faire cela:

A priori ce n'est pas possible nativement, il te faudra écrire un margin-right à la main.