Ressources Magic Makers

Framework CSS

C'est quoi un framework CSS ?

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.

Comment utiliser Bulma ?

Tu peux suivre la vidéo pour découvrir comment utiliser Bulma ou bien regarder les explications écrites ci-dessous 🙂

Lier Bulma

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 !

La doc Bulma

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.

Utiliser la doc

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.

  • Pour ajouter un titre :
  • Tu peux ensuite ajouter autant d’éléments que tu le souhaites. Pour ajouter un bouton et une image ronde par exemple : 
  • Pour organiser notre page, on va pouvoir utiliser les éléments layout et columns : 

À toi de choisir les éléments qu’il te faut et organiser ta page comme tu le souhaites ! 

Template exemple pour prendre en main

Voici un template exemple créé avec Bulma. Remixe le projet et essaye de le modifier ! Change l’organisation de la page, les couleurs des boutons, la taille des images, etc.

Clique sur l’image pour ouvrir le projet et le remixer !