Download - Des CSS efficaces avec KNACSS
KNACSS ?
● Un framework CSS ?Pas complètement
● Un reset CSS ?Pas complètement
● Un « Boilerplate » ?Ouais non, pas complètement
…
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 UIkarcher : tous les éléments à font-size 100 %, margin 0 et padding 0 !
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épartminimaliste, concentrée extensible et réutilisable
● Tout sauf une usine à gazdonc incomplète : à vous de rajouter vos briques
● Compatible « Responsive Web Design »des briques déjà en place et fonctionnelles
● Compatible Pré-Processeursadaptable à 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 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> ©
<h2>
<caption>
<h1>
<h3>
<legend>
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> ©
<h2 class="h2-like">
<caption class="h2-like">
<h1 class="h2-like">
<h3 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éstaille de 62.5% pour <html>, soit 10px.body =base*10ex : 2.4em = équivalent 24px
● « rem » readyL'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 surles 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-sizinglargeur = 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 : hiddenclearfix
<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 !
.mod
Les lignes
.line : empilement vertical● Doit pouvoir contenir les flottants● Doit se placer sous les flottants précédents
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
● .rightpour aligner à droite
Fastoche !
Positionnement
Positionnement alternatif : table● .row
désigne une rangée
● .coldésigne une « colonne »
J'adore !
Positionnement
.col
display : table-cell ;vertical-align : top ;
ClearfixHauteurs de frères identiquesAlignement vertical aiséRépartition sur la largeur du parent
Positionnement
Grilles et gouttières● .grid2
grille de 2 colonnes séparés par une gouttière
● .grid3... .grid63, 4, 5 ou 6 colonnes identiques
Enfantin !
Positionnement
Grilles de largeurs inégales● .grid2-1
répartition à 2/3 et 1/3 avec gouttière
● .grid1-2répartition à 1/3 et 2/3 avec gouttière
● .grid1-3répartition à 1/4 et 3/4 avec gouttière
● .grid3-1répartition à 3/4 et 1/4 avec gouttière
Positionnement
« Autogrids »
Répartition automatique (on ne se soucie pas de la gouttière)● .autogrid2
grille de 2 colonnes justifiées
● .autogrid3... .autogrid123, 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 »
Affinagesmarges, padding
Identité= mod, line,...
Responsive Web Design
Automatiquement adapté aux smartphones et tablettes● .mod, .col et autres blocs
largeur auto sur petit écranannulation des flottementsaffichage vertical forcéannulation des marges et padding
● Toutes classes de largeurs telles que .w900, etc.largeur auto sur petit écran
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 ModularArchitecture for CSS »Jonathan Snooks
Des ressources ailleurs ?
http://www.css-maintenables.fr/
CSS MaintenablesKaelig Deloumeau-PrigentEyrolles
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)
Crédits ● Fourcht la saucisse, par Dew● Illustrations : Fotolia● Police : Segoe UI light