SlideShare une entreprise Scribd logo
1  sur  16
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)
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.)
●
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.)
●
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é
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é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.
●
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 ‘*’ Reset
●
Normalize.css
●

●

Comparatif : http://www.cssreset.com/
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/
●
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/
●
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/
●
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
●

Contenu connexe

En vedette

Mékong dans le top des meilleurs fleuves pour la croisière
Mékong dans le top des meilleurs fleuves pour la croisièreMékong dans le top des meilleurs fleuves pour la croisière
Mékong dans le top des meilleurs fleuves pour la croisièreVoyage au Vietnam
 
Du revenu de solidarité à l'actionnariat.
Du revenu de solidarité à l'actionnariat.Du revenu de solidarité à l'actionnariat.
Du revenu de solidarité à l'actionnariat.Joël Thimodent
 
El ascensor
El ascensorEl ascensor
El ascensorzzzzpaff
 
Categorias del comercio electronico
Categorias del comercio electronicoCategorias del comercio electronico
Categorias del comercio electronicoEdgar Gualpa
 
Moda!!!
Moda!!!Moda!!!
Moda!!!_Yuya_
 
Texte definitif loi_ant-cmp
Texte definitif loi_ant-cmpTexte definitif loi_ant-cmp
Texte definitif loi_ant-cmpdarwin87
 
La dette en débat
La dette en débatLa dette en débat
La dette en débatdarwin87
 
École d'Entrepreneurship de Beauce - Panel du matin - Rendez-vous des profess...
École d'Entrepreneurship de Beauce - Panel du matin - Rendez-vous des profess...École d'Entrepreneurship de Beauce - Panel du matin - Rendez-vous des profess...
École d'Entrepreneurship de Beauce - Panel du matin - Rendez-vous des profess...Réseau Entrepreneuriat Montréal - REM
 
Realización de una actividad P2P en INTEF MOOC
Realización de una actividad P2P en INTEF MOOCRealización de una actividad P2P en INTEF MOOC
Realización de una actividad P2P en INTEF MOOCINTEF
 
130125 reunion courroie v2
130125 reunion courroie v2130125 reunion courroie v2
130125 reunion courroie v2VP LaCourroie
 
Flyer v5.1
Flyer v5.1Flyer v5.1
Flyer v5.1hel2lan
 
Analyser la fréquentation de son site web - Ateliers Numériques du Pays de Be...
Analyser la fréquentation de son site web - Ateliers Numériques du Pays de Be...Analyser la fréquentation de son site web - Ateliers Numériques du Pays de Be...
Analyser la fréquentation de son site web - Ateliers Numériques du Pays de Be...Pays de Bergerac
 
Imposible de etiquetar
Imposible de etiquetarImposible de etiquetar
Imposible de etiquetarARTPremsa
 
Baromètre du digital marketing 2015 – Adobe / Valtech
Baromètre du digital marketing 2015 – Adobe / ValtechBaromètre du digital marketing 2015 – Adobe / Valtech
Baromètre du digital marketing 2015 – Adobe / Valtechyann le gigan
 

En vedette (20)

Mékong dans le top des meilleurs fleuves pour la croisière
Mékong dans le top des meilleurs fleuves pour la croisièreMékong dans le top des meilleurs fleuves pour la croisière
Mékong dans le top des meilleurs fleuves pour la croisière
 
Du revenu de solidarité à l'actionnariat.
Du revenu de solidarité à l'actionnariat.Du revenu de solidarité à l'actionnariat.
Du revenu de solidarité à l'actionnariat.
 
El ascensor
El ascensorEl ascensor
El ascensor
 
lugares turisticos del ecuador
lugares turisticos del ecuador lugares turisticos del ecuador
lugares turisticos del ecuador
 
Categorias del comercio electronico
Categorias del comercio electronicoCategorias del comercio electronico
Categorias del comercio electronico
 
Moda!!!
Moda!!!Moda!!!
Moda!!!
 
Equipe roumaine
Equipe roumaineEquipe roumaine
Equipe roumaine
 
Texte definitif loi_ant-cmp
Texte definitif loi_ant-cmpTexte definitif loi_ant-cmp
Texte definitif loi_ant-cmp
 
La dette en débat
La dette en débatLa dette en débat
La dette en débat
 
Te apetece echar una mirada a los
Te apetece echar una mirada a losTe apetece echar una mirada a los
Te apetece echar una mirada a los
 
Le desert
Le desertLe desert
Le desert
 
Motivacion herramientas
Motivacion herramientasMotivacion herramientas
Motivacion herramientas
 
Projet PIST.TN
Projet PIST.TN Projet PIST.TN
Projet PIST.TN
 
École d'Entrepreneurship de Beauce - Panel du matin - Rendez-vous des profess...
École d'Entrepreneurship de Beauce - Panel du matin - Rendez-vous des profess...École d'Entrepreneurship de Beauce - Panel du matin - Rendez-vous des profess...
École d'Entrepreneurship de Beauce - Panel du matin - Rendez-vous des profess...
 
Realización de una actividad P2P en INTEF MOOC
Realización de una actividad P2P en INTEF MOOCRealización de una actividad P2P en INTEF MOOC
Realización de una actividad P2P en INTEF MOOC
 
130125 reunion courroie v2
130125 reunion courroie v2130125 reunion courroie v2
130125 reunion courroie v2
 
Flyer v5.1
Flyer v5.1Flyer v5.1
Flyer v5.1
 
Analyser la fréquentation de son site web - Ateliers Numériques du Pays de Be...
Analyser la fréquentation de son site web - Ateliers Numériques du Pays de Be...Analyser la fréquentation de son site web - Ateliers Numériques du Pays de Be...
Analyser la fréquentation de son site web - Ateliers Numériques du Pays de Be...
 
Imposible de etiquetar
Imposible de etiquetarImposible de etiquetar
Imposible de etiquetar
 
Baromètre du digital marketing 2015 – Adobe / Valtech
Baromètre du digital marketing 2015 – Adobe / ValtechBaromètre du digital marketing 2015 – Adobe / Valtech
Baromètre du digital marketing 2015 – Adobe / Valtech
 

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

Une plateforme moderne pour le groupe SIPA/Ouest-France 
Une plateforme moderne pour le groupe SIPA/Ouest-France Une plateforme moderne pour le groupe SIPA/Ouest-France 
Une plateforme moderne pour le groupe SIPA/Ouest-France François-Guillaume Ribreau
 
Réussir une montée en charge avec MongoDB
Réussir une montée en charge avec MongoDBRéussir une montée en charge avec MongoDB
Réussir une montée en charge avec MongoDB MongoDB
 
Développer pour tous les navigateurs
Développer pour tous les navigateursDévelopper pour tous les navigateurs
Développer pour tous les navigateursMicrosoft
 
Tester du legacy code, mission impossible ?
Tester du legacy code, mission impossible ?Tester du legacy code, mission impossible ?
Tester du legacy code, mission impossible ?CGI Québec Formation
 
AngularJS et autres techno frontend
AngularJS et autres techno frontendAngularJS et autres techno frontend
AngularJS et autres techno frontendyllieth
 
TechDays 2014 : Cloud Azure – Services de données et bonnes pratiques
TechDays 2014 : Cloud Azure – Services de données et bonnes pratiquesTechDays 2014 : Cloud Azure – Services de données et bonnes pratiques
TechDays 2014 : Cloud Azure – Services de données et bonnes pratiquesMCKLMT
 
Pourquoi & est-ce vrai que Magento 1.x est considéré comme une plateforme lou...
Pourquoi & est-ce vrai que Magento 1.x est considéré comme une plateforme lou...Pourquoi & est-ce vrai que Magento 1.x est considéré comme une plateforme lou...
Pourquoi & est-ce vrai que Magento 1.x est considéré comme une plateforme lou...The e-Commerce Academy
 
La mise en cache et ses secrets
La mise en cache et ses secretsLa mise en cache et ses secrets
La mise en cache et ses secretsAymeric Bouillat
 
Meetup DevOps Aix-Marseille - théorie du chaos et architectures résilientes
Meetup DevOps Aix-Marseille - théorie du chaos et architectures résilientesMeetup DevOps Aix-Marseille - théorie du chaos et architectures résilientes
Meetup DevOps Aix-Marseille - théorie du chaos et architectures résilientesFrederic Leger
 
Réussir son projet Drupal
Réussir son projet DrupalRéussir son projet Drupal
Réussir son projet DrupalAdyax
 
Rex docker en production meeutp-docker-nantes
Rex docker en production meeutp-docker-nantesRex docker en production meeutp-docker-nantes
Rex docker en production meeutp-docker-nantesChristophe Furmaniak
 
Windows Azure : Services de données et bonnes pratiques
Windows Azure : Services de données et bonnes pratiquesWindows Azure : Services de données et bonnes pratiques
Windows Azure : Services de données et bonnes pratiquesMCKLMT
 
Cloud Azure -- Services de données et bonnes pratiques
Cloud Azure -- Services de données et bonnes pratiques Cloud Azure -- Services de données et bonnes pratiques
Cloud Azure -- Services de données et bonnes pratiques Microsoft Technet France
 
Cloud Azure – Services de données et bonnes pratiques
Cloud Azure – Services de données et bonnes pratiquesCloud Azure – Services de données et bonnes pratiques
Cloud Azure – Services de données et bonnes pratiquesMicrosoft
 
Javascript & tools
Javascript & toolsJavascript & tools
Javascript & toolsSlim Soussi
 
[GAB2016] Azure DocumentDB - Jean-Luc Boucho
[GAB2016] Azure DocumentDB - Jean-Luc Boucho[GAB2016] Azure DocumentDB - Jean-Luc Boucho
[GAB2016] Azure DocumentDB - Jean-Luc BouchoCellenza
 

Similaire à Les Frameworks CSS, par Raphaël Goetter & Nicolas Hoffmann (20)

Javascript proprement
Javascript proprementJavascript proprement
Javascript proprement
 
Une plateforme moderne pour le groupe SIPA/Ouest-France 
Une plateforme moderne pour le groupe SIPA/Ouest-France Une plateforme moderne pour le groupe SIPA/Ouest-France 
Une plateforme moderne pour le groupe SIPA/Ouest-France 
 
Front end Hero Presentation
Front end Hero PresentationFront end Hero Presentation
Front end Hero Presentation
 
Systematic, toolchain JS
Systematic, toolchain JSSystematic, toolchain JS
Systematic, toolchain JS
 
Réussir une montée en charge avec MongoDB
Réussir une montée en charge avec MongoDBRéussir une montée en charge avec MongoDB
Réussir une montée en charge avec MongoDB
 
Développer pour tous les navigateurs
Développer pour tous les navigateursDévelopper pour tous les navigateurs
Développer pour tous les navigateurs
 
Tester du legacy code, mission impossible ?
Tester du legacy code, mission impossible ?Tester du legacy code, mission impossible ?
Tester du legacy code, mission impossible ?
 
AngularJS et autres techno frontend
AngularJS et autres techno frontendAngularJS et autres techno frontend
AngularJS et autres techno frontend
 
TechDays 2014 : Cloud Azure – Services de données et bonnes pratiques
TechDays 2014 : Cloud Azure – Services de données et bonnes pratiquesTechDays 2014 : Cloud Azure – Services de données et bonnes pratiques
TechDays 2014 : Cloud Azure – Services de données et bonnes pratiques
 
Pourquoi & est-ce vrai que Magento 1.x est considéré comme une plateforme lou...
Pourquoi & est-ce vrai que Magento 1.x est considéré comme une plateforme lou...Pourquoi & est-ce vrai que Magento 1.x est considéré comme une plateforme lou...
Pourquoi & est-ce vrai que Magento 1.x est considéré comme une plateforme lou...
 
Base de données
Base de donnéesBase de données
Base de données
 
La mise en cache et ses secrets
La mise en cache et ses secretsLa mise en cache et ses secrets
La mise en cache et ses secrets
 
Meetup DevOps Aix-Marseille - théorie du chaos et architectures résilientes
Meetup DevOps Aix-Marseille - théorie du chaos et architectures résilientesMeetup DevOps Aix-Marseille - théorie du chaos et architectures résilientes
Meetup DevOps Aix-Marseille - théorie du chaos et architectures résilientes
 
Réussir son projet Drupal
Réussir son projet DrupalRéussir son projet Drupal
Réussir son projet Drupal
 
Rex docker en production meeutp-docker-nantes
Rex docker en production meeutp-docker-nantesRex docker en production meeutp-docker-nantes
Rex docker en production meeutp-docker-nantes
 
Windows Azure : Services de données et bonnes pratiques
Windows Azure : Services de données et bonnes pratiquesWindows Azure : Services de données et bonnes pratiques
Windows Azure : Services de données et bonnes pratiques
 
Cloud Azure -- Services de données et bonnes pratiques
Cloud Azure -- Services de données et bonnes pratiques Cloud Azure -- Services de données et bonnes pratiques
Cloud Azure -- Services de données et bonnes pratiques
 
Cloud Azure – Services de données et bonnes pratiques
Cloud Azure – Services de données et bonnes pratiquesCloud Azure – Services de données et bonnes pratiques
Cloud Azure – Services de données et bonnes pratiques
 
Javascript & tools
Javascript & toolsJavascript & tools
Javascript & tools
 
[GAB2016] Azure DocumentDB - Jean-Luc Boucho
[GAB2016] Azure DocumentDB - Jean-Luc Boucho[GAB2016] Azure DocumentDB - Jean-Luc Boucho
[GAB2016] Azure DocumentDB - Jean-Luc Boucho
 

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

  • 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 ●