28172 sujets

CSS et mise en forme, CSS3

Bonjour a tous,

Je découvre un peu Knacss et sa grillade.
j'ai une div qui a comme classe
grid-8-small-4 
et ca fonctionne bien, mais je voudrais que pour 1024px (medium?) il y ai 6 div sur une ligne et
 grid-8-medium-6-small-4
ne fait pas le taf...

Merci d'avance
Modifié par sebastienserre (17 Mar 2017 - 17:58)
Administrateur
Bonjour et bienvenue, Smiley smile

Il n'y a pas de medium-N dans grillade ; ce n'est pas prévu de base.
Il y a la variable $medium qui est un point de rupture / breakpoint en-deça duquel -small-N s'applique s'il existe (entre $tiny et $medium plus exactement) et au-delà duquel grid-N s'applique.

Tu peux l'ajouter si tu sais modifier https://github.com/alsacreations/KNACSS/blob/master/sass/grids/_grillade.scss#L117-132 :
- il te faut définir un nouveau point de rupture plus grand que $medium
- copier-coller le code surligné ci-dessus AVANT la ligne 117 (super important)
- remplacer la condition de la MQ "entre $tiny + 1 et $medium" par "entre $tiny + 1 et $ton-bp"
- remplacer le sélecteur d'attribut *="small-" par le nom que tu veux. Je te déconseille "medium" parce que c'est déjà une variable représentant une largeur alors que tu veux créer un intervalle entre 2 largeurs ($tiny + 1 et $ton-bp) m'enfin j'ai pas de mot-clé magique non plus Smiley langue
- compiler
- gzipper grillade avant / après ta modif et constater l'augmentation du poids de ta CSS Smiley cligne

edit :
maintenant tu as :
- grid-N qui s'applique au-delà de $tiny + 1
- mais si medium-N figure dans le nom de la classe, alors ça s'applique entre $tiny + 1 et $ton-bp
- mais si small-N figure dans le nom de la classe, alors ça s'applique entre $tiny + 1 et $medium
Tu peux avoir grid-N avec ou sans -medium-N avec ou sans -small-N et s'il y a -small-N, tu veux pas que -medium-N s'applique entre $tiny + 1 et $medium d'où l'importance d'insérer ton c/c avant la dernière fonction, entre les lignes 116 et 117 Smiley smile
Modifié par Felipe (17 Mar 2017 - 19:29)