Des CSS efficaces avec KNACSS

  • 13,038 views
Uploaded on

KNACSS est une feuille de style CSS minimaliste, responsive et extensible pour débuter une intégration HTML / CSS --> http://knacss.com/ …

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
13,038
On Slideshare
0
From Embeds
0
Number of Embeds
13

Actions

Shares
Downloads
489
Comments
5
Likes
17

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. KNACSS Oui d'accord, … mais encore ? Des CSS efficaces avec « KNACSS » Raphaël Goetter Alsacréations
  • 2. KNACSS ? ● Un framework CSS ? Pas complètement ● Un reset CSS ? Pas complètement ● Un « Boilerplate » ? Ouais non, pas complètement …
  • 3. C'est quoi finalement ? Un peu de tout ça à la fois, mais surtout... léger
  • 4. 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 !
  • 5. Ah ouais quand-même... Blueprint (extrait)
  • 6. OK j'ai compris ! Twitter Bootstrap (extrait)
  • 7. KNACSS = mini KNACSS.css (5ko non minifié)
  • 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 !
  • 11. 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
  • 12. 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>
  • 13. 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
  • 14. 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; } ...
  • 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
  • 16. 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;}
  • 17. Alignements .left {float: left;} .right {float: right;} .center {margin: auto} .txtleft {text-align: left} .txtright {text-align: right} .txtcenter {text-align: center}
  • 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)
  • 20. 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
  • 21. 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 ? ? ?
  • 22. 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
  • 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
  • 25. Les blocs .mod : le bloc par défaut .mod overflow : hidden clearfix
  • 26. Les blocs .mod : le bloc par défaut .mod overflow : hidden clearfix <div class="mod">, <aside class="mod">, <p class="mod">, etc.
  • 27. Les blocs .mod float left Bloc de contenu, Lorem Elsass ipsum Lorem Elsass ipsum choucroute gal !
  • 28. Les blocs .mod float left Bloc de contenu, Lorem Elsass ipsum Lorem Elsass ipsum choucroute gal ! .mod
  • 29. Les lignes .line : empilement vertical ● Doit pouvoir contenir les flottants ● Doit se placer sous les flottants précédents
  • 30. Les lignes .line : empilement vertical .line clear : both clearfix
  • 31. Les lignes .line : empilement vertical Block 1float left
  • 32. Les lignes .line : empilement vertical .line clear : both clearfix float left
  • 33. Contenir les flottants Les flottants, ça dépasse ! Box 1 Box 2 Box 3float left float left float left
  • 34. Contenir les flottants .mod, ou .clearfix, ou .line Box 1 Box 2 Box 3float left float left float left
  • 35. Positionnement Positionnement classique : float ● .left pour aligner à gauche ● .right pour aligner à droite Fastoche !
  • 36. Positionnement .left et .mod
  • 37. Positionnement .left et tailles
  • 38. Positionnement Positionnement alternatif : table ● .row désigne une rangée ● .col désigne une « colonne » J'adore !
  • 39. Positionnement .row clear : both clearfix display : table ; table-layout : fixed ; width : 100% ;
  • 40. Positionnement .col display : table-cell ; vertical-align : top ; Clearfix Hauteurs de frères identiques Alignement vertical aisé Répartition sur la largeur du parent
  • 41. Positionnement .row et .col pour les tableaux CSS
  • 42. 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 !
  • 43. Positionnement Parent en .grid2
  • 44. Positionnement Parent en .grid3
  • 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
  • 46. Positionnement Parent en .grid2-1
  • 47. Positionnement Parent en .grid1-3
  • 48. Positionnement Grilles, en résumé...
  • 49. 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
  • 50. Positionnement
  • 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
  • 53. Version LESS ! Pour profiter des variables et calculs !
  • 54. Et voilà ! Et sinon : ● www.knacss.com (toutes les fonctionnalités) ● Un tutoriel pas à pas illustré d'exemples
  • 55. 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
  • 56. Des ressources ailleurs ? http://www.css-maintenables.fr/ CSS Maintenables Kaelig Deloumeau-Prigent Eyrolles
  • 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)
  • 58. Crédits ● Fourcht la saucisse, par Dew ● Illustrations : Fotolia ● Police : Segoe UI light
  • 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