28114 sujets

CSS et mise en forme, CSS3

Bonjour.
Dans le fichier _buttons.scss, je rencontre une erreur qui empeche la compilation:
.button {
  &--small {
    padding: $spacer-micro-plus $spacer-small;
    font-size: .8em;
  }

$spacer-micro-plus n est pas declaré dans _variables-sass.scss. A quoi correspond t il ?

Enfin, si j utilise exclusivement la grille ( le css de grillade.scss compilé ), quelle que soit la largeur de mon viewport, la collone ne passe jamais à 100% mais restent sur deux colonnes à l ecran pour une code comme
<div class="sm:grid sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>


Merci pour votre aide.
Administrateur
Hello rooky06,

Comme tu l'as sans doute constaté, KNACSS n'est plus maintenu depuis quasiment 4 ans maintenant : https://www.knacss.com/

Pour répondre à tes questions…

1. En effet $spacer-micro-plus; n'existe pas (ou plus), comme on peut le constater dans le fichier d'origine des variables : https://github.com/alsacreations/KNACSS/blob/master/sass/abstracts/_variables-sass.scss#L42
Je pense qu'on a jamais dû l'utiliser, mea culpa. Le mieux est de remplacer par une variable proche.

2. En recopiant exactement la syntaxe que tu évoques, cela fonctionne bien sur ce Codepen de test : https://codepen.io/raphaelgoetter/pen/QWPmBMb
Es-tu sûr qu'il n'y a pas un autre élément qui vient perturber ta grille ?
Merci pour tes réponses.
Bon j avoue, j ai du lire en diagonale car je n avais pas vu qu il avait été abandonné ...
Je trouve ça dommage car pour les gens comme moi qui ont une joie plus que limitée à faire du css, c etait bien pratique. Bon le plus pratique reste selon moi w3css mais je vais faire se dresser les cheveux sur plus d une tête en ecrivant cela
Pour ce qui est de la grille, je ne comprends pas, je dois avoir un truc qui décorne ailleurs dans mon css, le container surement, je verrais ça.
Administrateur
Hello,

Si tu n'aimes pas mettre les mains dans du CSS, il y a Bootstrap qui fait plutôt bien le job.

Note : je ne sais pas ce qu'est "w3css".

Bonne journée Smiley smile
W3css c est 'A Quality Alternative to Bootstrap' sic.
Moi je dirais un tailwind low cost Smiley cligne pour être plus franc, hyper simplifié et hyper rapide à prendre en main (https://www.w3schools.com/w3css).
Mais d'après les rares commentaires trouvé, pas très "propre"...
Administrateur
Ah oui merci pour l'info.

Je suis toujours très réticent avec ce que propose W3School parce que les gens ont tendance à croire que c'est une initiative du W3C alors que pas du tout.