Aller au contenu

Mon premier framework

L'objectif ici est simplement d'installer un cadriciel (framework) et d'en faire usage.

Consignes

  • Ouvrir digger.html dans le navigateur
  • Dans digger.html, ajouter ces 3 lignes dans le <head> pour installer le framework Milligram : 
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/milligram@1.4.1/dist/milligram.min.css">

  • Sauvegarder, puis recharger le navigateur

    Observation

    Les liens utilisés pour installer le framework proviennent de ce qu'on appelle un CDN.

    Un CDN, c'est un réseau d'ordinateurs situés un peu partout dans le monde qui distribuent les mêmes fichiers. Ça peut servir à tester rapidement un framework par exemple 😜 C'est pratique parce qu'on n'a pas besoin de télécharger manuellement quoi que ce soit, c'est directement en ligne.

Usage du cadriciel

Le pouvoir d'un framework CSS réside dans ses classes CSS préfaites.

À chaque étape, observez le résultat.

  • Ajouter la classe container sur le <main>
  • Ajouter la classe row à l'enfant direct de <main>, puis ajouter la classe column aux enfants de .row
  • Ajouter la classe button sur le lien <a>
  • Ajouter une deuxième classe (row-center) à la div row.

Réflexion

Vous devriez avoir ce résultat : . L'idée ici est simplement de comprendre le concept d'un Framework CSS afin d'avoir une base de comparaison pour la suite.

Milligram spécifiquement n'est pas important à connaître. Vous pouvez d'ailleurs l'oublier pour toujours.

Finale

  • Dans GitHub Desktop, effectuer un commit
  • Pousser votre commit (push)

Vous venez de remettre votre premier devoir Classroom50 💅