des css efficaces avec knacss
DESCRIPTION
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.TRANSCRIPT
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