Gestaltung unserer Behance Portfolio Website mit LESS

German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)

Im vorherigen Teil dieser Serie haben wir die Behance-API kennengelernt, mit der die Portfolio-Teile eines Benutzers erfasst und auf einer Webseite angezeigt werden. In diesem Teil werden wir die Webseite gestalten und die Portfolio-Stücke auf eine angemessen attraktive Weise präsentieren.

Werkzeuge, die wir verwenden werden

Zunächst bereiten wir unser Werkzeugkasten vor:

Normalisieren

Wir werden Normalisieren verwenden, um die grundlegenden Elementstile in verschiedenen Browsern konsistenter zu gestalten und das Risiko unerwarteter Ergebnisse zu minimieren.

LESS Mixins-Bibliotheken

Wir werden auch LESS für die Gestaltung unserer Website verwenden. Welchen Präprozessor Sie bevorzugen, es ist auf jeden Fall empfehlenswert, sie in Ihrem Arbeitsablauf zu verwenden. Ich bin ein großer Fan von, anstatt die gewünschte Farbe im Farbwähler aus einer separaten Anwendung zu durchsuchen, indem ich einfach LESS Steuerfunktionen wie lighten() und darken() verwende, um eine Reihe von Farbvarianten zu erhalten.

Um uns weiter zu helfen, werden wir LESSHat verwenden, um mit seiner Mixins-Sammlung weniger Code zu schreiben. Wir werden auch Remixins verwenden, die von Christopher Ramírez entwickelt wurden. Remixins ist eine Sammlung von Mixins zum Konvertieren von px in rem-Einheiten in. Die Sammlung enthält die Mixins zum Festlegen von font-size, margin, padding, width und height sowie der CSS-Position (left, right, bottom, and top).

Darüber hinaus benötigen wir ein Werkzeug, um LESS in reguläres CSS zu kompilieren. In diesem Tutorial verwenden wir eine App namens Koala, die unter Windows, OSX und Ubuntu verfügbar ist. Sie können natürlich jeden Compiler verwenden, den Sie bevorzugen, aber mit etwas Glück können Sie diesem Tutorial unabhängig von der verwendeten Plattform folgen.

Weitere Informationen über LESS finden Sie in diesen Tutorials:

Google Fonts

Standard-Systemschriften wie Arial machen das heute einfach nicht für mich. In diesem Tutorial werde ich stattdessen Google Fonts verwenden. Ich habe Cantata One als Überschrift und Open Sans als Standardtext ausgewählt. Dies ist eine persönliche Präferenz. Sie können Google Fonts ausschließen oder Alternativen verwenden, wenn Sie dies wünschen.

Stiftung Symbol-Schriften

Wir werden auch Schriftsymbole für ein bisschen Dekoration auf unserer Website verwenden. In diesen Tagen haben wir eine Menge Optionen für Schriftsymbole. Während meiner Suche war ich jedoch ziemlich überrascht, dass nur wenige dieser Schriftarten das Behance-Symbol in ihrer Sammlung enthalten. In diesem Fall verwenden wir in jedem Fall Stiftung Symbol-Schriften 3, da es das Behance-Symbol enthält und auch über ein CDN verfügbar ist.

Einrichten unserer Hilfsmittel und Werkzeuge

Erstellen Sie in unserem Projektstammverzeichnis einige neue Ordner mit den Namen less und css (der Ausgabeordner der LESS-Datei). Erstellen Sie eine neue Datei mit dem Namen style.less und greifen Sie auf Remixins sowie LESShat zu. Legen Sie diese drei LESS Stylesheets in den Ordner less. Zu diesem Zeitpunkt sollte die Liste der Dateien und Ordner in unserem Projektverzeichnis folgendermaßen aussehen:

|-- css
|-- index.html
`-- less
    |-- lesshat.less
    |-- remixins.less
    `-- style.less

Fügen Sie dann Normalize, die Foundation Icon-Schriftarten und unser Google Font-Stylesheet im head-Tag zusammen mit style.css hinzu, der Ausgabedatei von style.less.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css">
<link href='http://fonts.googleapis.com/css?family=Cantata+One|Open+Sans:300,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css">

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>

Öffnen Sie auch die Koala-App (oder die von Ihnen bevorzugte Kompilierungsform) und fügen Sie unser Projektverzeichnis hinzu.

Hinzufügen der Symbolschriftarten

Bevor wir Stile schreiben, fügen wir unserer Website einige Symbole hinzu. Zuerst fügen wir die Karten-Standortmarkierung neben dem Standortelement des Benutzers mit der fi-marker-Klasse hinzu. Fügen Sie diese Klasse wie folgt neben der profile-location-Klasse hinzu:

1	...
2	<div class="profile-location fi-marker">{{user.city}}, {{user.country}}</div>
3	...

Dadurch wird dem div ein :before dem Pseudoelement hinzugefügt, und das Markierungssymbol wird über unsere Foundation-Symbole eingefügt. Als nächstes fügen wir das Behance-Logo in den Fußzeilenbereich mit der Klasse fi-social-behance ein.

1	...
2	<p><a class="power-logo fi-social-behance" href="http://www.behance.net/" title="Behance" target="_blank">Behance</a></p>
3	...

Einrichten von Mixins und Variablen

Öffnen wir unseren style.less und importieren sowohl lesshat.less als auch remixins.less mit der (reference)- Markierung.

1	@import (reference) 'lesshat.less';
2	@import (reference) 'remixins.less';

Die (reference)-Marke wurde in LESS 1.5 eingeführt. Dies bedeutet, dass LESS die Datei nur als Referenz verwendet und den Inhalt nicht kompiliert und in die Datei ausgibt. Es ist eine sehr leistungsstarke Funktion, die doppelte und unnötige Stile minimiert.

In style.less fügen wir die folgenden Variablen hinzu, in denen die Farbpalette und die Schriftfamilie unserer Website gespeichert sind.

@bg-body   : #fafafa;
@bg-header : #303746;

@color-base  : #353537;
@color-name  : #e0e0e0;
@color-title : #6b919f;

@font-body  : 'Open Sans', Arial, sans-serif;
@font-name  : 'Cantata One', Georgia, Times, serif;

Das Platzieren dieser Variablen an einer Stelle dient als eine Art Stilrichtlinie, hilft uns aber auch dabei, unsere Stile auf bequemere Weise beizubehalten. Wenn zum Beispiel etwas auf der Website geändert werden soll, können wir einfach den Wert innerhalb dieser Variablen ändern. Es ist eine viel sicherere Möglichkeit, Stile zu ändern, als "Suchen und Ersetzen" durchzuführen.

Beginnen zu stylen

Grundlegende Elementstile

Obwohl wir Normalize hinzugefügt haben, das unsere Elementstile standardisiert hat, müssen wir noch einige Stile anpassen, um unseren speziellen Anforderungen gerecht zu werden. Zu Beginn ändern wir die Boxgröße und setzen alle Boxgrößen der Elemente (einschließlich der Pseudoelemente) auf border-box. Dies gibt unseren Dimensionen eine viel kontrollierbarere Grundlage für die Arbeit.

Wir können dies mit den .box-sizing-Mixins aus der LESSHat-Bibliothek wie folgt anwenden:

1	, :before, *:after {
2	.box-sizing(border-box);
3	}

Als Nächstes setzen wir die html-Schriftgröße auf 62.5%. Dies ist ein Ansatz, um die Verwaltung relativer Einheiten zu vereinfachen.

1	html {
2	font-size: 62.5%;
3	}

62.5% werden hier gegen den Browser-Standard von 1em gemessen, der 16px beträgt; 62.5% von 16px sind also gleich 10. Auf diese Weise können wir die Umwandlung von rem in px leicht herausfinden, indem wir sie mit 10 multiplizieren. 1.2rem ist beispielsweise gleich 12px und so weiter. Wenn wir uns außerdem die Quelle remixins.less ansehen, werden wir feststellen, dass die Basisschriftgröße in der Variablen @base-font-size-px auf 10 festgelegt ist.

Weitere Informationen zur CSS-Einheit finden Sie in diesen Artikeln:

Mit dem "Ähm..." Aus der Ems von Ian Yates
Ian Yates geht mit Ems noch weiter

Wir verwenden ein figure-Element, um das Portfolio-Bildcover zu enthalten. Unser figure-Element hat jedoch Randwerte von Normalize geerbt, was zu unbeabsichtigten Leerzeichen zwischen den Portfolio-Bildern führt. Hier entfernen wir also den Rand aus dem figure-Element.

1	figure {
2	margin: 0; /overwrite Normalize.css default style/
3	}

Der Clearfix Hack

Die Verwendung eines Clearfix-Hacks ist eine beliebte Methode, um auf einige Layoutprobleme zurückzugreifen, die durch schwebende Elemente verursacht werden, die ihre untergeordneten Elemente nicht löschen können. Hier fügen wir also den Clearfix-Tipp von Nicolas Gallagher hinzu, den wir in LESS verwandelt haben.

.clearfix {
    *zoom: 1;
    &:before,
    &:after {
        content:" ";
        display: table;    
    }
    &:after {
        clear: both;    
    }
}

Wenn Sie sich unsere HTML-Struktur ansehen, haben wir einigen Elementen eine clearfix-Klasse hinzugefügt.

Die Body-Stile

Für den body legen wir die Schriftstile fest, die für die gesamte Seite gelten. Diese Stile umfassen die Schriftgröße, die Schriftfarbe, die Schriftstärke, die Schriftfamilie und die Hintergrundfarbe. Hier verwenden wir das Mixin .font-size() aus der Remixins-Bibliothek, um die Schriftgröße zu generieren. Alle in der Remixins-Bibliothek enthaltenen Mixins generieren einen Fallback für px-Einheiten, der für Browser hilfreich ist, die die rem-Einheit nicht unterstützen.

body {
    .font-size(16px);
    background-color: @bg-body;
    color: @color-base;
    font-family: @font-base;
    font-weight: 300;
}

Nach dem Speichern der Datei kompiliert Koala die Ausgabe automatisch. Und der obige Code sollte in normalem CSS so aussehen.

body {
  font-size: 16px;
  font-size: 1.6rem;
  background-color: #fafafa;
  color: #353537;
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 300;
}

Die Header-Stile

Als Nächstes fügen wir die Stile für den Website-Header wie folgt hinzu.

.portfolio-header {
    .padding(50px, 0);
    background-color: @bg-header;
    text-align: center;
    .profile-avatar img {
        .size(80px);
        border-radius: 50%;
    }
    .profile-name {
        .font-size(24px);
        .margin-bottom(10px);
        color: @color-name;
        font-family: @font-name;
        font-weight: 400;
    }
    .profile-fields {
        .max-width(320px);
        .font-size(14px);
        color: lighten(@bg-header, 50%);
        margin-left: auto;
        margin-right: auto;
        .field-list {
            padding: 0;
        }
        .field-item {
            display: inline-block;
            &:after {
                content:' ,';
            }
            &:last-child:after {
                content:'';
            }
        }
    }
    .profile-location {
        .font-size(14px);
        color: lighten(@bg-header, 30%);
        &:before {
            .margin-right(10px);
            .font-size(18px);
        }
    }
}

Dies ist ein ziemlicher Teil der Syntax. Lassen Sie uns sie in Teile zerlegen und untersuchen, was sie tut. Zunächst haben wir dem Header eine Hintergrundfarbe hinzugefügt, die in unserer @bg-header-Variablen gespeichert ist. Wir verwenden .padding() Mixins von Remixins, um oben und unten im Header Polster hinzuzufügen, wodurch mehr vertikaler Leerraum entsteht. Wir haben auch text-align:center hinzugefügt, damit unser Inhalt ordentlicher aussieht.

.portfolio-header {
    .padding(50px, 0);
    background-color: @bg-header;
    text-align: center;
...

Wir haben die Avatar-Bildgröße des Benutzers mit .size() Mixins festgelegt und durch Festlegen des Rahmenradius auf 50% kreisförmig gemacht. Sie können sehen, dass diese Stile in .profile-avatar img deklariert sind.

1	.profile-avatar img {
2	.size(80px);
3	border-radius: 50%;
4	}

Nachfolgend finden Sie die Regeln für den Benutzernamen. Hier setzen wir die Schriftgröße mit einem .font-size() Mixin. Wir haben die Variable @color-name für die Schriftfarbe bereitgestellt und die Schriftfamilie mit der Variablen @font-family übergeben. Und zum Schluss haben wir die font-weight:400; hinzugefügt damit die Schrift kühner aussieht als die anderen.

.profile-name {
    .font-size(24px);
    .margin-bottom(10px);
    color: @color-name;
    font-family: @font-name;
    font-weight: 400;
}

Als nächstes werden wir uns die Regeln für den Bereich der Benutzerkreativfelder ansehen, auf die wir mit .profile-fields abzielen. In Behance können Sie beliebig viele Fertigkeiten oder Spezialgebiete hinzufügen. Das bedeutet, dass jeder Benutzer kurze oder sehr lange Fähigkeitsbeschreibungen haben kann. Ich habe mich daher entschlossen, die Breite auf eine max-width einzustellen. Wir stellen die Schriftfarbe für 50% heller aus dem Header-Hintergrund mit lighten(@bg-header, 50%).

Darüber hinaus wird jedes Feldelement durch ein Komma getrennt, das wir durch ein :after-Pseudoelement angegeben haben. Logischerweise sollte das letzte Element kein Komma haben. Daher haben wir das letzte Element mit :last-child ausgewählt und die content-Eigenschaft auf leeren content:'' festgelegt.

.profile-fields {
    .max-width(320px);
    .font-size(14px);
    color: lighten(@bg-header, 50%);
    margin-left: auto;
    margin-right: auto;
    .field-list {
        padding: 0;
    }
    .field-item {
        display: inline-block;
        &:after {
            content:' ,';
        }
        &:last-child:after {
            content:'';
        }
    }
}

Im Folgenden finden Sie die Stilregeln für die Gestaltung des Benutzerstandorts. Hier stellen wir die Farbe etwas heller als die Hintergrundfarbe ein, um genau zu sein 30%. Außerdem haben wir die Lücke zwischen dem Text und dem Markierungssymbol in Foundation Icon Fonts geringfügig vergrößert, indem wir dem Pseudoelement :before den margin-right hinzugefügt haben.

.profile-location {
    .font-size(14px);
    color: lighten(@bg-header, 30%);
    &:before {
        .margin-right(10px);
        .font-size(18px);
    }
}

Nach dem Hinzufügen dieser Stile sollte der Header nun ungefähr so aussehen:

Gestaltung des Portfolio-Bereichs

Das folgende Snippet enthält alle Stile für unser Portfolio.

.portfolio-area {
    .margin(50px, auto);
    .max-width(960px);
    width: 100%;
    .portfolio-list {
        padding-left: 0;
    }
    .portfolio-item {
        .margin-bottom(30px);
        .height(320px);
        .padding(0, 15px);
        float: left;
        list-style-type: none;
        width: 33,33333333333333%;
    }
    .portfolio-content {
        text-align: center;
    }
    .portfolio-cover {
        width: 100%;
    }
    .portfolio-image {
        border: 8px solid #fff;
        max-width: 100%;
    }
    .portfolio-title {
        .font-size(14px);
        color: darken(@color-title, 10%);
        text-transform: capitalize;
        vertical-align: middle;
        width: 100%;
    }
    .portfolio-fields {
        .font-size(12px);
        color: darken(@bg-body, 30%);
        .field-list {
            padding: 0;
        }
        .field-item {
            display: inline-block;
            &:after {
                content:' ,';
            }
            &:last-child:after {
                content:'';
            }
        }
    }
}

Viele der oben genannten Stile sind dekorativ. Aber hier sind einige wichtige Dinge, die es zu beachten gilt:

Zuerst setzen wir die Breite des .portfolio-area auf 100%, behalten jedoch die maximale Breite bei 960 Pixel bei. Dadurch kann sich die Breite in kleineren Ansichtsfenstergrößen elegant anpassen. Wie Sie oben sehen können, haben wir die Breite des .portfolio-item auf 33.3333333333333333% festgelegt. Dies liegt daran, dass in jeder Zeile drei Elemente angezeigt werden. Die 33.333333333333333% ergeben sich aus der Division von 100% durch 3.

Die .portfolio-cover-Breite ist auf 100% eingestellt und füllt daher die Breite des übergeordneten Elements. Das .portfolio-image wird mit einer max-width:100% festgelegt, damit das Bild unabhängig von der Größe die übergeordnete Breite nicht überschreitet. All diese Breiteneinstellungen helfen uns dabei, unsere Website flüssig zu machen.

Nun sollte der Portfolio-Bereich so aussehen.

Gestaltung der Fußzeile

Als nächstes werden wir die Stile für die Fußzeile hinzufügen. Die Fußzeile ist schlicht und einfach; Es besteht nur aus "Powered by" -Text und einem Behance-Symbol aus Foundation Icon-Schriftarten. Nachfolgend finden Sie alle Stilregeln für die Fußzeile.

.portfolio-footer {
    .margin(30px, auto);
    .max-width(960px);
    text-align: center;
    width: 100%;
    .power-by {
        .font-size(12px);
        color: darken(@bg-body, 30%);
        text-transform: uppercase;
    }
    .power-logo {
        .width(36px);
        .height(36px);
        color: #1769ff;
        display: inline-block;
        margin: 0 auto;
        overflow: hidden;
        position: relative;
        text-decoration: none;
        text-indent: 100%;
        white-space: nowrap;
        &:before {
            .line-height(38px);
            .font-size(36px);
            display: inline-block;
            height: 100%;
            left: 0;
            position: absolute;
            text-indent: 0;
            top: 0;
            width: 100%;
        }
    }
}

Ähnlich wie im Portfolio-Bereich setzen wir die Fußzeilenbreite auf 100% und richten sie an der Mitte des Browserfensters mit dem margin:0 auto;. Wir richten auch den gesamten Inhalt auf die Mitte aus, damit er ordentlich aussieht. Wir verstecken dann den Text im .power-logo mit der Kellum-Methode und zeigen nur das Behance-Logo mit der Markenfarbe Blau #1769ff an.

Hinweis: Behance hat einen ganzen Entwicklerabschnitt in seinen Markenrichtlinien, wenn Sie einen Blick darauf werfen möchten.

Die Fußzeile sollte jetzt ziemlich vollständig aussehen.

Die Website reaktionsschnell machen

Wir haben ein flüssiges Layout, aber jetzt werden wir unsere Webseite reaktionsfähig machen. Glücklicherweise ist unsere Website nur eine einseitige Website mit einem sehr einfachen Layout. Es ist also kein langer Code erforderlich, um darauf zu reagieren. Zunächst fügen wir das(entscheidende) Meta-Ansichtsfenster in das head-Tag ein.

1	<meta name="viewport" content="width=device-width, initial-scale=1.0">

Als nächstes fügen wir einige Medienabfragen wie folgt hinzu.

@media only screen and (min-width: 768px) and (max-width: 959px) {
    .portfolio-area .portfolio-item {
        width: 50%;
    }
}
@media only screen and (max-width: 767px) {
    .portfolio-area .portfolio-item {
        height: auto;
        width: 100%;
    }
}

Bei diesen Medienabfragen werden zwei Elemente in einer Reihe zwischen 959 Pixel und 768 Pixel Ansichtsfensterbreite und ein Element angezeigt, wenn die Ansichtsfensterbreite 767 Pixel und weniger beträgt.

Unsere Portfolio-Website in verschiedenen Ansichtsfenstergrößen

Nächstes Mal...

Nachdem Sie die Ästhetik unserer Seite gestaltet haben, müssen Sie nur noch etwas Flair hinzufügen. Im nächsten und letzten Teil dieser Serie können Besucher auf jedes Miniaturbild klicken und eine größere Version sehen. Außerdem werden wir einige CSS3-Animationen hinzufügen, um das Erlebnis zu verbessern.