Des CSS efficaces avec KNACSS

KNACSS
Oui d'accord, … mais encore ?
Des CSS efficaces avec « KNACSS »
Raphaël Goetter
Alsacréations

KNACSS ?
●
Un framework CSS ?
Pas complètement
●
Un reset CSS ?
Pas complètement
●
Un « Boilerplate » ?
Ouais non, pas complètement
…

C'est quoi finalement ?
Un peu de tout ça à la fois, mais surtout...
léger

Léger ?
●
Twitter Bootstrap
base : 2700 lignes / 59ko (51ko pour min.css)
●
960.gs
environ 25ko (plusieurs fichiers), aberrations
(html,body {height: 100%;}) WTF !
●
Yahoo UI
karcher : tous les éléments à font-size 100 %, margin
0 et padding 0 !

Ah ouais quand-même...
Blueprint
(extrait)

OK j'ai compris !
Twitter
Bootstrap
(extrait)

KNACSS = mini
KNACSS.css (5ko non minifié)

Oui mais quel intérêt ?
Les autres font beaucoup plus (et c'est vrai)
Qu'est ce que ça va m'apporter ?

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.

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 !

Les noms de classes
●
Je suis un titre niv.2
●
Je suis un caption
●
Je suis un titre 1 de la Home
●
Je suis un titre 3 de .sidebar
●
Je suis une <legend> ©
22px + color purple + font-family comic sans

Les noms de classes
●
●
Je suis un caption
●
●
●
<h2>
<caption>
<h1>
<h3>
<legend>

Les noms de classes
●
●
Je suis un caption
●
●
●
<h2 class="h2-like">
<caption class="h2-like">
<legend class="h2-like">
réutilisable

Un reset « soft »
html, body, label {
margin: 0;
padding: 0;
}
ul, ol { padding-left: 2em; }
code, pre, samp { white-space:
pre-wrap;
font-family: consolas, 'DejaVu
Sans Mono', courier, monospace;
}
...

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

Tailles de polices
html {font-size: 62.5%;}
body {
font-size: 1.4em; /* equiv 14px
*/
line-height: 1.5;
}
p, ul, ol, dl, blockquote, pre,
td, th, label, textarea {
font-size: 1em; /* equiv 14px */
line-height: 1.5;}

Alignements
.left {float: left;}
.right {float: right;}
.center {margin: auto}
.txtleft {text-align: left}
.txtright {text-align: right}
.txtcenter {text-align: center}

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

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)

Modèle de boîte
Modèle de boîte par défaut :
largeur = width + paddings + borders
width : 100px
Box 1
width : 100px ;
padding : 10px ;
Box 2

Modèle de boîte
Modèle de boîte par défaut :
largeur = width + paddings + borders
width : 25 %;
padding : 10px ;
Box 1
width : 25 %;
border : 1px ;
Box 2
width : 25 %;
padding-left : 2em ;
Box 3
? ? ?

Modèle de boîte
Modèle de boîte par défaut CSS3 : box-sizing
largeur = width
width : 25 %;
padding : 10px ;
Box 1
width : 25 %;
border : 1px ;
Box 2
width : 25 %;
padding-left : 2em ;
Box 3

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)

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

Les blocs
.mod : le bloc par défaut
.mod overflow : hidden
clearfix

Les blocs
.mod : le bloc par défaut
.mod overflow : hidden
clearfix
<div class="mod">, <aside class="mod">, <p class="mod">, etc.

Les blocs
.mod
float left Bloc de contenu,
Lorem Elsass ipsum
Lorem Elsass ipsum choucroute gal !

Les blocs
.mod
float left Bloc de contenu,
Lorem Elsass ipsum
Lorem Elsass ipsum
choucroute gal !
.mod

Les lignes
.line : empilement vertical
●
Doit pouvoir contenir les flottants
●
Doit se placer sous les flottants précédents

Les lignes
.line
clear : both
clearfix

Les lignes
Block 1float left

Les lignes
.line
clear : both
clearfix
float left

Contenir les flottants
Les flottants, ça dépasse !
Box 1 Box 2 Box 3float left float left float left

Contenir les flottants
.mod, ou .clearfix, ou .line
Box 1 Box 2 Box 3float left float left float left

Positionnement
Positionnement classique : float
●
.left
pour aligner à gauche
●
.right
pour aligner à droite
Fastoche !

Positionnement
.left et tailles

Positionnement
Positionnement alternatif : table
●
.row
désigne une rangée
●
.col
désigne une « colonne »
J'adore !

Positionnement
.row
clear : both
clearfix
display : table ;
table-layout : fixed ;
width : 100% ;

Positionnement
.col
display : table-cell ;
vertical-align : top ;
Clearfix
Hauteurs de frères identiques
Alignement vertical aisé
Répartition sur la largeur du parent

Positionnement
.row et .col pour les tableaux CSS

Positionnement
Grilles et gouttières
●
.grid2
grille de 2 colonnes séparés par une gouttière
●
.grid3... .grid6
3, 4, 5 ou 6 colonnes identiques
Enfantin !

Positionnement
Parent en .grid2

Positionnement
Parent en .grid3

Positionnement
Grilles de largeurs inégales
●
.grid2-1
répartition à 2/3 et 1/3 avec gouttière
●
.grid1-2
●
.grid1-3
●
.grid3-1

Positionnement
Parent en .grid2-1

Positionnement
Parent en .grid1-3

Positionnement
Grilles, en résumé...

Positionnement
« Autogrids »
Répartition automatique (on ne se soucie pas de la
gouttière)
●
.autogrid2
grille de 2 colonnes justifiées
●
.autogrid3... .autogrid12
3, 4, 5 ou 6 colonnes justifiées

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,...

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

Version LESS !
Pour profiter des
variables et calculs !

Et voilà !
Et sinon :
●
www.knacss.com (toutes les fonctionnalités)
●
Un tutoriel pas à pas illustré d'exemples

Des ressources ailleurs ?
OOCSS
http://oocss.org/
http://csslint.net/
« Object Oriented CSS »
Nicole Sullivan
SMACSS
http://smacss.com/
« Scalable and Modular
Architecture for CSS »
Jonathan Snooks

http://www.css-maintenables.fr/
CSS Maintenables
Kaelig Deloumeau-Prigent
Eyrolles

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)

Crédits
●
Fourcht la saucisse, par Dew
●
Illustrations : Fotolia
●
Police : Segoe UI light

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

Des CSS efficaces avec KNACSS

Contenu connexe

Tendances

En vedette

Similaire à Des CSS efficaces avec KNACSS

Plus de Raphaël Goetter

Des CSS efficaces avec KNACSS