KNACSS/doc/06-helpers.md

Helpers

Les "Helpers" sont des classes purement visuelles et utilitaires (non "sémantiques"), pas très jolie mais rudement pratiques en production pour alléger vos feuilles de styles.

Attention toutefois ! Ce type de classes conduit fréquemment à des abus au sein de votre code HTML.

Par exemple, Si vous avez 20 images au comportement identique dans la page, ne les affublez pas de classes visuelles multiples telles que img class="mod clearfix left inbl w200p pas mb1 large-mb2 small-mbn" mais optez plutôt pour une classe personnalisée : img class="media" par exemple.

Méthode : Limitez-vous à 4 noms de classes au grand maximum par élément HTML. Si vous pensez qu’il vous en faut davantage, il est temps d’envisager une classe personnalisée, ou de profiter des pré-processeurs CSS.

Les valeurs de helpers peuvent être modifiées au sein du fichier de configuration LESS / Sass.

les Helpers de largeur

Largeurs fluides (en pourcentage) :

.w10 {
  width: 10%;
}
.w20 {
  width: 20%;
}
.w25 {
  width: 25%;
}
...
.w100 {
  width: 100%;
}

Largeurs fixes (en pixel) :

.w50p {
  width: 50px;
}
.w100p {
  width: 100px;
}
.w150p {
  width: 150px;
}
...
.w960p {
  width: 960px;
}
.w1140p {
  width: 1140px;
}

Largeurs spéciales :

.mw960p {
  max-width: 960px;
}
.mw1140p {
  max-width: 1140px;
}
.wauto {
  width: auto;
}

les Helpers d'espacement

Les herpers d'espacement comportent des classes dédiées aux marges externes (margin) et aux marges internes (padding).

Leur nommage est assez intuitif :

• p,m = padding, margin
• a,t,r,b,l = all, top, right, bottom,left
• s,m,l,n (ou 0) = small, medium, large, none (ou 0)

Exemples :

• .prs signifie "padding-right small" (où "small" est défini dans votre fichier de configuration, par défaut 5px)
• .man signifie "margin all none" (fonctionne aussi avec la syntaxe .ma0)

les marges externes (margin)

.man,
.ma0 {
  margin: 0;
}
.mas {
  margin: 10px;
}
.mam {
  margin: 20px;
}
.mal {
  margin: 40px;
}
.mtn,
.mt0 {
  margin-top: 0;
}
.mts {
  margin-top: 10px;
}
.mtm {
  margin-top: 20px;
}
.mtl {
  margin-top: 40px;
}
...

les marges internes (padding)

.ptn,
.pt0 {
  padding-top: 0;
}
.pts {
  padding-top: 10px;
}
.ptm {
  padding-top: 20px;
}
.ptl {
  padding-top: 40px;
}
.prn,
.pr0 {
  padding-right: 0;
}
.prs {
  padding-right: 10px;
}
.prm {
  padding-right: 20px;
}
.prl {
  padding-right: 40px;
}
...