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

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