Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS
Code

Erstellen Sie einen Twitter Clone From Scratch: Das Design Dieser

by
Difficulty:BeginnerLength:LongLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

In diesem Tutorial müssen wir uns auf die Benutzeroberfläche konzentrieren.  Wir werden den beliebten LESS Preprocessor nutzen, um unser CSS so überschaubar wie möglich zu machen. 


Einführung 

Stellen Sie sicher, dass Sie die Assets für dieses Tutorial herunterladen, wenn Sie mitarbeiten. 

Dieses Tutorial ist in fünf Hauptteile unterteilt, die erklären, wie verschiedene Seiten des Ribbit-Layouts gestaltet werden.  Ich werde HTML-Elemente mit CSS-Selektoren referenzieren, um das Verständnis zu erleichtern.  Bevor wir uns dem Layout zuwenden, wollen wir kurz auf die Verschachtelung eingehen.

Verschachteln 

In CSS kann der Verweis auf ein verschachteltes Element zu langen Selektoren führen. Beispielsweise: 

Und es kann noch größer werden!  Mit LESS können Sie ein Element in ein anderes verschachteln, was das Lesen erleichtert: 


Variablen und Mixins 

Erstellen Sie eine neue Datei und nennen Sie sie style.less.  Wenn Sie einen Stil-Präprozessor verwenden, sollten Sie wichtige Farben und Größen in Variablen speichern. Sie können ihre Werte einfach anpassen, ohne die Datei zu durchsuchen und nach Eigenschaftswerten zu suchen, die Sie ändern müssen. Wir werden eine Handvoll Variablen für die Textfarbe, die Rahmenfarbe und die Inhaltsbreite verwenden:

Lass uns jetzt zwei Mixins erstellen.  Der erste erstellt die Illusion von Anti-Alias-Text und der zweite wird Cross-Browser-Gradienten ermöglichen.  Ersteres ist ziemlich einfach: 

Der Trick besteht darin, einen Schatten unter dem Text mit der gleichen Farbe und einem Ein-Pixel-Spread zu erstellen, wodurch der Browser einen schönen Schatten um den Text anzeigt. 

Jetzt für den Gradienten; das ist komplizierter als der Anti-Alias-Text, da jeder Browser Gradienten unterschiedlich implementiert.  Sobald wir die verschiedenen Anbieterpräfixe ausgeglichen haben, ist hier der Code: 

Jeder Browser hat ein Präfix: -moz- für Firefox, -webkit- für Chrome usw.  Die letzte Zeile verwendet die vom W3C empfohlene Version für Farbverläufe.  Wenn ein Browser dies unterstützt, werden die vorherigen Eigenschaften überschrieben, da dies die letzte Deklaration der Hintergrundeigenschaft in der Regel ist.  Die Linear-Gradient-Funktion akzeptiert acht Parameter: vier Prozentwerte pro Prozent der Farbe.  Es erstellt den Farbverlauf mit vier Farbschritten.


Globale Stile 

Lassen Sie uns als Nächstes einige globale Elemente wie etwa Schaltflächen und Links gestalten.  Wir möchten, dass alle Elemente die Schriftart Helvetica oder Arial mit der zuvor definierten Textfarbe verwenden: 

Body 

Der Körper ist ziemlich einfach; Wir brauchen einen weißen Hintergrund mit einem bildbasierten Muster.  Es gibt keine Ränder und Polsterung: 

Eingänge 

Wir geben auch einen Standardstil für alle  -Elemente auf der Seite an:

Wir legen die Standardgröße und den Abstand fest und verwenden die Variable @ border-color, um den störenden blauen Umriss zu entfernen, wenn das Element fokussiert ist.  Sie sollten ein weiteres bisschen WENIGER Zucker bemerken: Wir können CSS-Pseudoklassen (und auch normale Klassen) mit dem & -Zeichen (Elternreferenz) hinzufügen, wie hier gezeigt:

Dies bewirkt, dass die Eingabe einen hellgelben Hintergrund hat, wenn sie fokussiert ist. 

Einreichungen 

Übermitteln-Buttons verwenden sowohl das zuvor definierte Mixin als auch den Umrandungsradius, um einen schönen Effekt zu erzeugen: 

Links 

Die Links sollten eine andere Farbe als normaler Text haben.  Wir werden sie auch beim Hover unterstreichen: 


Grundlegende Vorlage 

Wir beginnen mit dem Teil des Layouts, der auf jeder Seite gleich bleibt.  Hier ist der HTML-Code, den ich im Folgenden erläutern werde:

Wir beginnen mit einer normalen Doctype-Definition und einem Dokumentkopf.  Sie können die less.js-Bibliothek verwenden und die style.less-Datei in die Entwicklungsphase einbinden (wie in diesem Code).  Später können Sie die LESS-Datei in CSS kompilieren, wenn Sie less.js nicht verwenden möchten.  Wie Sie wahrscheinlich schon bemerkt haben, ist das Layout in drei Teile unterteilt: header, #content und footer.  Sie sollten diesen HTML-Code speichern, um zu sehen, ob Sie alles korrekt formatieren. 

Header 

Lasst uns den Header angehen.  Es enthält das Ribbit-Logo und die beiden Wörter "Twitter Clone". Es ist in einen Wrapper eingepackt, dessen Breite durch die Variable @ content-width gesteuert wird.  Es gibt mehrere Wrapper im Layout, und alle sind @ content-width wide mit auto margin:

Der Header selbst ist 85px groß und pageweit: 

Nach der Breite fügen Sie den Stil von div.wrapper mit vertikalem Padding hinzu: 

Der Header sollte also so aussehen: 

Die Bilder im Wrapper müssen 10 Pixel tiefer sein, damit sie gut zentriert werden können: 

Außerdem muss die Schriftart in Elementen größer als die Standardgröße sein:

So sollte unser Design an diesem Punkt aussehen. 

Header in basic template.

Inhalt 

Mit #content können wir momentan nicht viel anfangen.  Wir fügen dem unteren Rand eine Marge und eine minimale Höhe hinzu. Das Layout wird funky aussehen, wenn es nicht groß genug ist: 

Im Inneren muss der Wrapper einen vertikalen Rand mit einem automatischen horizontalen Rand haben: 

Footer 

Wie die Kopfzeile ist die Fußzeile für alle Seiten gleich. Wir verwenden ein Hintergrundbild und eine kleinere Schriftgröße. Wir müssen auch löschen: beide, weil wir Floats im Inhalt verwenden.  Ohne zu löschen, passt sich die Fußzeile nicht dem Inhalt an:

Fügen wir dem Wrapper nun eine Füllung hinzu, und Bilder darin sollten nach rechts schweben: 

Hier ist unsere Fußzeile:


Die Startseite 

Diese Seite wird für Benutzer angezeigt, die nicht bei Ribbit angemeldet sind.  Daher muss das Anmeldeformular in der Kopfzeile und ein Registrierungsformular mit einem großen Froschbild im Inhalt angezeigt werden.  Beginnen wir mit einer grundlegenden Vorlage. 

Anmeldeboxen 

Fügen Sie dieses Login-Formular dem div.wrapper der Kopfzeile nach dem Element hinzu: 

Diese Eingaben sind bereits formatiert, aber wir müssen die Ränder hinzufügen und das Formular als Inline anzeigen lassen.  Fügen Sie diese nach span in div.wrapper von header hinzu:

Formular registrieren 

Hier ist der HTML-Code für das Registrierungsformular: 

Fügen Sie diesen HTML-Code in div.wrapper von #content hinzu.  Wir möchten, dass das Bild abgerundete Ecken hat und nach links verschoben wird (fügen Sie dies nach dem Rand in div.wrapper von #content hinzu): 

Jetzt können wir das Anmeldeformular gestalten.  Es wird auch ein Panel sein, das wir später verwenden werden; Deshalb werden wir das .panel stylen: 

Vorerst werden wir nur das richtige Panel gestalten.  Es ist schmaler und bleibt an der rechten Seite des Panels.  Natürlich füge folgendes in div.panel ein:

Außerdem müssen wir uns um Header und Inhalt des Panels kümmern.  Wir verwendenElemente für den Header undElemente für den Inhalt. Beachten Sie, dass Sie den Platzhalter * innerhalb eines anderen Elements verwenden können: 

So sollte der Stil von div.panel aussehen: 

Und hier ist ein Screenshot, wie diese Seite aussehen sollte, so weit (klicken um die volle Größe zu sehen): 

Home page preview


Freunde

Die Buddies-Seite sollte angezeigt werden, wenn sich ein Benutzer anmeldet.  Es wird eine Liste der letzten "Ribbits" zusammen mit einigen Statistiken Ihres Kontos angezeigt.  Beginnen Sie erneut mit der grundlegenden Vorlage.  Diese Seite zeigt zusammen mit anderen Seiten eine Abmeldeschaltfläche anstelle des Anmeldeformulars in der Kopfzeile an:

Die Schaltflächen wurden bereits formatiert, sodass wir sie nur an der rechten Seite des Containers anheften und einige Ränder hinzufügen müssen: 

Da der Selektor dieser Regel die ID eines Elements ist, können Sie es entweder außerhalb eines Elements oder in div.wrapper der Kopfzeile platzieren.  Sie haben die Wahl, aber denken Sie daran, dass das kompilierte CSS einen längeren Selektor (header div.wrapper #btnLogOut) hat, wenn Sie es in ein anderes Element einfügen. 

"Erstellen Sie eine Ribbit" Box 

Füge zuerst den Code dieses Panels zu div.wrapper von #content hinzu:

Die Klasse .right wurde früher formatiert, aber wir müssen etwas Styling für das Element hinzufügen.  Wir geben ihm eine richtige Größe und Grenze: 

Fügen Sie dies in der Stildefinition des rechten Bereichs hinzu. 

Nutzerinformation 

Nun konzentrieren wir uns auf das Panel, das die Kontoinformationen des Benutzers enthält.  Wir werden es vorübergehend mit zufälligem Inhalt füllen, um das Styling zu sehen: 

Es sieht vielleicht komplex aus, aber die Struktur ist ziemlich einfach, wenn Sie den Inhalt entfernen: 

Egal, wir haben ein anderes Panel; also müssen wir es zuerst stylen:

Sie wissen wahrscheinlich, wo Sie diesen Code platzieren müssen (beachten Sie, wie einfach Sie arithmetische Operationen in LESS ausführen können).  Dieses Panel enthält div.ribbitWrapper.  Fügen Sie den folgenden Code hinzu:

In diesem Element befinden sich zwei Elemente mit jeweils unterschiedlicher Farbe und Schriftgröße.  Sie haben Klassen von .name und .time:

Wir sollten das Avatarbild auch nahe der linken Grenze positionieren. Fügen Sie den folgenden Code hinzu: 

Außerdem muss Ribbits Text antialiasiert, berechtigt und nach rechts verschoben werden.  Dieser Code platziert den Text neben dem Avatar und nicht darunter: 

In diesem Abschnitt gibt es Elemente mit vertikalen Linien, die sie visuell trennen. Dieser Effekt wird erreicht, indem Sie border, padding und margin verwenden: 

Freunde Ribbits

Dieses Feld listet die neuesten Ribbits der Personen auf, denen der Benutzer folgt.  Fügen Sie nach dem Informationspanel des Benutzers Folgendes ein: 

Es gibt einige Beispiel Ribbits, um zu sehen, wie es aussieht.  Wir werden einige Grenzen hinzufügen, um sie visuell zu trennen.  Fügen Sie diesen Code in div.ribbitWrapper hinzu: 

Dieses Styling fügt den unteren Rand hinzu, während der Rand auf dem letzten div.ribbitWrapper entfernt wird;  Ein Rahmen ist bereits auf dem Panel vorhanden.

So sollte diese Seite nun aussehen: 

Buddies page preview


Öffentliche Ribbits

Die Seite "Öffentliche Ribbits" listet die letzten Ribbits von Profilen auf, die nicht als privat gekennzeichnet sind, sodass Benutzer die Ribbits von Personen, die sie nicht in ihrer Buddy-Liste haben, sehen können. Überraschenderweise gibt es nichts anderes zu gestalten, aber wir müssen einen Hauch von HTML hinzufügen. Der einzige Unterschied zwischen dieser und der vorherigen Seite besteht darin, dass diese Seite nicht über die Informationsanzeige des Benutzers verfügt, aber auf der letzten Website über andere Inhalte verfügt. Du kannst den Code der Buddys-Seite kopieren, aber entferne diesen Bereich:

Ändern Sie auch die Kopfzeile des Bedienfelds in"Öffentliche Ribbits". Hier ist die Vorschau dieser Seite:


Öffentliche Profilseite 

Auf dieser Seite können Benutzer eine Liste von Profilen sehen, die nicht als privat markiert sind.  Es gibt auch ein Suchfeld, um andere Profile zu finden.  Wir beginnen mit der grundlegenden Vorlage. 

Profilsuche 

Das Suchfeld verwendet das .right-Panel mit einem  -Element:

Profilliste 

Hier sind einige Beispielprofile für die Profilliste, damit Sie sehen können, wie es im Browser aussieht.  In einer zukünftigen Lektion werden wir das natürlich entsprechend ersetzen. 

Diese Seite sollte wie folgt aussehen: 


Kompilieren des CSS 

Das Verweisen auf ein verschachteltes Element kann zu langen Selektoren führen. 

Wie ich bereits erwähnt habe, können Sie für die Produktion Ihren LESS zu CSS zusammenstellen (und ich empfehle Ihnen, dies aus Leistungsgründen zu tun).  Es gibt ein paar verfügbare Online-Compiler: 

Zusammen mit einigen eigenständigen Compilern: 

  • Crunch! (Das ist ein ausgewachsener LESS-Editor) 
  • WinLess (bietet automatische Kompilierung, wenn weniger Dateien geändert werden) 
  • SimplESS (inkl. CSS-Minification) 

Wenn einige dieser Compiler nicht für Sie arbeiten, Google für mehr; Es gibt viele!  Sie können auch lessc von der LESS-Website verwenden, aber es ist viel einfacher, Ihre LESS-Dateien mit anderen Compilern zu kompilieren.  Natürlich ist nichts falsch daran, die Bibliothek less.js zu verwenden, um das Layout dynamisch zu kompilieren. Neue Browser cachen das resultierende CSS. 


Fazit 

Wie Sie sehen können, ist LESS ein mächtiges Werkzeug, das es viel einfacher und schneller macht, schöne Layouts zu gestalten.

Aber das ist nur der Anfang.  Seien Sie darauf vorbereitet, Ribbit's Back-End in einer Vielzahl von Sprachen und Plattformen in den nächsten Tutorials zu implementieren!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.