28112 sujets

CSS et mise en forme, CSS3

[Résolu] [Knacss] Mixin de grille

Bonjour,

J'étudie la documentation de Knacss, mais n'arrive pas à générer correctement un mixin.

La documentation indique...
.grid-container {
    .grid(6);
}

avec comme sortie...
.grid-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: -1em;
}
.grid-container > * {
  flex: 0 0 auto;
  width: 16.66666667%;
  display: block;  /* IE fix */
  border-left: 1em solid transparent;
  background-clip: padding-box !important; /* no background on border */
}


Or, après compilation, j'obtiens uniquement...
.grid-container > * {
  width: calc(100% * 1 / 6 - 1em - .01px);
}
.grid-container > .flex-item-double {
  width: calc(100% * 2 / 6 - 1em - .01px);
}


Je suis certain que tous les fichiers sont inclus, puisque j'ai placé le Mixin à la fin du fichier knacss.less.



Que n'ai-je pas compris ? !

Merci pour votre aide. Smiley biggrin

V.R.W.T.
Administrateur
Bonjour,

En effet j'avoue que le principe est un peu tordu.

Tu as raison en disant que .grid(6); ne produit que le résultat que tu as montré.

Mais la subtilité est que le fichier grid.less produit automatiquement ces classes quoi qu'il arrive :

/* grid container */
[class*="grid-"] {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: -1em;
  /* inline-block fallback for IE9 generation */
  letter-spacing: -0.31em;
  text-rendering: optimizespeed;
}
/* grid childs */
[class*="grid-"] > * {
  flex: 0 0 auto;
  width: calc(100% * 1 / 4 - 1em - .01px);
  margin-left: 1em;
  /* inline-block fallback for IE9 generation */
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal;
  text-rendering: auto;
}


Du coup, ton .grid-container devrait fonctionner de toute façon.

Chez moi, je viens de re-tester et c'est OK.

Tu confirmes ?
@Raphaël. Si je peux me permettre, un truc en marge mais qui me fait réagir à la lecture :
width: calc(100% * 1 / 4 - 1em - .01px);

Suggestion : pourquoi ne pas faire calculer la largeur prévisible par le post processeur ?
100% * 1 / 4

La fonction calc() n'a ensuite plus qu'à enlever le - 1em :
width: calc(25% - 1em);

Je vois deux avantages à cette solution :
1. Le moins important : ça soulage un peu le calcul pour le navigateur (mouais bon...)
2. Mais surtout cela éviterait d'ajouter le correctif du dixième de pixel à enlever ( - .01px), correctif apporté j'imagine en solution à l'arrondissement au chiffre supérieur des calculs fait par IE et qui fait "exploser" la grille. Je me trompe ?

Ma solution perso en visuel : Fluid Grid Layout

Évidement ton avis m'intéresse, dans la mesure ou je cherche à progresser moi aussi... Smiley cligne
Administrateur
@Olivier C : là vite fait et avant de partir en vacances je dirais que ça semble pas bête du tout Smiley cligne

Par contre, je pense que ça ne changera rien au correctif IE.
Le résultat de 100% / 3 via calc() ou via préprocesseur sera toujours mal arrondi par IE et il faudra toujours lui retirer 0.1px à mon avis.

Est-ce que tu veux bien me créer une issue sur Github pour que j'y pense encore à mon retour ? https://github.com/raphaelgoetter/KNACSS/issues

Merci et bonne soirée Smiley smile
Modifié par Raphael (05 Aug 2015 - 17:45)
Raphael a écrit :
Par contre, je pense que ça ne changera rien au correctif IE.
Le résultat de 100% / 3 via calc() ou via préprocesseur sera toujours mal arrondi par IE et il faudra toujours lui retirer 0.1px à mon avis.

Et bien justement, c'est parce que j'avais été confronté à ce problème moi aussi que j'avais pensé à cette solution, et à priori elle réglait le problème.
Raphael a écrit :
Est-ce que tu veux bien me créer une issue sur Github pour que j'y pense encore à mon retour ?

J'ai écris le pense bête ici Smiley cligne

Bonnes vacances !
Modifié par Olivier C (05 Aug 2015 - 19:52)
Sujet clos
Aller à