Home
CS POK MON Projets

MON 1.2 - Front Web 2

Tags :
  • MON
  • 2023-2024
  • temps 1
  • Tailwind
  • CSS
  • HTML
Auteurs :
  • Schultz Mathis

Utilisation de TailwindCSS pour mettre en forme une page Web

Promotions/2023-2024/Schultz Mathis/MON de Schultz Mathis/MON 1.2 - Front Web 2

Introduction

Le but de ce MON est de réaliser une première page à partir de TailwindCSS.

Mon précédent MON détaille l'installation de l'environnement de travail, ainsi le code que je vous partage ne peut fonctionner sans réaliser préalablement l'installation.

Prérequis

Avant de s'intéresser à TailwindCSS, il est important de se former au langage html et au langage CSS, je vous renvois vers mon MON précédent qui donne des ressources pour apprendre le HTML/CSS et pour installer un environnement de travail.

Table des matières

Une première page

Le but de ce paragraphe est de faire la mise en page d'une première page web, établir quelques éléments à placer ainsi que de partitionner la page.

Image du site sur fond clair

Il est facile de passer d'un site clair à un site sombre ! il suffit pour de définir les couleurs à utiliser en dark mode, dans mon cas, vu le peu d'élément j'ai défini individuellement les couleurs à utiliser pour le mode sombre et pour le mode clair mais il est possible de modifier le fichier tailwind.config.js pour que les modifications opère sur l'ensemble du site.

Voici le résultat en ajoutant simplement "dark:text-bleu" ou "dark:bg-slate-100" pour modifier le text ou le fond en mode sombre.

Image du site sur fond sombre

Choisir son style

Le but de ce paragraphe est d'expliquer comment choisir sa charte graphique afin de construire sa page web. Pour cet exemple on va utiliser la charte graphique de Centrale.

  1. Choisir ses couleurs

Choisir des couleurs est extrêmement simple avec TailwindCSS, il suffit de ce rendre dans le dossier tailwind.config.js et de rajouter les couleurs que l'on souhaite utiliser dans le thème :

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['*.html'],
  theme: {
    colors: {
      'bleu': '#000f9f',
      'gris': '#4d5f80',
      'gris_claire': '#eff0f4',
    },
    extend: {},
  },
  plugins: [],
}

Ici, j'ai implémenter le bleu de Centrale ainsi que les deux gris majoritairement utilisé.

  1. Choisir des typographies :

Il existe plusieurs méthodes pour ajouter des typographies :

Image du site permettant de télécharger les typographie

@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed&family=Barlow:wght@100&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    html {
        font-family: Barlow;
    }
}
    fontFamily: {
      'custom': ['Barlow'],
    },

Voilà le résultat avec la charte de Centrale : une typographie Barlow et les nuances de bleus et de gris :

Image du site avec la charte de Centrale

Un questionnaire

L'idée de cette partie est de développer les différents outils pour mettre en forme un questionnaire. L'objectif est d'avoir :

Cette partie ne propose pas de mettre en oeuvre la partie Java, ainsi bien que les boutons ou case puissent être rempli, il n'y a que la forme qui n'est créé.

Un champ à remplir

<div class="mb-4">
          <label for="inputField" class="block text-gray-700 font-bold mb-2">Text Field Label</label>
          <input
            type="text"
            id="inputField"
            name="inputField"
            class="w-full px-3 py-2 border rounded-lg text-gray-700 focus:outline-none focus:border-blue-500"
            placeholder="Enter text"
          />
        </div>

Une question à choix multiple

<div class="mb-4">
          <label for="selectField" class="block text-gray-700 font-bold mb-2">Select Field Label</label>
          <select
            id="selectField"
            name="selectField"
            class="w-full px-3 py-2 border rounded-lg text-gray-700 focus:outline-none focus:border-blue-500"
          >
            <option value="option1">Option 1</option>
            <option value="option2">Option 2</option>
            <option value="option3">Option 3</option>
          </select>
        </div>

Une case à cocher

<div class="mb-6">
          <label class="block text-gray-700 font-bold mb-2">
            <input type="checkbox" class="mr-2 leading-tight" /> Checkbox Label
          </label>
          <label class="block text-gray-700 font-bold">
            <input type="radio" class="mr-2 leading-tight" name="radioGroup" value="radioOption1" /> Radio Option 1
          </label>
          <label class="block text-gray-700 font-bold">
            <input type="radio" class="mr-2 leading-tight" name="radioGroup" value="radioOption2" /> Radio Option 2
          </label>
        </div>

Un bouton soumettre

        <div class="flex items-center justify-between">
          <button
            type="submit"
            class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:bg-blue-600"
          >
            Submit
          </button>
        </div>

Image du site avec un questionnaire simple

Outils complémentaires

Ce qui est difficile lorsque l'on souhaite apprendre un nouveau langage (HTML ou CSS) est de connaître les fonctions afin de pouvoir réaliser notre site, il est donc nécessaire d'expérimenter, de découvrir des fonctionnalités même si elle ne servent pas encore. Il faut comprendre la structure. Pour cela je recommande donc d'utiliser différentes ressources :

Conclusion

Tailwind permet facilement de définir l'environnement graphique de notre site internet, ce n'est pas la seule solution disponible sur le marché, bootstrap est très répandu aussi.

Liens utiles