Responsive flexbox & grid

Partie 1 : Flexbox

Entraînement

Pour se familiariser avec les différentes propriétés : Flexbox Froggy

TP : à vous !

Le but de l'exercice est de reproduire une célèbre carte à jouer en utilisant les propriétés flexbox. Voici le modèle :

Étape 0 : Configuration VSCode

• Cloner ce repository : le dossier tp/pokemon sera la racine de votre TP.
• Créer une branche de travail à votre nom : git checkout -b bcalou
• Installer le plugin Prettier
  • Dans les options :
    • Cocher "Format on save"
    • Régler "Default formatter" sur "...prettier..."
  • Vérifier le bon fonctionnement sur les fichiers HTML et CSS (à la sauvegarde, le code est-il reformaté ?)
• Installer le plugin Live Server
  • Vérifier qu'un fichier HTML peut-être ouvert avec le bouton "Go Live" en bas à droite (auto-refresh du navigateur)

Étape 1 : Les fondations (HTML sauce BEM)

• Comprendre la méthodologie BEM : ici (français) ou là
• Déterminer quels sont les blocs constituant la carte (une demi-douzaine, selon le choix de découpage), et leur donner un nom simple
• Écrire le HTML correspondant, sans CSS pour le moment
  • Les images sont dans le dossier assets/img

Résultat approximatif à cette étape :

Attention à vérifier la présence de la balise meta viewport pour un bon dimensionnement sur mobile !

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

• Solliciter une vérification de ma part, attendre la correction ou continuer si tout se passe bien !
• git commit avant de passer à la suite

Étape 2 : Styling SCSS

• Afin de pouvoir utiliser SCSS :
  • Dans le dossier de travail, transformer votre projet simple en projet npm avec npm init
  • Installer parcel avec npm install parcel --save-dev
  • Dans package.json, ajouter un script "serve": "parcel index.html"
  • Lancer npm run serve. Parcel build votre site et l'ouvre dans le navigateur, sur localhost.
• Ajouter un fichier styles.scss à votre projet et l'importer à partir du HTML. Parcel s'occupera de la transformation en CSS.
• Ajouter un fichier reset.scss à votre projet contenant le reset CSS classique, sans l'importer dans le HTML.
• Dans le fichier styles.scss, utiliser un import SASS pour importer le fichier reset.scss.

Dans vos projets, toujours inclure les deux règles CSS suivantes (rappel sur box-sizing) :

* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

Propriétés "interdites" pour cet exercice :

• width
• height
• float
• position
• transform
• display autre que display: flex

Votre but est maintenant de reproduire la carte sur un écran de type iPhone5 (320*568). Il vous appartient de pousser la ressemblance avec l'original au maximum, mais voici un exemple :

• En accord avec la convention BEM :
  • Utilisez quasiment exclusivement des sélecteurs de classe
  • Évitez au maximum les imbrications. SASS sera utile, mais surtout pour la suite.
• Solliciter une vérification de ma part, attendre la correction ou continuer si tout se passe bien !
• git commit avant de passer à la suite

Étape 3 : Mode paysage

On souhaite adapter la carte à un mobile de la même taille en mode paysage (568*320), autrement dit lorsque la largeur est plus grande que la hauteur. Pour ce faire, vous pouvez ajouter une mixin SASS en début de fichier :

@mixin landscape {
  @media (min-aspect-ratio: 1/1) {
    @content;
  }
}

Grâce à cette mixin, vous pouvez écrire :

.selector {
  color: red;

  @include landscape {
    color: blue;
  }
}

Cela permet d'inclure les variations au plus proche du sélecteur de base, au lieu de tout écrire en fin de fichier, ce qui rend le code plus maintenable / lisible.

Voici le nouvel objectif à atteindre :

• Solliciter une vérification de ma part ou attendre la correction
• git commit pour finir

Étape 4 : Rendu

Rendez votre travail en créant une pull request de votre branche de travail vers la branche master de ce repository.

Partie 2 : Grid

Coming soon...

Ressources

• En cas de besoin : Exercices HTML/CSS
• Méthode BEM

Flexbox

• Reférence : CSS Tricks Guide
• Outil : Flexulator, calculateur de flexbox
• Entraînement : Flexbox Froggy

Grid

• Reférence : CSS Tricks Guide
• Outil : Grid generator
• Entraînement Grid Garden
• Exemple : grid-auto-flow: dense
• Le futur Subgrid