Le document aborde l'enrichissement des micro-frameworks CSS, en comparant divers types de frameworks tout en soulignant leur utilité dans l'économie de temps et la facilitée d'utilisation. Il propose également des éléments indispensables et sensibles à intégrer ou à éviter dans un framework, ainsi que des suggestions pour des ateliers de discussion. Enfin, de nombreuses ressources sont fournies pour explorer différents frameworks et approches de CSS.

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
●