[Résolu] KNACSS et Grille

Bonjour,
Je viens de découvrir Knacss, cela semble intéressant, mais j'ai quelques problèmes de compréhension.

J'ai un ancien site que je souhaite rendre responsive.

Code ancien :

<div class="maincontent">
<div class="memleft">blabla</div>
<div class="memcnter">blabla</div>
<div class="memright">blabla</div>
</div>

.maincontent{width:1024px; margin:0px auto}
.maincontent .memcnter{width:330px; float:left; background:#1e1516; margin-left:14px; border:1px solid #1e1516; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; margin-top:10px; color:#FFF}
.maincontent .memleft{width:330px; float:left; background:#1e1516; border:1px solid #1e1516; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; margin-top:10px; color:#FFF}
.maincontent .memrightt{width:330px; float:right; background:#1e1516; border:1px solid #1e1516; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; margin-top:10px; color:#FFF}

Pour le rendre responsible j'ai ajouter le fichier Knacss-unminified.css
Nouveau code

<div class="grid-3-small-2-tiny-1">
<div class="w330p memleft">blabla</div>
<div class="w330p memcnter">blabla</div>
<div class="w330p memright">blabla</div>
</div>

.memcnter{width:330px; float:left; background:#1e1516; margin-left:14px; border:1px solid #1e1516; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; margin-top:10px; color:#FFF}
.memleft{width:330px; float:left; background:#1e1516; border:1px solid #1e1516; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; margin-top:10px; color:#FFF}
.memrightt{width:330px; float:right; background:#1e1516; border:1px solid #1e1516; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; margin-top:10px; color:#FFF}

A partir de là, la page devient responsive, c'est un bon début !

Mon problème c'est que les cellules de ma grille ne prennent pas en compte les styles memleft,memcnter,memright qui étaient définie, de plus je voulais que la taille des cellules soient fixe (330px), mais cela ne fonctionne pas comme je le souhaite.

Pouvez vous m'aider à comprendre

J'ai trouvé une solution pour fixer la taille des cellules de ma grille à 330px.
J'ai modifié la valeur min-width dans le fichier Knacss-unminified

/* grid childs */
[class*="grid-"] > * {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: calc(100% * 1 / 4 - 2rem - .01px);
  min-width: 330px;
  margin-left: 2rem;
  /* inline-block fallback for IE9 generation */
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal;
}

Le problème c'est quand je vais devoir créer une nouvelle grille dans le même site, la taille sera fixer par défaut à 330px minimum.
C'est pas top comme solution !
Quelqu'un a mieux ?
Est il possible de surcharger le class grid ?

Bonjour,

Si ton souhait est de construire une grille dont les colonnes sont de largeur fixées, je ne suis pas sûr que KNACSS soit la bonne solution. En effet, KNACSS est prévu pour être fluide autant que possible, voire responsive.

Voici un extrait de la documentation de KNACSS (https://github.com/alsacreations/KNACSS/blob/master/doc/03-grilles.md ) :

KNACSS a écrit :
Une grille "KNACSS" a les caractéristiques globales suivantes :

- Les largeurs des colonnes sont fluides (définies en pourcentage du parent),
- Une gouttière sépare chaque colonne (la valeur de cette gouttière est modifiable dans les fichiers less/knacss.less ou sass/knacss.scss),
- Par défaut, une grille n'est pas responsive mais il est très simple d'activer cette fonctionnalité,
- La technologie employée est CSS3 Flexbox.

Il est possible de modifier les comportements et valeurs du CSS par défaut, mais dans ce cas, il faut passer par les fichiers source LESS / Sass
Modifié par Raphael (24 Apr 2016 - 11:54)

Bonjour,

L'idée est d'avoir une application responsive contrôlée.
Si tu as une grille de 9 cellules (Fiche client) 3x3 avec une valeur (dans mon cas de) min-width=300px,
L'ensemble des fiches sont lisible, l'ensemble des boutons d'actions sont bien positionnés quelque soit la taille de l'écran.
en 1920 x .. j'ai une grille de 3x3 (plein écran)
en 1024 x .. j'ai une grille de 3x3 (plein écran)
en 980 x ... j'ai une grille de 2x5 (alignée à gauche)
en 600 x ... j'ai une grille de 1x9 (alignée à gauche)
en 360 x ... j'ai une grille de 1x9

Donc oui, j'y vois un intèrêt, en modifiant simplement une ligne à mon code :

<div class="maincontent">

devient

<div class="grid-3-small-2-tiny-1">

et en modifiant le min-width dans la classe grid.
Une grosse partie du front office devient responsive (controlée), mais j'aimerais que cela soit plus propre, d'ou ma question de surcharge, par exemple pouvoir créer une classe "magrille" qui surcharge la classe grid-3-small-2-tiny-1, pour définir la valeur min-width.

Mais je ne comprends pas pourquoi mes styles des "cellules" ne sont pas prit en compte .... je cherche !

C'est bon j'ai ma solution