KNACSS est une feuille de style CSS minimaliste, responsive et extensible pour débuter une intégration HTML / CSS --> http://knacss.com/
KNACSS est né d'un constat que nous faisons quotidiennement dans notre agence web :
- La plupart des frameworks CSS sont de grosses usines à gaz que l'on n'exploite très partiellement (environ 10% à 20% au mieux)
- Ils nécessitent quasi systématiquement qu'on redéfinisse à sa sauce la moitié des styles
- Ils ne sont pas négligeables en terme de poids de fichiers
KNACSS n'est pas non-plus un "reset" CSS classique tels que ceux que l'on trouve chez Eric Meyer, Yahoo UI ou Normalizr, que l'on estime trop agressifs et qui nécessitent que l'on redéfinisse chaque élément par la suite. Il se charge du minimum pour éviter les différences d'affichage flagrantes.
Chez Alsacréations, et par expérience, on préfère de loin un socle de base minimaliste qui convienne tel quel à tous les nouveaux projets, mais qui puisse être progressivement enrichi. C'est le cas de KNACSS.
8. Oui mais quel intérêt ?
Les autres font beaucoup plus (et c'est vrai)
Qu'est ce que ça va m'apporter ?
9. Oui mais quel intérêt ?
Un concentré de bonnes pratiques
à chaque ligne de code !
●
Une convention de nommage éprouvée
●
Des classes réutilisables à chaque projet
●
Un reset « soft » et intelligent
●
Des tailles de polices fluides
●
Compatible tous navigateurs (IE6 et IE7 aussi)
●
Un modèle de boîte aux calculs intuitifs
●
Des positionnements simple à mettre en œuvre
●
Des grilles et gouttières, Etc.
10. KNACSS, en résumé
●
Feuille de style de départ
minimaliste, concentrée extensible et réutilisable
●
Tout sauf une usine à gaz
donc incomplète : à vous de rajouter vos briques
●
Compatible « Responsive Web Design »
des briques déjà en place et fonctionnelles
●
Compatible Pré-Processeurs
adaptable à LESS, SASS / Compass, etc.
une version LESS est d'ailleurs téléchargeable !
15. Tailles de polices
●
Accessibilité : tailles de police fluide (em)
html, paragraphes et niveaux de titres
●
Calculs simplifiés
taille de 62.5% pour <html>, soit 10px.
body =base*10
ex : 2.4em = équivalent 24px
●
« rem » ready
L'unité rem (CSS3) peut s'appliquer facilement sur KNACSS
18. Alignements
Éviter les classes .left et .right sur
les blocs principaux de structure
(header, sidebar, main, navigation, etc.)
●
Parce qu'ils peuvent être déplacés lors d'un redesign
●
Parce qu'ils peuvent être disposés autrement sur
smartphones ou tablettes
●
Parce que .left n'a aucun sens si la sidebar est à
droite sur tablette
19. Largeurs et marges
Valeurs fixes et fluides
●
.w10, .w20, .w30, etc.
largeurs en %, ex : width : 10 %
●
.w50p, .w100p, etc.
largeurs en pixels, ex : width : 50px
●
.mts, .mrs, .mbs, .mls, etc.
marges (« small »
+ top / right / bottom / left)
23. Modèle de boîte KNACSS
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
(avec polyfill pour IE6 / IE7)
24. Les blocs
.mod (= module) : le bloc par défaut
●
Doit pouvoir contenir les flottants
●
Ne doit pas s'écouler autour d'un flottant
●
Fluide mais peut être dimensionné, et placé à côté
d'autres .mod
●
Peut être positionné avec .left ou .right
45. Positionnement
Grilles de largeurs inégales
●
.grid2-1
répartition à 2/3 et 1/3 avec gouttière
●
.grid1-2
répartition à 1/3 et 2/3 avec gouttière
●
.grid1-3
répartition à 1/4 et 3/4 avec gouttière
●
.grid3-1
répartition à 3/4 et 1/4 avec gouttière
51. Sémantique ?
Alignement
= left, center,...
<h2 class="mod left mtn">
<section class="line center m-reset">
<nav class="row mbs">
Fonction
= « sémantique »
Affinages
marges, padding
Identité
= mod, line,...
52. Responsive Web Design
Automatiquement adapté aux
smartphones et tablettes
●
.mod, .col et autres blocs
largeur auto sur petit écran
annulation des flottements
affichage vertical forcé
annulation des marges et padding
●
Toutes classes de largeurs
telles que .w900, etc.
largeur auto sur petit écran
57. Des ressources ailleurs ?
Sur le Web
●
Our Best Practises are killing us (conf PDF)
●
CSSLint rules (FAQ)
●
Solid CSS (article)
●
What is BEM ? « Block, Element, Modifier » (article)
●
Big CSS (conf PDF)
●
Intégrateur, entre le marteau et l'enclume (PDF)
59. Bonus Track
Pourquoi « KNACSS » ?
●
Parce que c'est rigolo
●
Parce que knacss.com, c'est court
●
Parce que « knacks » désigne des saucisses de
Strasbourg
●
Parce que