Manipuler les frameworks Bootstrap ou Foundation
Optimisez vos intégrations en utilisant les frameworks Foundation ou Bootstrap et capitalisez sur la performance web avec les préprocesseurs CSS (initiation)
Détail de la formation
Niveau : Intermédiaire
Durée : 14 heures (2 jours)
Type : Formation collective
Formation exclusive
Profil : Intégrateurs et développeurs
Tarifs : Formation collective 998€ HT
Formation exclusive 1600€ HT
Objectifs
- Mieux maîtriser la création de sites adaptatifs (Responsive Web Design)
- Utiliser les frameworks Foundation et Bootstrap
- Mettre en place une méthodologie de performance web
- Découvrir l'interaction front-end avec les préprocesseurs CSS
Pré-requis
- Connaissances en langages HTML & CSS
- Comprendre la logique de l'intégration web
Programme
Partie 1 : Les framework "copier-coller"
Introduction : framework 2.0
- Pourquoi utiliser un framework CSS ?
- Principe de structuration et d'intégration
- Intérêts et objectifs
- Système de grille
- Vers le responsive web design (RWD)
- Mise en forme structurelle et textuelle
- Présentation de quelques templates
Atelier :
Bootstrap
- Bootstrap : présentation, apports, exemples
- Bootstrap et le Responsive Web Design (RWD)
- Cohabitation de Bootstrap avec les autres frameworks javascript : jQuery, ExtJS,...
- Grille Bootstrap, templates de base et layouts
- Composants et classes CSS de base
- Mécanisme de RWD (classes CSS / device)
- Documentation, liens utiles
- Glyphicons Vs FontAwesome
Atelier : Inclure Bootstrap dans un projet, utiliser une première grille flexible
Les composants CSS Bootstrap
- Typographie et liens
- Eléments de formulaires, contrôles supportés
- Boutons : options, tailles, état
- Images et icônes : éviter les débordements
- Navigation
- Breadcrumb ( fil d'ariane )
- Pagination: contenus longs
- Badge
- Barre de progression
- Alertes
Atelier : Utilisation de classes bootstrap dans des pages web
3/ Utiliser les composants Bootstrap
- Barres de navigation : tabs, pills, justified nav
- Menus déroulants : formulaires, boutons, positionnement
- Breadcrumb (fil d'ariane)
- Pagination
- Badges
- Alertes
- Barres de progression : labels, animations
- Media object : slider, carousel
- List group
Atelier : Multiples exemples d'intégration de composants Bootstrap
Partie 2 : Travaux pratique et performance
4/ Bootstrap & LESS
- Intérêt de LESS
- Customize Less Variables
- Bootstrap Less Master
- Environnement pour compiler, compresser, minifier LESS/ CSS/ JS
Atelier : Intégration d'éléments LESS à son projet
5/ Manipuler Bootstrap en Javascript
- Mise en place de transitions
- Fenêtres modales : types, tailles
- Gestion des menus déroulants
- Tabulations
- Sliders
- Personnalisation de Bootstrap
Atelier : Intégration d'interactions et de transitions
6/ Automatiser ses tâches (DRY)
- A la découverte de NodeJs & Grunt
Atelier : Trouver le bon eco-system (mode développement vs mode Production)
7/ Ressources
- Liens utiles
- Ressources
Questions / Réponses