So können Sie Apps schnell mit einem CSS-Raster und CSS-Variablen prototypisieren

Published on July 24, 2018

So können Sie Apps schnell mit einem CSS-Raster und CSS-Variablen prototypisieren

    Sowohl das CSS-Raster als auch die CSS-Variablen sind leistungsstarke Werkzeuge für Frontend-Entwickler. Mit dem ersten können Sie die Erstellung von Website-Layouts erheblich vereinfachen. Mit dem zweiten können Sie alle Möglichkeiten von variablen Stylesheets nutzen.

    Bild

    In diesem Artikel werde ich Ihnen zeigen, wie Sie mit beiden Tools schnell den Anwendungsentwurf erstellen können.

    Skillbox empfiehlt: einen Online-Kurs für UX-Analytics Wir möchten Sie
    daran erinnern: Für alle Habr-Leser - 10.000 € Rabatt auf Skillbox-Kurse mit dem Promo-Code "Habr".

    Mesh-Container anpassen


    Unsere Anwendungen arbeiten mit CSS-Grid, einem Modul, mit dem Sie Layouts schnell erstellen und verwalten können. Dies ist insbesondere dann hilfreich, wenn Sie mit der Eigenschaft grid-template-areas arbeiten. (Ich zeige dir unten, wie man es benutzt).

    Lassen Sie uns das Erscheinungsbild unserer Anwendung überprüfen - dies ist ein Chat:

    Bild

    Wenn wir die Entwickler-Tools in Chrome öffnen, können wir sehen, was dieses Raster ist. Wie Sie sehen können, gibt es sechs Spalten und sechs Zeilen.

    Bild

    Hier ist der Code zum Erstellen eines solchen Gitters:

    .app {
      display:                grid;
      grid-template-columns:  1fr 1fr 1fr 1fr 1fr 1fr;
      grid-template-rows:     1fr 1fr 1fr 1fr 1fr 60px;
    }

    Zuerst erstellen wir einen Container dafür. Dann sagen wir, wir hätten gerne sechs Spalten am Ausgang, und jede von ihnen sollte eine Breite haben. Dies bedeutet einen Teil des freien Raums. Daher teilen wir den freien Platz des Bildschirms in sechs gleich breite Teile.

    Aber mit den Zeilen anders. Die Höhe jeder der ersten fünf Zeilen beträgt ebenfalls 1 fr, aber wir beschränken die Höhe der letzten auf 60px anstelle von 1 fr.

    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 60px;

    Wenn wir nun das Raster markiert haben, fahren wir mit dem nächsten Teil fort - der Platzierung von Elementen.

    Mesh-Platzierung


    Jeder gerade "Erbe" des Netzbehälters ist ein Netzelement. Insgesamt haben wir vier Elemente, von denen jedes in einem Rechteck platziert ist, wie in der Abbildung unten gezeigt.

    Bild

    Damit die Elemente genau wie oben gezeigt platziert werden, müssen Sie die Eigenschaft grid-template-areas verwenden.

    .app {
      display:                grid;
      grid-template-columns:  1fr 1fr 1fr 1fr 1fr 1fr;
      grid-template-rows:     1fr 1fr 1fr 1fr 1fr 60px;
      grid-template-areas:
        "r m m m m m"
        "r m m m m m"
        "r m m m m m"
        "r m m m m m"
        "r m m m m m"
        "n s s s s s";
    }

    Jede der Codezeilen stellt eine Zeile der Tabelle dar, und jedes Zeichen ist eine Gitterzelle. Symbole haben eine semantische Beziehung zu den Rasterelementen, die sie repräsentieren (eine Liste von Räumen, eine Liste von Nachrichten, ein neues Raumformular, ein Nachrichtenformular).

    Jetzt müssen wir Symbole mit ihren Rasterflächenwerten verwenden, um unsere Elemente nach Rastervorlagenbereichen zu platzieren. So geht's:

    .new-room-form {
      grid-area: n;
    }
    .rooms-list {
      grid-area: r;
    }
    .message-list {
      grid-area: m;
    }
    .send-message-form {
      grid-area: s;
    }

    Selbstverständlich gelten diese Klassen auch für unsere Rasterelemente in Ihrem HTML-Code. Ich werde jedoch nicht ausführlich darauf eingehen, da Sie wahrscheinlich wissen, wie Sie Klassen zu HTML-Tags hinzufügen.

    Ab diesem Moment experimentieren wir mit dem Layout. Wir können sehr viel ändern, indem Sie die Werte der Gittervorlagenbereiche ändern.

    Bild

    Wie in der Abbildung oben gezeigt, versuche ich, vier verschiedene Layouts zu verwenden, um die Positionen des Elements „Liste der Räume“ und die neuen Elemente der Raumform zu ändern. Das einzige, was ich ändere, ist die Eigenschaft grid-template-areas.

    Nachfolgend sind vier dieser Optionen aufgeführt. Versuchen Sie, jedes von ihnen mit dem entsprechenden Layout abzugleichen.

    grid-template-areas:
        "n m m m m m"
        "r m m m m m"
        "r m m m m m"
        "r m m m m m"
        "r m m m m m"
        "r s s s s s";
    grid-template-areas:
        "r m m m m m"
        "r m m m m m"
        "r m m m m m"
        "r m m m m m"
        "r m m m m m"
        "n s s s s s";
    grid-template-areas:
        "m m m m m r"
        "m m m m m r"
        "m m m m m r"
        "m m m m m r"
        "m m m m m r"
        "s s s s s n";
    grid-template-areas:
        "m m m m m n"
        "m m m m m r"
        "m m m m m r"
        "m m m m m r"
        "m m m m m r"
        "s s s s s r";

    Farbänderung mit CSS-Variablen


    Nun, wir werden jetzt versuchen, die Farbe der Anwendung mithilfe von CSS-Variablen zu ändern. Wenn Sie bisher noch nicht mit ihnen gearbeitet haben, schauen wir uns an, was sie sind.

    Bild

    Bild

    Die im unteren Bild gezeigte Methode macht den Code etwas lesbarer, da, wenn Sie es so ausdrücken können, der Variablenname eher semantisch als hexadezimal ist. Darüber hinaus bietet die zweite Methode eine größere Flexibilität bei der Änderung des Codes.

    Mal sehen, was mit unserer Anwendung mit verschiedenen Variablenwerten möglich ist.

    :root {
      --main-color:            #5ea3d0;
      --secondary-color:       white;
      --main-text-color:       #3e5869;
      --secondary-text-color:  #b0c7d6;
      --new-room-form:         #d9e1e8;
      --send-message-form:     #F5F5F5;
    }

    Sie werden in unserem Layout 17 Mal wiederholt. Wir werden jedoch nicht alle Positionen prüfen. Sehen wir uns nun an, wie die Hauptfarbe auf die Farbe der Nachrichten und die linke Seitenleiste angewendet wird.

    Bild

    So schlagen wir im Code alles zusammen.

    .rooms-list {
      background: var(--main-color);
    }
    .message-text {
      background: var(--main-color);
    }

    Variablen sind gut, weil wir ihre Deklaration bearbeiten können. Dies reicht aus, um die gesamte Anwendung zu ändern. Beispiel:

    :root {
      --main-color: red;
    }

    Und hier ist das Ergebnis:

    Bild

    Wir können einfach die Variablendeklaration in: root ändern, wodurch wir mit dem Erscheinungsbild der Anwendung spielen können.

    Bild

    Lassen Sie uns einige Farben in: root mit der obigen Palette ersetzen.

    :root {
      --main-color: #5ea3d0;
      --secondary-color: white;
      --main-text-color: #3e5869;
      --secondary-text-color: #b0c7d6;
      --new-room-form: #d9e1e8;
      --send-message-form: #F5F5F5;
    }

    Das Ergebnis ist ein völlig anderer Chat-Auftritt:

    Bild

    Verbinden Sie das Raster und die Variablen


    Wenn wir all dies kombinieren, können wir das Design unseres Chats komplett ändern. Lass es uns tun.

    Bild

    Bild

    So sieht die ursprüngliche Version im Vergleich zur endgültigen aus. Wie Sie sehen, habe ich sowohl die Palette als auch das Layout geändert. Der einzige Unterschied zwischen diesen beiden Beispielen sind die 11 Codezeilen, die ich hier hervorgehoben habe.

    :root {
      --main-color:           #ff66ff;
      --secondary-color:      #fbd8fb;
      --main-text-color:      #3e5869;
      --secondary-text-color: #d8b2ff;
      --new-room-form:        #ffb2ff;
      --send-message-form:    #d8b2ff;x
    }
    .app {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-template-rows: 1fr 1fr 1fr 1fr 1fr 60px;
      grid-template-areas:
        "m m m m r r"
        "m m m m r r"
        "m m m m r r"
        "m m m m r r"
        "m m m m n n"
        "f f f f f f";
    }

    Wirklich cool?

    Skillbox empfiehlt: