Afficher la version standard du site

Coder avec les préprocesseurs CSS et Grunt : 23 mars 2016

Décuplez vos compétences en intégration graphique en exploitant la puissance des langages Less, Sass. Puis automatisez vos tâches avec Grunt et NodeJs.

Détail de la formation

Niveau : Intermédiaire à avancé

Durée : 7 heures (1 jour)

Type : Formation collective

Profil : Cette formation d'une journée s'adresse avant tout aux intégrateurs et développeurs souhaitant décupler leurs compétences en intégration web.

Tarifs : Formation collective 499€ HT


Demander des informations

 

 

Objectifs

  • Maîtriser les concepts de l'OOCSS
  • Appréhender les concepts de Less ou Sass
  • Organiser efficacement son environnement de travail et son code
  • Gagner en autonomie et en productivité
 
 

Pré-requis

  • Bonnes connaissances en langages HTML & CSS
  • Avoir des connaissances en javascript
 

Programme (1 jour)

L'intégration avec l'OOCSS

 

Introduction : Oriented Object CSS

  • Etats des lieux : CSS 2.1, HTML5
  • Introduction à l'OOCSS
  • Que sont les langages Less et Sass ?
  • Quels sont les intérêts des préprocesseurs ?
  • Mise en place de l'environnement de développement

Atelier : Configurer son IDE

Introduction : Sass

  • Présentation et objectifs
  • Les différentes syntaxes : Sass vs Scss
  • L'imbrication, les variables et les sélecteurs
  • Les conditions, boucles et fonctions mathématiques
  • Les pièges à éviter

Atelier : Créer une première page à l'aide de Sass

Utilisation avancée : Sass

  • Les mixins et l'héritage @extend
  • Organisation d'un projet : partials et import
  • Intégrer des media queries dans Sass
  • Les fonctions de couleur
  • Déboguer les CSS générées
  • Présentation de SMACSS et de BEM
  • À la découverte de Source Maps

Atelier : Mettre en forme un élément html

Les frameworks : compass, bourbon

  • Intérêts et objectifs
  • Le point sur compass
  • La librairie bourbon (mixins)
  • La librairie Neat (girds)
  • La librairie Bitters (variables)
  • La librairie Refills (patterns)
  • Plugins complémentaires

Comment automatiser vos tâches ?

  • Etats des lieux des frameworks "DRY"
  • Javascript côté serveur, pourquoi et comment ?
  • Intérêts et objectifs de GruntJS
  • Introduction à NodeJs
  • Le package manager "NPM"
  • Les packages Gulp, bower, yeoman

Atelier : Installer NodeJs à son environnement de travail

La gestion de tâches avec GruntJs

  • Installation de GruntJs
  • L'invite de commande
  • Installations de packages
  • Open, Livereload
  • Compilation Less/Sass
  • Compression & minification CSS
  • Compression & minification JS
  • Gestion des tailles d'images
  • On écoute et on exécute avec Watch
  • Déploiement FTP


Retrouvez toutes nos formations

 
 

Informations et inscription à la formation collective du 23 mars 2016