28172 sujets

CSS et mise en forme, CSS3

Knacss et menu horizontale responsive

Bonjour,
J'ai fait un menu horizontale responsive en me servant de knacss. Je voudrais avoir votre opinion au sujet de mon utilisation de Knacss. En clair si je l'ai "bien" utilisé et donc si j'ai optimisé son utilisation.

Donc le menu horizontal 
<nav class="navigation">
               <ul>
                    <li class="inbl pam tiny-wauto ">item 1</li>
                   <li class="inbl pam tiny-wauto ">item 2</li>
                   <li class="inbl pam  tiny-wauto ">item 3</li>
                   <li class=" inbl pam tiny-wauto ">item 4</li>
               </ul>
           </nav>


J'ai cru comprendre que la class "inbl" pour rendre horizontale une liste, était appropriée.

Puis pour que sur smartphone (les écrans tiny) je voulais que les <li> du menu soient verticaux. J'ai donc utilisé la class "tiny-wauto".
A ce stade, ça marche mais j'ai une marge gauche sur le <ul>. Normal elle est par défaut dans Knacss.
Pour la supprimer, j'ai donc dans le fichier knacss-style.css fait cela :

@media (max-width: 320px) {
  .navigation ul {
    margin:0;
        padding: 0;
}
}


Bon j'suis content, ça marche. Mais si donc je poste cela ici, c'est, dans un soucis de bien comprendre Knacss, savoir si c'est la bonne démarche ou s'il y en a une plus rationnelle?

Vous remerciant!
Modifié par lodemars (04 Sep 2015 - 14:52)
Administrateur
Bonjour lodemars,

En toute honnêteté, un framework (KNACSS ou autre) ne va pas être d'une grande utilité pour ce genre de choses. Puisque ta navigation est facilement identifiable et unique, il vaut mieux éviter de lui appliquer plein de classes framework partout.

Mieux veut faire quelque chose comme ça :


<nav class="navigation">
  <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
  </ul>
</nav>




.navigation ul {
  margin:0;
  padding: 0;
  list-style: none;
}
.navigation li {
  display: inline-block;
  padding: 1rem;
}

@media (max-width: 320px) {
  .navigation li {
    display: block;
  }
}


Bonne journée Smiley smile
J'ai du mal m'expliquer je pense.
Je n'utilise pas knacss pour avoir un menu horizontal responsive. J'utilise knacss tout court. Ou du moins j'essaye.
La j'ai pris comme exemple/prétexte ce menu (que, par ailleurs, je sais faire sans framework) pour demander si mon utilisation de knacss était correcte. L'idée est de bien comprendre la "philosophie d'utilisation" du framework.
Modifié par lodemars (06 Sep 2015 - 12:38)
Administrateur
Eh bien dans ce cas je ne sais pas trop quoi répondre.
La "philosophie" de KNACSS serait de s'en servir le moins possible Smiley cligne

Mais sinon oui tu peux faire comme tu as fait.

Bon week-end Smiley smile
Sujet clos
Aller à