1. Et si on enrichissait nos (micro-)Frameworks CSS? Par Raphal Goetter et Nicolas Hoffmann@goetter & @Nico333fr KNACSS & RCSSTI Dupond et Dupont (ok on a compris, ils sont deux)

2. 1) Des Frameworks CSS?Des micro-frameworks (KNACSS, RCSSTI, INUIT, Cardinal, Starting Blocks, etc.) Des usines compltes (Bootstrap, PureCSS, BluePrint, Kube, etc. ) Des frameworks thme (BaselineCSS, Unsemantic, Elastic CSS, YUI 2 Grids, etc. ) Des resets? (Eric Meyers Reset CSS, Normalize.css, etc.) 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 rinventer la roue (classes rutilisables, maintenabilit, base stable pour quipe, viter d'oublier qqch, etc.) 4. 1) Ce qu'on pense qu'il doit y avoir Indispensable dans un framework HTML / CSSLe bonus dun frameworkce quil ne faut pas attendre dun frameworkun reset CSSdes grilles et modles de positionnementdes hacks, des !important, de la bidouilledes classes rutilisablesdes positionnements volus (flexbox)des parties de code non standardsdes bonnes pratiques et des conventionsdes versions prprocesseurs (LESS / Sass / Stylus)des snippets utiles une fois dans sa vieune organisation de coderesponsive / mobile firstdu design intgr au framework (thmes, couleurs)des bouts de code pratiquesgestion des tableauxdu JavaScript (ou pire : jQuery)du positionnement facilitgestion des formulairesune production acclresupport du mdia printun apprentissage rapidegestion du rythme verticalsupport navigateur lev et clairement indiqu 5. 2) Quelques sujets sensiblesa) Quid des micro-frameworks? => Pourquoi on a fait ce choix 6. 2) Quelques sujets sensiblesb) Les grilles et les frameworks 7. 2) Quelques sujets sensiblesc) Frameworks et pr-processeurs 8. 2) Quelques sujets sensiblesd) comment mal utiliser un framework! 9. 2) Quelques sujets sensiblese) Mobile-first ? 10. 3) Atelier Open-CSSQQ sujets qu'on vous propose (pas obligatoires):Retour d'XP sur nos micro-frameworks (prprocesseurs, 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. 3) A vous!Proposez vos questions, vos remarques, vos ides! 12. 4) Ressources Reset : Eric Meyers Reset CSS HTML5 Doctor CSS Reset Yahoo! (YUI 3) Reset Universal Selector * Reset Normalize.css Comparatif : http://www.cssreset.com/ 13. 4) RessourcesFW Lgers : RCSSTI: 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. 4) Ressources Thmatiques :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. 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. Comparatifs :4) RessourcesComparatif : http://usablica.github.io/front-endframeworks/compare.html (pas jour malheureusement) Rcapitulatif : http://en.wikipedia.org/wiki/CSS_frameworks Dautres 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 gnral : 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