Erstellen Sie einen Twitter Clone From Scratch: Das Design Dieser

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:

someId {
  /* ... */
}

someId div.someClass {
  /* ... */
}

someId div.someClass p.someOtherClass {
  /* ... */
}

someId div.someClass p.someOtherClass target {
  /* ... */
}

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

someId {
  /* ... */
    div.someClass {
        /* ... */
        p.someOtherClass {
            /* ... */
            target {
                /* ... */
            }
        }
    }
}

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:

@text-color: #3F3E3D;
@border-color: #D2D2D2;
@content-width: 860px;

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:

.antialiased (@color) {
    color: @color;
    text-shadow: @color 0 0 1px;
}

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:

.gradient4f (@p1, @c1, @p2, @c2, @p3, @c3, @p4, @c4) {
    background: @c1;
    background: -moz-linear-gradient(top,  @c1 @p1,  @c2 @p2,  @c3 @p3,  @c4 @p4);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(@p1, @c1), color-stop(@p2, @c2), color-stop(@p3, @c3), color-stop(@p4, @c4));
    background: -webkit-linear-gradient(top, @c1 @p1, @c2 @p2, @c3 @p3, @c4 @p4);
    background: -o-linear-gradient(top, @c1 @p1, @c2 @p2, @c3 @p3, @c4 @p4);
    background: -ms-linear-gradient(top, @c1 @p1, @c2 @p2, @c3 @p3, @c4 @p4);
    background: linear-gradient(to bottom, @c1 @p1, @c2 @p2, @c3 @p3, @c4 @p4);
}

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:

* {
    font-family: sans-serif;
    color: @text-color;
}

Body

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

body {
    background: white url(gfx/bg.png);
    margin: 0;
    padding: 0;
}

Eingänge

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

input {
    width: 236px;
    height: 38px;
    border: 1px solid @border-color;
    padding: 0 10px;
    outline: none;
    font-size: 17px;

    &:focus {
        background: #FFFDF2;
    }
}

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:

&:focus {
    background: #FFFDF2;
}

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:

input[type="submit"] {
    height: 36px;
    border: 1px solid #7BC574;
    border-radius: 2px;
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 0 20px;
    cursor: pointer;
    .gradient4f(0%, #8CD585, 23%, #82CD7A, 86%, #55AD4C, 100%, #4FA945);
}

Links

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

a {
    text-decoration: none;
    .antialiased(#58B84E);
    &:hover {
        text-decoration: underline;
    }
}

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:

<!DOCTYPE HTML>
<html>
<head>
    <link rel="stylesheet/less" href="style.less">
    <script src="less.js"></script>
</head>
<body>
    <header>
        <div class="wrapper">
            <img src="gfx/logo.png">
            <span>Twitter Clone</span></p>

    </div>
  </header>
  <div id="content">
    <div class="wrapper">

    </div>
  </div>
  <footer>
    <div class="wrapper">
      Ribbit - A Twitter Clone Tutorial<img src="gfx/logo-nettuts.png">
    </div>
  </footer>
</body>
</html>

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:

.wrapper {
    width: @content-width;
    margin: auto;
}

Der Header selbst ist 85px groß und pageweit:

header {
  background: url(gfx/bg-header.png);
  height: 85px;
  width: 100%;
}

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

div.wrapper {
    padding: 11px 0;
}

Der Header sollte also so aussehen:

header {
    background: url(gfx/bg-header.png);
    height: 85px;
    width: 100%;

    div.wrapper {
        padding: 11px 0;
    }

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

img {
    position: relative;
    top: 10px;
    margin: 0 15px 0 0;
}

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

span {
    font-size: 18px;
    margin: 0 42px 0 0;
}

So sollte unser Design an diesem Punkt aussehen.

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:

#content {
  margin-bottom: 15px;
  min-height: 560px;
}

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

div.wrapper {
    margin: 38px auto;
}

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:

footer {
  background: url(gfx/bg-footer.png);
  height: 251px;
  font-size: 14px;
  clear: both;
}

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

div.wrapper {
    padding: 15px;

    img {
        float: right;
    }
}

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:

<form>
    <input type="text">
    <input type="password">
</form>

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:

form {
    display: inline;

    input {
        margin: 0 0 0 14px;
    }
}

Formular registrieren

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

<img src="gfx/frog.jpg">
<div class="panel right">
    <h1>New to Ribbit?</h1>
    <form>
        <input name="email" type="text">
        <input name="password" type="text">
        <input name="password2" type="password">
        <input type="submit" value="Create Account">
    </form>
</div>

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

img {
    border-radius: 6px;
    float: left;
}

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:

div.panel {
    border: 1px solid @border-color;
    background: white;
    margin: 0;
    margin-bottom: 29px;
    border-radius: 6px;
    font-size: 14px;
}

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:

&.right {
    width: 303px;
    height: 313px;
    float: right;
}

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:

* {
    margin: 6px 0;
}
form {
    padding: 0 23px;
}
h1 {
    border-bottom: 1px solid @border-color;
    margin: 5px 0;
    font-weight: normal;
    font-size: 18px;
    padding: 13px 23px;
    height: 23px;
}
p {
    padding: 0 24px;
    margin: 18px 0;
}

So sollte der Stil von div.panel aussehen:

div.panel {
    border: 1px solid @border-color;
    background: white;
    margin: 0;
    margin-bottom: 29px;
    border-radius: 6px;
    font-size: 14px;

    &.right {
        width: 303px;
        height: 313px;
        float: right;
    }
    
    * {
    margin: 6px 0;
  }
  h1 {
    border-bottom: 1px solid @border-color;
    margin: 5px 0;
    font-weight: normal;
    font-size: 18px;
    padding: 13px 23px;
    height: 23px;
  }
  p {
    padding: 0 24px;
    margin: 18px 0;
  }
}

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

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:

<form>
    <input type="submit" id="btnLogOut" value="Log Out">
</form>

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:

#btnLogOut {
  float: right;
  margin: 14px 0 0 0;
}

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:

<div id="createRibbit" class="panel right">
    <h1>Create a Ribbit</h1>
    <p>
        <form>
            <textarea name="text" class="ribbitText"></textarea>
            <input type="submit" value="Ribbit!">
        </form>
    </p>
</div>

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:

textarea.ribbitText {
    width: 249px;
    height: 160px;
    border: 1px solid @border-color;
}

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:

<div id="ribbits" class="panel left">
    <h1>Your Ribbit Profile</h1>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user1.png">
        <span class="name">Frogger</span> @username
        <p>
            567 Ribbits<span class="spacing">45 Followers</span><span class="spacing">32 Following</span><br>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
</div>

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

<div id="ribbits" class="panel left">
  <h1>Your Ribbit Profile</h1>
  <div class="ribbitWrapper">
    <img class="avatar" src="gfx/user1.png">
    <span class="name"> </span>
    <p>
       <span class="spacing"> </span><span class="spacing"> </span><br>
    </p>
  </div>
</div>

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

&.left {
    width: @content-width - 327;
    float: left;
}

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:

div.ribbitWrapper {
    padding: 15px 0;
}

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

span {
    &.name {
        font-size: 18px;
        color: #58B84E;
    }

    &.time {
        font-size: 12px;
        color: #CCC;
    }
}

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

img.avatar {
    margin: 0 19px 0 20px;
    float: left;
}

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

p {
    margin: 5px 50px 0 90px;
    padding: 0;
    text-align: justify;
    line-height: 1.5;
    .antialiased(@text-color);
}

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

span.spacing {
    padding-left: 9px;
    margin-left: 9px;
    height: 10px;
    border-left: 1px solid @border-color;
}

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:

<div class="panel left">
    <h1>Your Ribbit Buddies</h1>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user2.png">
        <span class="name">Kermit</span> @username <span class="time">15m</span>
        <p>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user1.png">
        <span class="name">Frogger</span> @username <span class="time">15m</span>
        <p>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user2.png">
        <span class="name">Kermit</span> @username <span class="time">15m</span>
        <p>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user3.png">
        <span class="name">Hypnotoad</span> @username <span class="time">15m</span>
        <p>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user2.png">
        <span class="name">Kermit</span> @username <span class="time">15m</span>
        <p>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user3.png">
        <span class="name">Hypnotoad</span> @username <span class="time">15m</span>
        <p>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
</div>

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:

border-bottom: 1px solid @border-color;
&:last-child {
    border: none;
}

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:

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

<div id="ribbits" class="panel left">
    <h1>Your Ribbit Profile</h1>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user1.png">
        <span class="name">Frogger</span> @username
        <p>
            567 Ribbits<span class="spacing">45 Followers</span><span class="spacing">32 Following</span><br>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
</div>

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

<div class="panel right">
    <h1>Search for profiles</h1>
    <p>
        <form>
            <input name="query" type="text">
            <input type="submit" value="Ribbit!">
        </form>
    </p>
</div>

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.

<div id="ribbits" class="panel left">
    <h1>Public Profiles</h1>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user2.png">
        <span class="name">Kermit</span> @username <span class="time">625 followers <a href="#">follow</a></span>
        <p>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user1.png">
        <span class="name">Frogger</span> @username <span class="time">329 followers <a href="#">follow</a></span>
        <p>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user3.png">
        <span class="name">Hypnotoad</span> @username <span class="time">129 followers <a href="#">follow</a></span>
        <p>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
</div>

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!