🧘🏻 🈯️ 👩🏻‍🚒 Denken Sie wie ein Front-End-Entwickler 👨🏼‍🔧 👋🏼 ⚛️

Hallo Habr! Wir haben einen neuen Stream des Frontend-Entwicklerkurses gestartet , und ich teile Ihnen eine kleine Checkliste für das Frontend mit, wie Sie beim Erstellen eines Layouts denken und welche Fragen Sie sich stellen sollten. Fühlen Sie sich frei, ein Lesezeichen zu setzen, wenn Sie Ihrem ~~Padawan~~ Jun mitteilen möchten, auf welcher Seite er sich dem Design des Layouts nähern soll, aber Ihre Zeit nicht damit verschwenden möchten, relativ einfache Dinge zu erklären.

Ich habe auf Twitter gefragt, worüber ich sonst noch in CSS schreiben soll. Einer der Vorschläge, die meine Aufmerksamkeit erregt haben, ist das Nachdenken bei der Implementierung eines CSS-Layouts. Es geht darum, über mögliche Lösungen und viele Fragen nachzudenken, um das Design richtig zu machen. Hier zeige ich Ihnen, wie Sie über ein neues Layout nachdenken und wie Sie dieselben Schritte auf Ihre Arbeit anwenden können. Sind Sie bereit? Lass uns eintauchen.

Details zur Seite

Das erste, was ich normalerweise mache, ist, die Designdetails für später zu verschieben. Dies bedeutet, dass ich die Hauptteile eines bestimmten Layouts hervorhole und zuerst darüber nachdenke. Ich weiß, dass die Details wichtig sind, aber dies ist nur vorübergehend, damit wir uns zuerst auf die Details auf hoher Ebene konzentrieren können. Betrachten Sie die folgende Benutzeroberfläche:

In diesem Konstrukt haben wir Folgendes:

Titel / Navigation.
Hauptteil.
Wie es funktioniert.

Es kann verlockend sein, zuerst über kleine Details nachzudenken, nicht auf einer hohen Abstraktionsebene. Wenn ich gebeten würde, den Ansatz visuell zu vereinfachen, würde ich sagen, dass ein Front-End-Entwickler eine Brille tragen sollte, mit der nur übergeordnete Layoutelemente angezeigt werden können:

Beachten Sie, dass Sie mit Brillen nur wichtige übergeordnete UI-Komponenten sehen können. Dieser Ansatz hilft Ihnen beim Überlegen, wie die Komponenten angeordnet werden sollen, anstatt bei den kleinen Teilen der einzelnen Komponenten. So denke ich:

Header in voller Breite: Der Header erstreckt sich anscheinend über die gesamte Breite des Ansichtsfensters und sein Inhalt im Wrapper ist unbegrenzt.
Der Inhalt des Heldenelements ist horizontal zentriert. Beachten Sie, dass die maximale Breite festgelegt werden muss (der Absatz besteht aus zwei Zeilen).
So funktioniert es: Dies ist ein 4-Spalten-Layout, der gesamte Abschnitt wird umbrochen.

Wenn ich jetzt am Code arbeiten möchte, mache ich einen schnellen Prototyp, um den Fortschritt schnell zu sehen.

<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>

Da wir einen 4-Spalten-Abschnitt haben, werde ich dafür ein CSS-Raster verwenden. Dies ist die perfekte Anwendung für sie.

.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);
}

Es war ein Beispiel für schnelles Denken mit Brille. Bis jetzt habe ich noch nicht einmal an Responsive Design gedacht. Ich habe einige Fragen zu den Details einiger Komponenten, werde aber jetzt nicht weiter darauf eingehen. Lesen Sie darüber im Abschnitt "Eintauchen in Details" am Ende des Artikels. Nachdem Sie die Idee haben, werde ich Ihnen einige weitere Beispiele für hochrangiges Denken geben, damit Sie es besser verstehen können.

Artikelseite

In diesem Beispiel haben wir ein Artikelseitenlayout. Hier ist die Benutzeroberfläche, die enthält:

Titel.
Seitentitel.
Bildvorschau für den Artikel.
Der Inhalt des Artikels.
Seitenwand (rechts).

Nachdem Sie eine Vorstellung davon haben, wie das Design aussieht, setzen wir eine Brille auf, damit wir nur die Elemente auf hoher Ebene sehen können.

Hier sind sie:

Site-Header, der sich über die gesamte Breite der Seite erstreckt.
Seitentitel mit dem Titel des Artikels und seiner Beschreibung wird der Inhalt mit maximaler Breite linksbündig ausgerichtet.
Ein zweispaltiges Layout mit den Haupt- und Seitenleistenelementen .
Der innere Inhalt eines Artikels, der horizontal zentriert ist und eine maximale Breite hat .

Titel der Artikelseite

Hier muss keine Layoutmethode angewendet werden. Eine einfache maximale Breite erledigt den Job. Stellen Sie sicher, dass Sie eine horizontale Polsterung hinzufügen, um zu verhindern, dass die Kanten des Elements in kleinen Ansichtsfenstern an den Kanten haften bleiben.

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

Artikel - Basis und Seitenleiste

Das Hauptelement (Hauptelement) des Artikels nimmt die gesamte Breite des Ansichtsfensters abzüglich der Breite der Seitenleiste ein. Normalerweise sollte die Seitenleiste eine feste Breite haben. Ein CSS-Raster ist dafür ideal.

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

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

Der innere Inhalt des Artikels sollte innerhalb des Deckblatts begrenzt sein.

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

Nachdem Sie eine Vorstellung von den allgemeinen Entscheidungen haben, die beim Erstellen Ihres Layouts zu treffen sind, besteht der nächste Schritt darin, über die Arbeit mit jedem Abschnitt in Bezug auf das Design nachzudenken.

In Details eintauchen

Wie es funktioniert

Im ersten Beispielartikel habe ich gesagt, dass wir später auf Details eingehen werden. Dieser Moment ist gekommen.

Lautsprecher

Haben wir Fälle, in denen die Anzahl der Schritte geringer oder höher sein kann? Wenn ja, wie soll man in einer solchen Situation arbeiten?
Müssen die Spalten gleich hoch sein, insbesondere wenn die Karte sehr langen Text enthält?

Titel

Müssen wir den Header-Bereich beiseite lassen? Oder gibt es Zeiten, in denen es die gesamte Breite einnehmen sollte?

Adaptives Design

In welcher Situation müssen Sie falten, um die Größe der Kinder eines Abschnitts zu ändern? Haben wir eine Art Faltauslöser? Wenn ja, was ist dieser Auslöser?

Hier sind einige mögliche Situationen mit diesem Abschnitt. Was denken Sie? Als Front-End-Entwickler müssen Sie diese Randfälle berücksichtigen. Es geht nicht nur darum, eine Benutzeroberfläche zu erstellen, ohne solche versteckten Details zu berücksichtigen.

Ich werde nicht näher auf den Code für jede Variation eingehen, da sich dieser Artikel auf den Denkprozess konzentriert , aber ich möchte Ihnen gerne so etwas zeigen. Beachten Sie, dass wir in der ersten und dritten Version des vorherigen Layouts drei Schritte haben, nicht zwei. Können wir das CSS dynamisch gestalten, damit es die Situation für uns bewältigt? Ich meine, die Anzahl der Schritte von zwei auf drei zu erhöhen.

<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));
  }
}

Ich habe ein CSS-Raster mit minmax()

und Schlüsselwort verwendet auto-fit

. Dies ist nützlich, wenn die Anzahl der Karten erhöht oder verringert werden kann. Sehen Sie sich das Video unten an:

Heldenabteilung

Das erste, was ich mache, wenn ich einen neuen Abschnitt oder eine neue Komponente erstellen möchte, ist, mir viele Fragen zu stellen. Folgendes werde ich beim Erstellen der Heldensektion beachten.

Schnittbild

Wie soll das Bild dargestellt werden? Ändert sich dieses Image jeden Tag oder sollte es mit dem CMS aktualisiert werden?
Sollten wir HTML oder Hintergrund in CSS verwenden?
Was ist das erwartete Seitenverhältnis des Bildes?
Muss ich abhängig von der Größe des Ansichtsfensters mehrere Bildgrößen verwenden?
Vielleicht haben wir kein Bild, aber ein Video? Ich hatte Situationen, in denen Kunden nach der Arbeit an einem Bild sagten, dass anstelle eines Bildes ein Video benötigt werde.

Schnitthöhe

? , , ?

? , , .

? , : — px, CSS clamp()?

Abhängig von der Art des Projekts, an dem Sie arbeiten, sollten Sie Antworten auf diese Fragen finden. Auf diese Weise können Sie festlegen, wie die Heldenkomponente erstellt werden soll. Es kann manchmal schwierig sein, eine Antwort auf jede dieser Fragen zu erhalten. Je mehr Fragen Sie stellen, desto wahrscheinlicher ist es, dass Sie ohne Fehler ein gutes Ergebnis erzielen.

In unserer Komponente werde ich mich mit dem Abstand zwischen den Kindern befassen. Für diese Aufgabe verwende ich gerne die Flow-Space-Eigenschaft. Ich habe es aus Andy Bells Piccalil-Blog erfahren. Unser Ziel ist es, den Abstand zwischen direkt verwandten Elementen zu ermitteln:

<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);
}

Und der letzte

Wie Sie gesehen haben, geht es bei der Implementierung einer Komponente nicht nur darum, sie exakt für das Design geeignet zu machen, sondern auch darum, sich selbst zu fragen und über Randfälle nachzudenken. Ich hoffe, Sie haben etwas aus diesem Artikel gelernt. Und vergessen Sie nicht den Promo-Code HABR , der den Rabatt auf das Banner um 10% erhöht .

Weitere Kurse

Denken Sie wie ein Front-End-Entwickler