webleads-tracker

Formation sass, less et grunt - Medialibs

Coder avec les préprocesseurs CSS et automatiser les tâches avec Grunt

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 : Avancé

Durée : 14 heures (2 jours)

Type : Formation collective
Formation exclusive

Profil : Intégrateurs et développeurs

Tarifs : Formation collective 998€ HT
Formation exclusive 1400€ HT


Demander des informations

 

 

target-icon Objectifs

  • Maîtriser les concepts de l'OOCSS
  • Appréhender les concepts de Less et Sass
  • Organiser efficacement son environnement de travail et son code
  • Mettre en place une méthodologie de performance web
  • Gagner en autonomie et en productivité
 
 

check-iconPré-requis

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

list icon blueProgramme

Partie 1: L'intégration avec 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 et préparer sa mise en page

Introduction : Less

  • Présentation et objectifs
  • Les variables, les opérations
  • Les règles imbriquées et pseudoclasses
  • Les mixins
  • Travailler avec des mixins paramètrés
  • Travailler avec les mixins et patterns matching
  • Les fonctions natives

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

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

Atelier : Utiliser les composants "bourbon" sur son site

Partie 2 : Automatisation de tâches

Introduction : Pensez DRY

  • C'est quoi DRY ?
  • Intérêts et objectifs
  • Itération et agilité dans vos thèmes graphiques
  • La gestion de versions avec git

Atelier : Valider son environnement de travail

Les frameworks Foundation et Bootstrap

  • Etats des lieux
  • Customize
  • Master Github

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
  • Gestion de versioning avec Git

Atelier : Installer GruntsJS et des packages à son projet

Travaux pratique

  1. Créer une landing page avec Foundation
  2. Utiliser les mixins de SASS
  3. Intégrer des tabs avec refills
  4. Intégrer des images responsives
  5. Traiter les opérations avec GruntJs
 
 

Informations et inscription à la formation :
"Les préprocesseurs CSS : Sass, Less et GruntJs"