Des CSS efficaces avec KNACSS

KNACSSOui 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 UIkarcher : tous les éléments à font-size 100 %, margin 0 et padding 0 !

Ah ouais quand-même...

Blueprint(extrait)

OK j'ai compris !

TwitterBootstrap(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é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


<h2>

<caption>

<h1>

<h3>

<legend>

Les noms de classes


<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é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

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 !

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 : empilement vertical

.line

clear : bothclearfix

Les lignes


Block 1float left

Les lignes


.line


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

● .rightpour aligner à droite

Fastoche !

Positionnement

.left et .mod

Positionnement

.left et tailles

Positionnement

Positionnement alternatif : table● .row

désigne une rangée

● .coldésigne une « colonne »

J'adore !

Positionnement

.row


display : table ;table-layout : fixed ;width : 100% ;

Positionnement

.col

display : table-cell ;vertical-align : top ;

ClearfixHauteurs de frères identiquesAlignement 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... .grid63, 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-2répartition à 1/3 et 2/3 avec gouttière



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... .autogrid123, 4, 5 ou 6 colonnes justifiées

Positionnement

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

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

http://www.knacss.com/

http://www.knacss.com/demos/tutoriel.html

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

https://github.com/stubbornella/oocss/wiki

http://csslint.net/

http://smacss.com/

Des ressources ailleurs ?

http://www.css-maintenables.fr/

CSS MaintenablesKaelig Deloumeau-PrigentEyrolles

http://www.css-maintenables.fr/

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)

http://fr.slideshare.net/stubbornella/our-best-practices-are-killing-us

https://github.com/stubbornella/csslint/wiki/Rules

http://blog.millermedeiros.com/solid-css/

http://bem.github.com/bem-method/pages/beginning/beginning.en.html

https://speakerdeck.com/u/csswizardry/p/big-css

http://www.paris-web.fr/telechargements/2011/03-samedi/SA-PM-09-RDuhem_Verdiere/integrateur_entre_le_marteau_et_enclume.pdf

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

http://www.blup.fr/

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

Technology