🦇 📑 🎰 Pensez comme un développeur front-end ⛺️ 🐡 🧑🏿‍🤝‍🧑🏾

Bonjour Habr! Nous avons commencé un nouveau flux du cours de développeur Frontend , et je partage avec vous une petite liste de contrôle pour le frontend sur la façon de penser lors de la création d'une mise en page, les questions à vous poser. N'hésitez pas à le mettre en signet si vous souhaitez indiquer à votre ~~Padawan~~ Jun de quel côté aborder la conception de la mise en page, mais ne voulez pas perdre votre temps à expliquer des choses relativement simples.

J'ai demandé sur Twitter sur quoi d'autre devrais-je écrire en CSS? L'une des suggestions qui a attiré mon attention est de réfléchir à la mise en œuvre d'une mise en page CSS. Cela implique de réfléchir à des solutions possibles et de nombreuses questions pour bien concevoir le design. Ici, je vais vous montrer mon approche pour réfléchir à une nouvelle mise en page et comment vous pouvez appliquer les mêmes étapes à votre travail. Tu est prêt? Plongeons-nous.

Détails sur le côté

La première chose que je fais habituellement est de remettre les détails de conception pour plus tard. Cela signifie que je met en évidence les parties principales d'une mise en page particulière et que je commence à y penser en premier. Je sais que les détails sont importants, mais c'est temporaire afin que nous puissions nous concentrer d'abord sur les détails de haut niveau. Considérez l'interface utilisateur suivante:

Dans cette construction, nous avons les éléments suivants:

Titre / Navigation.
Section principale.
Comment ça fonctionne.

Il peut être tentant de commencer à penser d'abord aux petits détails, pas à un niveau d'abstraction élevé. Si on me demandait de simplifier visuellement l'approche, je dirais qu'un développeur front-end devrait porter des lunettes qui permettent uniquement de voir les éléments de mise en page de haut niveau, comme ceci:

Notez qu'avec des lunettes, vous ne pouvez voir que les composants d'interface utilisateur de haut niveau. Cette approche vous aidera à réfléchir à la manière d'organiser les composants, au lieu de penser aux petits morceaux de chaque composant. Voici comment je pense:

En-tête pleine largeur: il semble que l'en-tête couvre toute la largeur de la fenêtre et que son contenu à l'intérieur du wrapper est illimité.
Le contenu de l'élément hero est centré horizontalement et notez qu'il doit être défini sur max-width (le paragraphe comporte deux lignes).
Comment cela fonctionne: Il s'agit d'une disposition à 4 colonnes, la section dans son ensemble est enveloppée.

Maintenant, quand je veux travailler sur le code, je fais un prototype rapide juste pour voir les progrès rapidement.

<header></header>

<section class="hero">
  <!-- A div to constraint the content -->
  <div class="hero__content"></div>
</section>

<div class="wrapper">
  <!-- 4-columns layout -->
  <section class="grid-4"></section>
</div>

Puisque nous avons une section à 4 colonnes, j'utiliserai une grille CSS pour cela. C'est l'application parfaite pour elle.

.wrapper {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  max-width: 1140px;
}

.hero__content {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

C'était un exemple de réflexion rapide avec des lunettes. Jusqu'à présent, je n'ai même pas pensé au design réactif. J'ai quelques questions sur les détails de certains composants, mais je ne les approfondirai pas maintenant. Lisez à ce sujet dans la section «plongez dans les détails» à la fin de l'article. Maintenant que vous avez l'idée, je vais vous donner quelques exemples supplémentaires de réflexion de haut niveau afin que vous puissiez mieux la comprendre.

Page d'article

Dans cet exemple, nous avons une mise en page d'article. Voici l'interface utilisateur qui contient:

Titre.
Titre de la page.
Aperçu de l'image de l'article.
Le contenu de l'article.
Panneau latéral (à droite).

Maintenant que vous avez une idée de ce à quoi ressemble le design, mettons des lunettes pour que nous ne puissions voir que les éléments de haut niveau.

Les voici:

En-tête de site qui couvre toute la largeur de la page.
Titre de la page contenant le titre de l'article et sa description, le contenu est aligné à gauche en utilisant max-width.
Une disposition à deux colonnes contenant les éléments de la barre principale et latérale .
Contenu interne d'un article centré horizontalement et de largeur maximale .

Titre de la page d'article

Il n'est pas nécessaire d'appliquer une méthode de mise en page ici. Une simple largeur maximale fera l'affaire. Veillez à ajouter un remplissage horizontal pour empêcher les bords de l'élément de coller aux bords dans les petites fenêtres.

.page-header {
  max-width: 50rem;
  padding: 2rem 1rem;
}

Article - base et barre latérale

L'élément principal (principal) de l'article occupe toute la largeur de la fenêtre moins la largeur de la barre latérale. En règle générale, la barre latérale doit avoir une largeur fixe. Une grille CSS est idéale pour cela.

.page-wrapper {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 800px) {
  grid-template-columns: 1fr 250px;
}

Le contenu interne de l'article doit être limité à l'intérieur de l'emballage.

.inner-content {
  max-width: 50rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

Maintenant que vous avez une idée des décisions de haut niveau à prendre lors de la création de votre mise en page, l'étape suivante consiste à penser à travailler avec chaque section en termes de conception.

Plonger dans les détails

Comment ça fonctionne

Dans le premier exemple d'article, j'ai dit que nous entrerons dans les détails plus tard. Ce moment est venu.

Haut-parleurs

Avons-nous des cas où le nombre d'étapes peut être inférieur ou supérieur? Si oui, comment travailler dans une telle situation?
Les colonnes doivent-elles avoir la même hauteur, en particulier lorsque la carte contient du texte très long?

Titre

Avons-nous besoin de garder la section d'en-tête de côté? Ou y a-t-il des moments où il devrait occuper toute la largeur?

Conception adaptative

Dans quelle situation devez-vous vous plier pour redimensionner les enfants d'une section? Avons-nous une sorte de déclencheur repliable? Si oui, quel est ce déclencheur?

Voici quelques situations possibles avec cette section. Qu'est-ce que tu penses? En tant que développeur front-end, vous devez tenir compte de ces cas extrêmes. Il ne s'agit pas seulement de créer une interface utilisateur sans prendre en compte ces détails cachés.

Je n'entrerai pas dans les détails de ce que devrait être le code de chaque variante, car cet article se concentre sur le processus de réflexion , mais j'ai hâte de vous montrer quelque chose comme ça. Notez que dans les première et troisième versions de la mise en page précédente, nous avons trois étapes, pas deux. Pouvons-nous rendre le CSS dynamique pour qu'il gère la situation pour nous? Je veux dire augmenter le nombre d'étapes de deux à trois.

<div class="wrapper">
  <section class="steps">
    <div>
      <h2>How it works</h2>
      <p>Easy and simple steps</p>
    </div>
    <div class="layout">
      <div class="layout__item">
        <article class="card"></article>
      </div>
      <div class="layout__item">
        <article class="card"></article>
      </div>
      <div class="layout__item">
        <article class="card"></article>
      </div>
    </div>
  </section>v
</div>


.steps {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
}

@media (min-width: 700px) {
  .steps {
    grid-template-columns: 250px 1fr;
  }
}

.layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
}

@media (min-width: 200px) {
  .layout {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

J'ai utilisé une grille CSS avec un minmax()

mot-clé auto-fit

. Ceci est utile lorsque le nombre de cartes peut être augmenté ou diminué. Regardez la vidéo ci-dessous:

Section des héros

La première chose que je fais lorsque je veux créer une nouvelle section ou un nouveau composant est de me poser beaucoup de questions. Voici ce à quoi je penserai lors de la création de la section héros.

Image en coupe

Comment l'image doit-elle être présentée? Cette image change-t-elle tous les jours ou doit-elle être mise à jour avec le CMS?
Devrions-nous utiliser HTML ou arrière-plan dans CSS?
Quel est le rapport hauteur / largeur attendu de l'image?
Dois-je utiliser plusieurs tailles d'image en fonction de la taille de la fenêtre?
Peut-être que nous n'avons pas d'image, mais une vidéo? J'ai eu des situations où, après avoir travaillé sur une image, des clients disaient qu'au lieu d'une image, il fallait une vidéo.

Hauteur de section

? , , ?

? , , .

? , : — px, CSS clamp()?

Selon la nature du projet sur lequel vous travaillez, vous devriez trouver des réponses à ces questions. Cela aidera à déterminer comment le composant héros doit être construit. Il peut parfois être difficile d'obtenir une réponse à chacune de ces questions, mais plus vous posez de questions, plus vous avez de chances d'obtenir un bon résultat sans erreurs.

Dans notre volet, je traiterai de l'espacement entre les enfants. Pour cette tâche, j'aime utiliser la propriété flow-space. Je l'ai appris sur le blog Piccalil d'Andy Bell. Notre objectif est de fournir la distance entre les éléments directement liés:

<section class="hero">
  <!-- A div to constraint the content -->
  <div class="hero__content flow">
    <h2>Food is amazing</h2>
    <p>Learn how to cook amazing meals with easy and simple to follow steps</p>
    <a href="/learn">Learn now</a>
  </div>
</section>

.flow > * + * {
  margin-top: var(--flow-space, 1em);
}

Et le dernier

Comme vous l'avez vu, le processus de mise en œuvre d'un composant ne consiste pas seulement à en faire un élément parfaitement adapté à la conception, mais également à se poser des questions et à réfléchir aux cas de pointe. J'espère que vous avez appris quelque chose de cet article. Et n'oubliez pas le code promo HABR , qui ajoute 10% à la réduction de la bannière.

Plus de cours

Pensez comme un développeur front-end