Et si on enrichissait nos
(micro-)Frameworks CSS ?
Par Raphaël Goetter et Nicolas Hoffmann

@goetter & @Nico333fr
KNACSS &...
1) Des Frameworks CSS ?

Des micro-frameworks (KNACSS, RÖCSSTI,
INUIT, Cardinal, Starting Blocks, etc.)
●

Des usines comp...
1) Ce que ça apporte
Se faciliter la vie (box-sizing, vertical rythm,
tailles de polices, etc.)
●

Économiser du temps (po...
1) Ce qu'on pense qu'il doit y
avoir
Indispensable dans un
framework HTML / CSS

Le bonus d’un framework

ce qu’il ne faut...
2) Quelques sujets « sensibles »

a) Quid des micro-frameworks ?
=> Pourquoi on a fait ce choix
2) Quelques sujets « sensibles »

b) Les grilles et les frameworks
2) Quelques sujets « sensibles »

c) Frameworks et pré-processeurs
2) Quelques sujets « sensibles »

d) comment « mal utiliser un framework » !
2) Quelques sujets « sensibles »

e) Mobile-first ?
3) Atelier Open-CSS

QQ sujets qu'on vous propose (pas
obligatoires) :

Retour d'XP sur nos micro-frameworks
(préprocesseu...
3) A vous !

Proposez vos questions, vos remarques, vos
idées !
4) Ressources
Reset :
Eric Meyer’s “Reset CSS”
●
HTML5 Doctor CSS Reset
●
Yahoo! (YUI 3) Reset
●
Universal Selector ‘*’ Re...
4) Ressources

FW Légers :
RÖCSSTI : http://rocssti.nicolas-hoffmann.net/
●
KNACSS : http://www.knacss.com/
●
INUIT : http...
4) Ressources
Thématiques :

BaselineCSS (typographie) : http://baselinecss.com/
●
Typeplate (typographie) : http://typepl...
4) Ressources
Complets / Graphiques :
Twitter Bootstrap : http://getbootstrap.com/
●
960.gs
●
BluePrint
●
Foundation
●
Pur...
Comparatifs :

4) Ressources

Comparatif : http://usablica.github.io/front-endframeworks/compare.html (pas à jour malheure...
Prochain SlideShare
Chargement dans…5
×

Les Frameworks CSS, par Raphaël Goetter & Nicolas Hoffmann

3 422 vues

Publié le

Le support de présentation de l'atelier de Paris Web 2013 sur les frameworks CSS, animé par Raphaël Goetter & Nicolas Hoffmann.

Publié dans : Design
0 commentaire
3 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
3 422
Sur SlideShare
0
Issues des intégrations
0
Intégrations
42
Actions
Partages
0
Téléchargements
30
Commentaires
0
J’aime
3
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Les Frameworks CSS, par Raphaël Goetter & Nicolas Hoffmann

  1. 1. Et si on enrichissait nos (micro-)Frameworks CSS ? Par Raphaël Goetter et Nicolas Hoffmann @goetter & @Nico333fr KNACSS & RÖCSSTI Dupond et Dupont (ok on a compris, ils sont deux)
  2. 2. 1) Des Frameworks CSS ? Des micro-frameworks (KNACSS, RÖCSSTI, INUIT, Cardinal, Starting Blocks, etc.) ● Des usines complètes (Bootstrap, PureCSS, BluePrint, Kube, etc. ) ● Des frameworks à thème (BaselineCSS, Unsemantic, Elastic CSS, YUI 2 Grids, etc. ) ● Des resets ? (Eric Meyer’s “Reset CSS”, Normalize.css, etc.) ●
  3. 3. 1) Ce que ça apporte Se faciliter la vie (box-sizing, vertical rythm, tailles de polices, etc.) ● Économiser du temps (positionnement, snippets, responsive, start-base, etc.) ● Ne pas réinventer la roue (classes réutilisables, maintenabilité, base stable pour équipe, éviter d'oublier qqch, etc.) ●
  4. 4. 1) Ce qu'on pense qu'il doit y avoir Indispensable dans un framework HTML / CSS Le bonus d’un framework ce qu’il ne faut pas attendre d’un framework un reset CSS des grilles et modèles de positionnement des hacks, des !important, de la bidouille des classes réutilisables des positionnements évolués (flexbox) des parties de code non standards des bonnes pratiques et des conventions des versions préprocesseurs (LESS / Sass / Stylus) des snippets utiles une fois dans sa vie une organisation de code responsive / mobile first du design intégré au framework (thèmes, couleurs) des bouts de code pratiques gestion des tableaux du JavaScript (ou pire : jQuery) du positionnement facilité gestion des formulaires une production accélérée support du média print un apprentissage rapide gestion du rythme vertical support navigateur élevé et clairement indiqué
  5. 5. 2) Quelques sujets « sensibles » a) Quid des micro-frameworks ? => Pourquoi on a fait ce choix
  6. 6. 2) Quelques sujets « sensibles » b) Les grilles et les frameworks
  7. 7. 2) Quelques sujets « sensibles » c) Frameworks et pré-processeurs
  8. 8. 2) Quelques sujets « sensibles » d) comment « mal utiliser un framework » !
  9. 9. 2) Quelques sujets « sensibles » e) Mobile-first ?
  10. 10. 3) Atelier Open-CSS QQ sujets qu'on vous propose (pas obligatoires) : Retour d'XP sur nos micro-frameworks (préprocesseurs, mobile-first, etc.) ● Grilles/Flexbox ● Si qqu'un a des retours d'XP de mise en place de framework + lourds ● Conventions de nommage ● Gestion du versioning ? ● Etc. ●
  11. 11. 3) A vous ! Proposez vos questions, vos remarques, vos idées !
  12. 12. 4) Ressources Reset : Eric Meyer’s “Reset CSS” ● HTML5 Doctor CSS Reset ● Yahoo! (YUI 3) Reset ● Universal Selector ‘*’ Reset ● Normalize.css ● ● Comparatif : http://www.cssreset.com/
  13. 13. 4) Ressources FW Légers : RÖCSSTI : http://rocssti.nicolas-hoffmann.net/ ● KNACSS : http://www.knacss.com/ ● INUIT : http://inuitcss.com/ ● Cardinal : http://cardinalcss.com/ ● Starting Block : https://github.com/lordfpx/startingblock/tree/master/css ● Elements : http://elements.projectdesigns.org/ ●
  14. 14. 4) Ressources Thématiques : BaselineCSS (typographie) : http://baselinecss.com/ ● Typeplate (typographie) : http://typeplate.com/ ● xCSS (Orienté Objet) : http://xcss.antpaw.org/ ● Elastic CSS (layout) : http://elasticss.com/ ● Unsemantic (grilles) : http://unsemantic.com/ ● YUI 2 grids (grilles) : http://developer.yahoo.com/yui/grids/ ● Responsive GS (grilles) : http://responsive.gs/ ● Suit-CSS-grid-layout (grilles) : https://github.com/suitcss/grid-layouts ● GridSystemGenerator (grilles) : http://www.gridsystemgenerator.com/ ●
  15. 15. 4) Ressources Complets / Graphiques : Twitter Bootstrap : http://getbootstrap.com/ ● 960.gs ● BluePrint ● Foundation ● PureCSS : http://purecss.io/ ● Semantic UI : http://semantic-ui.com/ ● Groundworks : http://groundwork.sidereel.com ● XPRESSIO : http://xpress.io/ ● Kube : http://imperavi.com/kube/ ●
  16. 16. Comparatifs : 4) Ressources Comparatif : http://usablica.github.io/front-endframeworks/compare.html (pas à jour malheureusement) ● Récapitulatif : http://en.wikipedia.org/wiki/CSS_frameworks ● D’autres listes : http://css.4design.tl/choisir-un-frameworks-css/ http://devsnippets.com/article/complete-guide-to-css-frameworks.html ● http://www.awwwards.com/what-are-frameworks-22-best-responsivecss-frameworks-for-web-design.html ● Article général : “Frameworks for designers” : http://alistapart.com/article/frameworksfordesigners ● Conf / Atelier de Thomas Parisot en 2008 : http://fr.slideshare.net/oncletom/dveloppement-efficace-avec-lesframeworks-css-presentation ●

×