Your SlideShare is downloading. ×
0
Les Frameworks CSS, par Raphaël Goetter & Nicolas Hoffmann
Les Frameworks CSS, par Raphaël Goetter & Nicolas Hoffmann
Les Frameworks CSS, par Raphaël Goetter & Nicolas Hoffmann
Les Frameworks CSS, par Raphaël Goetter & Nicolas Hoffmann
Les Frameworks CSS, par Raphaël Goetter & Nicolas Hoffmann
Les Frameworks CSS, par Raphaël Goetter & Nicolas Hoffmann
Les Frameworks CSS, par Raphaël Goetter & Nicolas Hoffmann
Les Frameworks CSS, par Raphaël Goetter & Nicolas Hoffmann
Les Frameworks CSS, par Raphaël Goetter & Nicolas Hoffmann
Les Frameworks CSS, par Raphaël Goetter & Nicolas Hoffmann
Les Frameworks CSS, par Raphaël Goetter & Nicolas Hoffmann
Les Frameworks CSS, par Raphaël Goetter & Nicolas Hoffmann
Les Frameworks CSS, par Raphaël Goetter & Nicolas Hoffmann
Les Frameworks CSS, par Raphaël Goetter & Nicolas Hoffmann
Les Frameworks CSS, par Raphaël Goetter & Nicolas Hoffmann
Les Frameworks CSS, par Raphaël Goetter & Nicolas Hoffmann
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

2,283

Published on

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

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

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,283
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
24
Comments
0
Likes
2
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. 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. 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. 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. 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. 2) Quelques sujets « sensibles » a) Quid des micro-frameworks ? => Pourquoi on a fait ce choix
  • 6. 2) Quelques sujets « sensibles » b) Les grilles et les frameworks
  • 7. 2) Quelques sujets « sensibles » c) Frameworks et pré-processeurs
  • 8. 2) Quelques sujets « sensibles » d) comment « mal utiliser un framework » !
  • 9. 2) Quelques sujets « sensibles » e) Mobile-first ?
  • 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. 3) A vous ! Proposez vos questions, vos remarques, vos idées !
  • 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. 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. 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. 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) 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 ●

×