A simple CSS framework with just the strictly necessary (grid, reset, flexbox)

Oui, mais ultra léger et ultra facile à prendre en main.

A quoi ça sert ?

• reset.css pour un css clean sur tout navigateur
• base bootstrap pour la grille avec ajout d'une définition xxs en plus de xs sm md lg
• initiation aux bonnes pratiques : la taille du texte est fixée selon celle du navigateur client (normalement 10px) // fixer font-size pour chaque élément désiré grâce à la nouvelle unité "rem" ou 1 rem = 10px et 1.8 rem = 18px (en théorie, la force de l'unité est qu'elle s'adapte au client) // line-height à fixer soi-même selon la police (au moins sur les div et les p) à environ 170% // bannir le pixel
• qqs classes utiles et un code propre facilement personnalisable
• utilisation des dernières technologies CSS3 : flexbox, box-sizing, rem, etc...

/!\ ASTUCE /!
La propriété box-sizing est appliquée à TOUS les éléments

Conséquence : si vous appliquez une border ou un padding à un élément, ça ne change plus sa taille

Par exemple vous avez 4 éléments alignés avec 25% de width et une border de 5px

Normalement le 4ième élément et renvoyé à la ligne, hé bien là tout s'ajuste parfaitement ;)

.container (largeur fixe prédéfinie qui s'adapte à la largeur de l'écran / exemple : écran de + de 1200px largeur à 1170px) .container-fluid (largeur 100%)

• englobe un ensemble de lignes (rows)

.row

• englobe un ensemble d'item (items)
• peut s'étaler sur plusieurs lignes en fonction du nb d'items

.item

• possède une largeur en pourcentage selon la taille de l'écran et le nombre de colonne voulue dans la ligne
• voir doc bootstrap
• largeur d'écran dispo xxs xs sm md lg (on commence toujours par fixer la taille xxs puis on regarde si des classes de taille plus grand existent)
• de 1 à 12 colonnes

.item-content

• parfois il sera intéressant de mettre un item avec une image de fond / couleur et un texte avec padding
• et que le tout soit aligné avec la grille
• pour cela placer un .item-content et ajoutez lui un fond et du contenu

.square + .square-content

• si vous avez besoin de rendre une div carrée et facilement responsive appliquez lui cette classe
• puis si vous voulez ajouter du contenu ajouter une classe à l'intérieur de .square s'appelant .square-content
• attention mettre une div en square c'est bloquer sa hauteur, veillez donc à ce que votre texte ne dépasse pas

.txt-center, .txt-left, .txt-right

• quelques classes pour appliquer rapidement un text-align à un élément

a

• on enlève simplement le soulignement et la couleur bleu

.flex et .center

• envie de centrer parfaitement un élément dans une div (à la fois horizontalement et verticalement) ?
• appliquez la classe .flex à cette div puis .center à l'élément et le tour est joué

.container .row .item .col-xxs-12 .col-xs-3 .item .col-xxs-12 .col-xs-3 .item .col-xxs-12 .col-xs-3 .item .col-xxs-12 .col-xs-3 /row .row .item .col-xxs-12 .item-content /row .row .item .col-xxs-12 .col-xs-4 .square .square-content .item .col-xxs-12 .col-xs-4 .square .square-content .item .col-xxs-12 .col-xs-4 .square .square-content /row /container