SlideShare a Scribd company logo
1 of 13
Download to read offline
RESPONSIVE DESIGN
                              &
                           LESS CSS

                        APPLIQUÉS AU
                      MOTEUR DE TEMPLATE
                         DE 42STORES
mardi 23 octobre 12
POINT DE DÉPART

    •2         conf tech sur responsive et less css


    • 40              thèmes (+) ou (-) standardisés
    •5         feuilles de styles / thème
    •1         thème dédié smartphone

mardi 23 octobre 12
mardi 23 octobre 12
PASSAGE AU RESPONSIVE
    • choix           du layout fluide

         • passage        en % / taille en EM / position absolute et %

    • développement             des média queries

         • minimiser   les queries , test multi device (écrans normaux,
             mobiles classiques, mobiles retina, tablettes)

    • double           CSS pour IE 7/8

    • transformation           menu déroulant en select

mardi 23 octobre 12
MEDIA QUERIES
                        ECRANS




mardi 23 octobre 12
MEDIA QUERIES
                        IPHONE 4




mardi 23 octobre 12
RÉSULTATS RESPONSIVE




mardi 23 octobre 12
PASSAGE AU LESS




mardi 23 octobre 12
Découpe du
                          CSS
                           &
                       ré-écriture
                        complète




mardi 23 octobre 12
Compilation (php)


                         1 seul fichier CSS

                      <link type="text/css"
                      rel="stylesheet"
                      href="/styles/main.css" />




mardi 23 octobre 12
AVANTAGES LESS
                       LES VARIABLES




mardi 23 octobre 12
AVANTAGES LESS
                      LES FONCTIONS




mardi 23 octobre 12
RESPONSIVE DESIGN
                               +
                            LESS CSS
                               =
                       50 JOURS HOMME
                               +
                       AVENIR RADIEUX
mardi 23 octobre 12

More Related Content

Viewers also liked

HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3JDerrien
 
Telecharger Exercices corrigés PL/SQL
Telecharger Exercices corrigés PL/SQLTelecharger Exercices corrigés PL/SQL
Telecharger Exercices corrigés PL/SQLwebreaker
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesVitaly Friedman
 
Ingénieur Informaticien Bersweiller Antony
Ingénieur Informaticien    Bersweiller  AntonyIngénieur Informaticien    Bersweiller  Antony
Ingénieur Informaticien Bersweiller Antonygawronski
 
Trucs et astuces PHP et MySQL
Trucs et astuces PHP et MySQLTrucs et astuces PHP et MySQL
Trucs et astuces PHP et MySQLDamien Seguy
 
Les bases du responsive design
Les bases du responsive designLes bases du responsive design
Les bases du responsive designVoyelle Voyelle
 
POO en C++
POO en C++POO en C++
POO en C++elharraj
 
El mito del desarrollo
El mito del desarrolloEl mito del desarrollo
El mito del desarrolloMONMOMO
 
Lección 1 vocab
Lección 1 vocabLección 1 vocab
Lección 1 vocablorschulte
 
Les espaces publics multimédias, lieux de ressources numériques pour leur ter...
Les espaces publics multimédias, lieux de ressources numériques pour leur ter...Les espaces publics multimédias, lieux de ressources numériques pour leur ter...
Les espaces publics multimédias, lieux de ressources numériques pour leur ter...acdubreuil
 
CUADERNO INFORMATICO
CUADERNO INFORMATICOCUADERNO INFORMATICO
CUADERNO INFORMATICOMelisa Quispe
 
Nota importante
Nota importanteNota importante
Nota importantePame Maza
 
Trabajo de auditoria de sistemas
Trabajo de auditoria de sistemasTrabajo de auditoria de sistemas
Trabajo de auditoria de sistemasjwpa19701
 

Viewers also liked (15)

HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
 
Telecharger Exercices corrigés PL/SQL
Telecharger Exercices corrigés PL/SQLTelecharger Exercices corrigés PL/SQL
Telecharger Exercices corrigés PL/SQL
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
 
Ingénieur Informaticien Bersweiller Antony
Ingénieur Informaticien    Bersweiller  AntonyIngénieur Informaticien    Bersweiller  Antony
Ingénieur Informaticien Bersweiller Antony
 
Trucs et astuces PHP et MySQL
Trucs et astuces PHP et MySQLTrucs et astuces PHP et MySQL
Trucs et astuces PHP et MySQL
 
Les bases du responsive design
Les bases du responsive designLes bases du responsive design
Les bases du responsive design
 
POO en C++
POO en C++POO en C++
POO en C++
 
Dfrpus600
Dfrpus600Dfrpus600
Dfrpus600
 
El mito del desarrollo
El mito del desarrolloEl mito del desarrollo
El mito del desarrollo
 
Lección 1 vocab
Lección 1 vocabLección 1 vocab
Lección 1 vocab
 
Les espaces publics multimédias, lieux de ressources numériques pour leur ter...
Les espaces publics multimédias, lieux de ressources numériques pour leur ter...Les espaces publics multimédias, lieux de ressources numériques pour leur ter...
Les espaces publics multimédias, lieux de ressources numériques pour leur ter...
 
CUADERNO INFORMATICO
CUADERNO INFORMATICOCUADERNO INFORMATICO
CUADERNO INFORMATICO
 
Nota importante
Nota importanteNota importante
Nota importante
 
Trabajo de auditoria de sistemas
Trabajo de auditoria de sistemasTrabajo de auditoria de sistemas
Trabajo de auditoria de sistemas
 
Bone yard31
Bone yard31Bone yard31
Bone yard31
 

More from Normandie Web Xperts

#nwxtech9 Rudy Baer et Kevin Vézier - Ansible, l’outil du sysadmin paresseux ...
#nwxtech9 Rudy Baer et Kevin Vézier - Ansible, l’outil du sysadmin paresseux ...#nwxtech9 Rudy Baer et Kevin Vézier - Ansible, l’outil du sysadmin paresseux ...
#nwxtech9 Rudy Baer et Kevin Vézier - Ansible, l’outil du sysadmin paresseux ...Normandie Web Xperts
 
#nwxtech7 Grégory Le Garec - HTML5 Offline
#nwxtech7 Grégory Le Garec - HTML5 Offline#nwxtech7 Grégory Le Garec - HTML5 Offline
#nwxtech7 Grégory Le Garec - HTML5 OfflineNormandie Web Xperts
 
#nwxtech6 Olivier Martineau - Les démons en PHP
#nwxtech6 Olivier Martineau - Les démons en PHP#nwxtech6 Olivier Martineau - Les démons en PHP
#nwxtech6 Olivier Martineau - Les démons en PHPNormandie Web Xperts
 
#nwxtech6 Mickaël Deffontaine - Drupal API Form
#nwxtech6 Mickaël Deffontaine - Drupal API Form#nwxtech6 Mickaël Deffontaine - Drupal API Form
#nwxtech6 Mickaël Deffontaine - Drupal API FormNormandie Web Xperts
 
#nwxtech6 Frédéric Bisson - SVG pour le web
#nwxtech6 Frédéric Bisson - SVG pour le web#nwxtech6 Frédéric Bisson - SVG pour le web
#nwxtech6 Frédéric Bisson - SVG pour le webNormandie Web Xperts
 
#nwxtech6 Frédéric Bisson - SVG pour le web
#nwxtech6 Frédéric Bisson - SVG pour le web#nwxtech6 Frédéric Bisson - SVG pour le web
#nwxtech6 Frédéric Bisson - SVG pour le webNormandie Web Xperts
 
Julien Nicolas - Comment coucher avec son intégrateur en 5 étapes - #nwxwd
Julien Nicolas - Comment coucher avec son intégrateur en 5 étapes - #nwxwdJulien Nicolas - Comment coucher avec son intégrateur en 5 étapes - #nwxwd
Julien Nicolas - Comment coucher avec son intégrateur en 5 étapes - #nwxwdNormandie Web Xperts
 
Julien Verhaeghe - API REST : Le module Services de Drupal - Drupal Meetup Ro...
Julien Verhaeghe - API REST : Le module Services de Drupal - Drupal Meetup Ro...Julien Verhaeghe - API REST : Le module Services de Drupal - Drupal Meetup Ro...
Julien Verhaeghe - API REST : Le module Services de Drupal - Drupal Meetup Ro...Normandie Web Xperts
 
Frédéric Bisson - 8 ans de Drupal - Drupal Meetup Rouen #3
Frédéric Bisson - 8 ans de Drupal - Drupal Meetup Rouen #3Frédéric Bisson - 8 ans de Drupal - Drupal Meetup Rouen #3
Frédéric Bisson - 8 ans de Drupal - Drupal Meetup Rouen #3Normandie Web Xperts
 
Conférence #nwx2014 - Nicolas Saillard - Agilité en SSII
Conférence #nwx2014 - Nicolas Saillard - Agilité en SSIIConférence #nwx2014 - Nicolas Saillard - Agilité en SSII
Conférence #nwx2014 - Nicolas Saillard - Agilité en SSIINormandie Web Xperts
 
Conférence #nwx2014 - Maxime Mauchaussée - Partager du code maintenable et év...
Conférence #nwx2014 - Maxime Mauchaussée - Partager du code maintenable et év...Conférence #nwx2014 - Maxime Mauchaussée - Partager du code maintenable et év...
Conférence #nwx2014 - Maxime Mauchaussée - Partager du code maintenable et év...Normandie Web Xperts
 
Conférence #nwx2014 - Ivan Dalmet - Ergonomie web, les bases pour tous
Conférence #nwx2014 - Ivan Dalmet - Ergonomie web, les bases pour tousConférence #nwx2014 - Ivan Dalmet - Ergonomie web, les bases pour tous
Conférence #nwx2014 - Ivan Dalmet - Ergonomie web, les bases pour tousNormandie Web Xperts
 
Conférence #nwx2014 - Thibaud Juin - Varnish, accélérateur web
Conférence #nwx2014 - Thibaud Juin - Varnish, accélérateur webConférence #nwx2014 - Thibaud Juin - Varnish, accélérateur web
Conférence #nwx2014 - Thibaud Juin - Varnish, accélérateur webNormandie Web Xperts
 
Conférence #nwxtech5 : Présentation du hacker space Jeanne d'Hack par Samir C...
Conférence #nwxtech5 : Présentation du hacker space Jeanne d'Hack par Samir C...Conférence #nwxtech5 : Présentation du hacker space Jeanne d'Hack par Samir C...
Conférence #nwxtech5 : Présentation du hacker space Jeanne d'Hack par Samir C...Normandie Web Xperts
 
Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier
Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercierConférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier
Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercierNormandie Web Xperts
 
Conférence #nwxtech5 : Drupal et OpenLayers par Frédéric Bisson
Conférence #nwxtech5 : Drupal et OpenLayers par Frédéric BissonConférence #nwxtech5 : Drupal et OpenLayers par Frédéric Bisson
Conférence #nwxtech5 : Drupal et OpenLayers par Frédéric BissonNormandie Web Xperts
 
Conférence #nwxtech5 : Django, du framework pour les perfectionnistes au pony...
Conférence #nwxtech5 : Django, du framework pour les perfectionnistes au pony...Conférence #nwxtech5 : Django, du framework pour les perfectionnistes au pony...
Conférence #nwxtech5 : Django, du framework pour les perfectionnistes au pony...Normandie Web Xperts
 
Conférence #nwxtech5 : Introduction à Backbone.js par Hugo Larcher
Conférence #nwxtech5 : Introduction à Backbone.js par Hugo LarcherConférence #nwxtech5 : Introduction à Backbone.js par Hugo Larcher
Conférence #nwxtech5 : Introduction à Backbone.js par Hugo LarcherNormandie Web Xperts
 
Conférence #nwxtech5 : Selenium WebDriver 2 par Romain Louvet
Conférence #nwxtech5 : Selenium WebDriver 2 par Romain LouvetConférence #nwxtech5 : Selenium WebDriver 2 par Romain Louvet
Conférence #nwxtech5 : Selenium WebDriver 2 par Romain LouvetNormandie Web Xperts
 

More from Normandie Web Xperts (20)

#nwxtech9 Rudy Baer et Kevin Vézier - Ansible, l’outil du sysadmin paresseux ...
#nwxtech9 Rudy Baer et Kevin Vézier - Ansible, l’outil du sysadmin paresseux ...#nwxtech9 Rudy Baer et Kevin Vézier - Ansible, l’outil du sysadmin paresseux ...
#nwxtech9 Rudy Baer et Kevin Vézier - Ansible, l’outil du sysadmin paresseux ...
 
#nwxtech7 Grégory Le Garec - HTML5 Offline
#nwxtech7 Grégory Le Garec - HTML5 Offline#nwxtech7 Grégory Le Garec - HTML5 Offline
#nwxtech7 Grégory Le Garec - HTML5 Offline
 
#nwxtech6 Olivier Martineau - Les démons en PHP
#nwxtech6 Olivier Martineau - Les démons en PHP#nwxtech6 Olivier Martineau - Les démons en PHP
#nwxtech6 Olivier Martineau - Les démons en PHP
 
#nwxtech6 Mickaël Deffontaine - Drupal API Form
#nwxtech6 Mickaël Deffontaine - Drupal API Form#nwxtech6 Mickaël Deffontaine - Drupal API Form
#nwxtech6 Mickaël Deffontaine - Drupal API Form
 
#nwxtech6 Frédéric Bisson - SVG pour le web
#nwxtech6 Frédéric Bisson - SVG pour le web#nwxtech6 Frédéric Bisson - SVG pour le web
#nwxtech6 Frédéric Bisson - SVG pour le web
 
#nwxtech6 Frédéric Bisson - SVG pour le web
#nwxtech6 Frédéric Bisson - SVG pour le web#nwxtech6 Frédéric Bisson - SVG pour le web
#nwxtech6 Frédéric Bisson - SVG pour le web
 
FlexRox
FlexRoxFlexRox
FlexRox
 
Julien Nicolas - Comment coucher avec son intégrateur en 5 étapes - #nwxwd
Julien Nicolas - Comment coucher avec son intégrateur en 5 étapes - #nwxwdJulien Nicolas - Comment coucher avec son intégrateur en 5 étapes - #nwxwd
Julien Nicolas - Comment coucher avec son intégrateur en 5 étapes - #nwxwd
 
Julien Verhaeghe - API REST : Le module Services de Drupal - Drupal Meetup Ro...
Julien Verhaeghe - API REST : Le module Services de Drupal - Drupal Meetup Ro...Julien Verhaeghe - API REST : Le module Services de Drupal - Drupal Meetup Ro...
Julien Verhaeghe - API REST : Le module Services de Drupal - Drupal Meetup Ro...
 
Frédéric Bisson - 8 ans de Drupal - Drupal Meetup Rouen #3
Frédéric Bisson - 8 ans de Drupal - Drupal Meetup Rouen #3Frédéric Bisson - 8 ans de Drupal - Drupal Meetup Rouen #3
Frédéric Bisson - 8 ans de Drupal - Drupal Meetup Rouen #3
 
Conférence #nwx2014 - Nicolas Saillard - Agilité en SSII
Conférence #nwx2014 - Nicolas Saillard - Agilité en SSIIConférence #nwx2014 - Nicolas Saillard - Agilité en SSII
Conférence #nwx2014 - Nicolas Saillard - Agilité en SSII
 
Conférence #nwx2014 - Maxime Mauchaussée - Partager du code maintenable et év...
Conférence #nwx2014 - Maxime Mauchaussée - Partager du code maintenable et év...Conférence #nwx2014 - Maxime Mauchaussée - Partager du code maintenable et év...
Conférence #nwx2014 - Maxime Mauchaussée - Partager du code maintenable et év...
 
Conférence #nwx2014 - Ivan Dalmet - Ergonomie web, les bases pour tous
Conférence #nwx2014 - Ivan Dalmet - Ergonomie web, les bases pour tousConférence #nwx2014 - Ivan Dalmet - Ergonomie web, les bases pour tous
Conférence #nwx2014 - Ivan Dalmet - Ergonomie web, les bases pour tous
 
Conférence #nwx2014 - Thibaud Juin - Varnish, accélérateur web
Conférence #nwx2014 - Thibaud Juin - Varnish, accélérateur webConférence #nwx2014 - Thibaud Juin - Varnish, accélérateur web
Conférence #nwx2014 - Thibaud Juin - Varnish, accélérateur web
 
Conférence #nwxtech5 : Présentation du hacker space Jeanne d'Hack par Samir C...
Conférence #nwxtech5 : Présentation du hacker space Jeanne d'Hack par Samir C...Conférence #nwxtech5 : Présentation du hacker space Jeanne d'Hack par Samir C...
Conférence #nwxtech5 : Présentation du hacker space Jeanne d'Hack par Samir C...
 
Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier
Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercierConférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier
Conférence #nwxtech5 : HTML5 Mobile avec Sencha Touch par Arnaud lemercier
 
Conférence #nwxtech5 : Drupal et OpenLayers par Frédéric Bisson
Conférence #nwxtech5 : Drupal et OpenLayers par Frédéric BissonConférence #nwxtech5 : Drupal et OpenLayers par Frédéric Bisson
Conférence #nwxtech5 : Drupal et OpenLayers par Frédéric Bisson
 
Conférence #nwxtech5 : Django, du framework pour les perfectionnistes au pony...
Conférence #nwxtech5 : Django, du framework pour les perfectionnistes au pony...Conférence #nwxtech5 : Django, du framework pour les perfectionnistes au pony...
Conférence #nwxtech5 : Django, du framework pour les perfectionnistes au pony...
 
Conférence #nwxtech5 : Introduction à Backbone.js par Hugo Larcher
Conférence #nwxtech5 : Introduction à Backbone.js par Hugo LarcherConférence #nwxtech5 : Introduction à Backbone.js par Hugo Larcher
Conférence #nwxtech5 : Introduction à Backbone.js par Hugo Larcher
 
Conférence #nwxtech5 : Selenium WebDriver 2 par Romain Louvet
Conférence #nwxtech5 : Selenium WebDriver 2 par Romain LouvetConférence #nwxtech5 : Selenium WebDriver 2 par Romain Louvet
Conférence #nwxtech5 : Selenium WebDriver 2 par Romain Louvet
 

Conférence #nwxtech4 : Responsive Web Design et Préprocesseurs CSS par Benjamin Quédeville

  • 1. RESPONSIVE DESIGN & LESS CSS APPLIQUÉS AU MOTEUR DE TEMPLATE DE 42STORES mardi 23 octobre 12
  • 2. POINT DE DÉPART •2 conf tech sur responsive et less css • 40 thèmes (+) ou (-) standardisés •5 feuilles de styles / thème •1 thème dédié smartphone mardi 23 octobre 12
  • 4. PASSAGE AU RESPONSIVE • choix du layout fluide • passage en % / taille en EM / position absolute et % • développement des média queries • minimiser les queries , test multi device (écrans normaux, mobiles classiques, mobiles retina, tablettes) • double CSS pour IE 7/8 • transformation menu déroulant en select mardi 23 octobre 12
  • 5. MEDIA QUERIES ECRANS mardi 23 octobre 12
  • 6. MEDIA QUERIES IPHONE 4 mardi 23 octobre 12
  • 8. PASSAGE AU LESS mardi 23 octobre 12
  • 9. Découpe du CSS & ré-écriture complète mardi 23 octobre 12
  • 10. Compilation (php) 1 seul fichier CSS <link type="text/css" rel="stylesheet" href="/styles/main.css" /> mardi 23 octobre 12
  • 11. AVANTAGES LESS LES VARIABLES mardi 23 octobre 12
  • 12. AVANTAGES LESS LES FONCTIONS mardi 23 octobre 12
  • 13. RESPONSIVE DESIGN + LESS CSS = 50 JOURS HOMME + AVENIR RADIEUX mardi 23 octobre 12