Un framework CSS est un outil qui comprend des bouts de CSS déjà programmés. On va pouvoir réutiliser ces morceaux de codes pour créer rapidement un site avec un beau rendu.
Rappel : Le CSS s’applique au HTML pour mettre en forme et organiser le contenu du site.
Il existe plusieurs frameworks disponibles. Nous allons utiliser le framework Bulma.
Tu vas ainsi pouvoir récupérer des layouts (organisation de la page), des éléments comme des boutons déjà mis en forme ou encore des composants plus complexes pour créer ton propre site. Le framework utilise des class qui sont programmées pour un rendu particulier. En utilisant cette class dans ton projet, tu vas ainsi pouvoir réutiliser ce rendu.
Tu peux suivre la vidéo pour découvrir comment utiliser Bulma ou bien regarder les explications écrites ci-dessous 🙂
On commence par lier le framework à notre projet. Dans ta page HTML, tu vas simplement copier la ligne suivante dans les balises <head></head> :
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css">
Tu peux maintenant utiliser les class de Bulma pour créer ton site !
Tout va se passer sur la documentation de Bulma.
Tu trouveras sur la doc des exemples de rendu avec le code associé. Quand un rendu te plaît, tu n’as qu’à le copier-coller dans ta page HTML et personnaliser l’élément !
La doc est divisée en plusieurs parties. Avant de te lancer, prends le temps de survoler toutes les parties pour avoir une idée des possibilités.
Pour comprendre comment naviguer parmi ces ressources, voici la méthodologie pour créer une première page.
D’après le wireframe que tu as créé, tu vas ajouter les éléments dont tu as besoin et les organiser comme tu le souhaites avec Bulma, avant d’ajouter le contenu du site.
À toi de choisir les éléments qu’il te faut et organiser ta page comme tu le souhaites !