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
- 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é
- Bonnes connaissances en langages HTML & CSS
- Avoir des connaissances en javascript
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