Formation bulma
| € HT / personne |
| 2 jours (14 heures) |
Présentation
Bulma est un framework CSS moderne basé sur Flexbox et les CSS Variables, conçu pour créer des interfaces responsives sans imposer de JavaScript.
Notre formation Bulma vous apprendra à maîtriser la mise en page mobile-first, l’usage des composants (grille, formulaires, cartes, navigation, modales), la personnalisation via Dart Sass et thèmes, ainsi que l’industrialisation du build (purge, critical CSS).
Vous verrez comment intégrer Bulma dans des projets React, Vue ou Angular, construire un design system réutilisable et optimiser performance et accessibilité.
À l’issue de la formation, vous serez en mesure de livrer des interfaces robustes, accessibles et scalables, en tirant parti des nouveautés de Bulma.
Objectifs
- Installer et configurer Bulma (CDN / npm) et structurer un projet
- Maîtriser grille, helpers et composants clés
- Personnaliser via Dart Sass et CSS Variables (thèmes)
- Intégrer avec React, Vue ou Angular
- Optimiser performance et accessibilité pour la production
Public visé
- Développeurs front-end
- Développeurs full-stack
Pré-requis
- Bases en HTML et CSS
- Notions en JavaScript et outillage front (npm, bundler)
Programme de notre formation Bulma
[Jour 1 – Matin]
Fondamentaux de Bulma et prise en main
- Positionnement de Bulma (framework CSS-only)
- Installation : CDN, npm/yarn, structure de projet
- Grille et layout responsive (mobile-first)
- Couleurs, typographie, helpers d’espacement
- Personnalisation rapide via CSS Variables
- atelier pratique : page d’accueil responsive (hero/sections/footer)
[Jour 1 – Après-midi]
Composants essentiels pour les interfaces
- Boutons, tags, breadcrumb, cards, images
- Formulaires : champs, états, validation
- Navbar & navigation (burger, menus, dropdowns)
- Listes, tables, media object
- Bonnes pratiques accessibilité et sémantique
- atelier pratique : formulaire complet + navbar responsive
Patterns de mise en page et composants interactifs
- Sections, containers, tiles, level, hero
- Modales, tabs, accordéons (patterns JS légers)
- Helpers d’affichage, alignements Flexbox
- Conventions de nommage BEM-like
- Optimisation Lighthouse
- atelier pratique : page produit avec modale et onglets
[Jour 2 – Matin]
Personnalisation avancée & thématisation
- Dart Sass, structure SCSS, surcharge de variables
- CSS Variables et thèmes (clair/sombre), préfixe de classes
- Ajustement des espacements, radius, shadows, fonts
- Approche design system et tokens
- Import modulaire, purge et réduction du bundle
- atelier pratique : création d’un thème et bascule dark/light
[Jour 2 – Après-midi]
Intégration avec frameworks JS & architecture front
- Intégrer Bulma dans React / Vue / Angular
- Organisation scalable : composants UI réutilisables
- Tests visuels et Storybook
- Renforcer l’accessibilité (focus trap, ARIA)
- Micro-interactions et état côté client
- atelier pratique : mini Design System Bulma + Storybook
Industrialisation & bonnes pratiques de production
- Linting, conventions, intégration CI/CD
- Budgets de performance, purge CSS, critical CSS
- Compatibilité navigateurs & tests responsive
- Documentation et starter kits
- Migration v1 : points d’attention
- atelier pratique : build optimisé et mise en production
Pour aller plus loin
Formation Kotlin Avancé
Formation Spring Reactor
Formation Kotlin avec Android
Autour du sujet
Langues et Lieux disponibles
Langues
- Français
- Anglais / English
Lieux
-
France entière
- Paris
- Lille
- Reims
- Lyon
- Toulouse
- Bordeaux
- Montpellier
- Nice
- Sophia Antipolis
- Marseille
- Aix-en-Provence
- Nantes
- Rennes
- Strasbourg
- Grenoble
- Dijon
- Tours
- Saint-Étienne
- Toulon
- Angers
-
Belgique
- Bruxelles
- Liège
-
Suisse
- Genève
- Zurich
- Lausanne
-
Luxembourg
Témoignages
⭐⭐⭐⭐⭐ 4,8/5 sur Google My Business. Vous aussi, partagez votre expérience !
Afficher tous les témoignages
⭐⭐⭐⭐⭐ 4,8/5 sur Google My Business. Vous aussi, partagez votre expérience !
Noter la formation
| € HT / personne |
| 2 jours (14 heures) |
UNE QUESTION ? UN PROJET ? UN AUDIT DE CODE / D'INFRASTRUCTURE ?
Pour vos besoins d’expertise que vous ne trouvez nulle part ailleurs, n’hésitez pas à nous contacter.
ILS SE SONT FORMÉS CHEZ NOUS
