Share
Im vorigen Teil dieser Serie haben wir etwas über die Behance-API erfahren, mit deren Hilfe die Portfolio-Teile eines Benutzers erfasst und auf einer Webseite angezeigt werden. In diesem Teil gestalten wir die Webseite und präsentieren die Portfolio-Teile entsprechend attraktiv.
Um zu beginnen, werden wir unser Toolkit vorbereiten:
Wir verwenden Normalize, um die grundlegenden Elementstile in verschiedenen Browsern konsistenter zu gestalten und die Wahrscheinlichkeit unerwarteter Ergebnisse zu minimieren.
Wir werden LESS auch verwenden, um unsere Website zu gestalten. Welchen Präprozessor Sie auch bevorzugen, es ist auf jeden Fall empfehlenswert, sie in Ihrem Workflow zu verwenden. Ich bin ein großer Fan von, anstatt die gewünschte Farbe im Farbwähler aus einer separaten Anwendung herauszurollen, indem Sie einfach weniger Steuerungsfunktionen wie erleichtern() und verdunkeln() um uns verschiedene Farbvarianten zu geben.
Um uns weiter zu helfen, verwenden wir LESSHat, um uns beim Schreiben zu helfen Weniger Code mit seiner Mixins-Sammlung. Wir werden auch Remixins verwenden, die von Christopher Ramírez entwickelt wurden. Remixins ist eine Sammlung von Mixins, die konvertiert werden sollen px in rem units in. Die Sammlung enthält die Mixins zur Festlegung Schriftgröße, Spanne, Polsterung, Breite und Höhe, und CSS-Position (links, Recht, Unterseite, und oben).
Darüber hinaus benötigen wir auch ein Werkzeug, um LESS in reguläres CSS zu übersetzen. 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 dieses Tutorial unabhängig von der verwendeten Plattform befolgen.
Weitere Informationen zu LESS finden Sie in den folgenden Tutorials:
Standard-Systemfonts wie Arial machen das heute für mich einfach nicht. 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 möchten.
Auf unserer Website verwenden wir außerdem Schriftzeichensymbole für ein wenig Dekoration. Heutzutage haben wir eine Vielzahl von Optionen für Schriftsymbole. Bei 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 Foundation Icon Fonts 3, da es das Behance-Symbol enthält und auch über ein CDN verfügbar ist.
Erstellen Sie in unserem Projektstammverzeichnis einige neue Ordner mit dem Namen Weniger und css (Dies ist der Ausgabeordner der LESS-Datei). Erstellen Sie eine neue Datei namens style.less und greifen Sie auf Remixins sowie LESShat zu. Setzen Sie diese drei WENIGER Stylesheets in die Weniger Mappe. Zu diesem Zeitpunkt sollte die Liste der Dateien und Ordner in unserem Projektverzeichnis folgendermaßen aussehen:
| - css | - index.html '- weniger | - lesshat.less | - remixins.less' - style.less
Fügen Sie dann Normalize, die Foundation Icon Fonts und unser Google Font-Stylesheet in das ein Kopf tag zusammen mit style.css, welches die Ausgabedatei sein wird style.less.
Öffnen Sie auch die Koala-App (oder welche Art von Kompilierung Sie bevorzugen) und fügen Sie unser Projektverzeichnis hinzu.
Das Projektverzeichnis in KoalaBevor wir Stile schreiben, fügen wir unserer Website einige Symbole hinzu. Zuerst fügen wir die Kartenstandortmarkierung neben dem Standortelement des Benutzers mit ein fi-marker Klasse. Fügen Sie diese Klasse neben dem hinzu Profil-Standort Klasse wie folgt:
…user.city, user.country…
Dies wird eine hinzufügen :Vor Pseudoelement zum div, Einfügen des Markersymbols durch unsere Foundation-Icons. Als Nächstes fügen wir das Behance-Logo mit der Taste in den Fußzeilenbereich ein fi-soziales Verhalten Klasse.
…Behance
…
Öffnen wir unseren style.less und importieren Sie sowohl lesshat.less als auch remixins.less mit (Referenz) Kennzeichen.
@import (Referenz) 'lesshat.less'; @import (Referenz) 'remixins.less';
Das (Referenz) Marke wurde in WENIGER 1.5 eingeführt. Das bedeutet, dass LESS die Datei nur als Referenz verwendet. Der Inhalt wird nicht kompiliert und in die Datei ausgegeben. Es ist eine sehr leistungsfähige Funktion, die doppelte und unnötige Stile minimiert.
In style.less fügen wir die folgenden Variablen hinzu, die die Farbpalette und die Schriftfamilie unserer Website speichern.
@ bg-body: #fafafa; @ bg-header: # 303746; @ Farbbasis: # 353537; @ Farbname: # e0e0e0; @ color-title: # 6b919f; @ font-body: 'Open Sans', Arial, serifenlos; @ font-name: 'Cantata One', Georgia, Times, Serife;
Das Platzieren dieser Variablen an einer Stelle dient als eine Art Style-Guide, hilft uns aber auch, unsere Styles auf bequemere Weise zu erhalten. Wenn beispielsweise auf der Website etwas geändert werden soll, können wir einfach den Wert innerhalb dieser Variablen ändern. Es ist eine viel sicherere Möglichkeit, Stile zu ändern, anstatt "Suchen und Ersetzen" auszuführen..
Obwohl wir Normalize hinzugefügt haben, das unsere Elementstile standardisiert hat, müssen wir noch einige Stile anpassen, um unseren besonderen Bedürfnissen zu entsprechen. Zu Beginn ändern wir die Größe der Box und setzen alle Box-Größen der Elemente (einschließlich der Pseudo-Elemente) auf Border-Box. Dies gibt unseren Dimensionen eine viel besser kontrollierbare Basis für die Arbeit.
Das können wir mit der .Box-Sizing Mixins aus der LESSHat-Bibliothek wie folgt:
*, *: before, *: after .box-size (border-box);
Als nächstes werden wir das einstellen html Schriftgröße bis 62,5%, Dies ist ein Ansatz, um relative Einheiten besser handhabbar zu machen.
html font-size: 62.5%;
62,5% werden hier an dem Browserstandard von 1em gemessen, der 16px beträgt; 62,5% von 16px ist also gleich 10. Dadurch können wir leicht die Umwandlung von ermitteln rem im px durch Multiplizieren mit 10 multipliziert. 1.2rem zum Beispiel ist gleich 12px und so weiter. Wenn wir einen Blick auf remixins.less source werfen, finden wir außerdem die Basisschriftgröße in @ base-font-size-px Variable ist auf 10 gesetzt.
Sie können diese Artikel für weitere Informationen zur relativen CSS-Einheit verwenden:
Wir benutzen ein Zahl Element, das die Portfolioabdeckung des Portfolios enthält. Aber unser Zahl Das Element hat Randwerte von Normalize geerbt, was zu einem unbeabsichtigten Leerraum zwischen den Portfolio-Bildern führt. Hier entfernen wir also den Rand von Zahl Element.
Zahl Marge: 0; / * überschreiben Normalize.css Standardstil * /
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. Wir werden hier den Clearfix-Tipp von Nicolas Gallagher hinzufügen, den wir in LESS umgewandelt haben.
.clearfix * zoom: 1; &: before, &: after content: ""; Anzeige: Tisch; &: after clear: both;
Wenn Sie sich unsere HTML-Struktur ansehen, haben wir hinzugefügt Clearfix Klasse zu einigen Elementen.
Für die Karosserie, Wir werden die Schriftstile festlegen, die für die gesamte Seite gelten. Diese Stile umfassen die Schriftgröße, Schriftfarbe, Schriftbreite, Schriftfamilie und die Hintergrundfarbe. Hier verwenden wir die .Schriftgröße() mixin aus der Remixins-Bibliothek, um die Schriftgröße zu erzeugen. Alle Mixins in der Remixins-Bibliothek generieren eine px Unit Fallback, hilfreich für Browser, die das nicht unterstützen rem Einheit.
Körper .Font-Größe (16px); Hintergrundfarbe: @ bg-body; Farbe: @ Farbbasis; font-family: @ font-base; Schriftgewicht: 300;
Nachdem Sie die Datei gespeichert haben, erstellt Koala die Ausgabe automatisch. Und der obige Code sollte in normalem CSS so aussehen.
body font-size: 16px; Schriftgröße: 1.6rem; Hintergrundfarbe: #fafafa; Farbe: # 353537; Schriftfamilie: 'Open Sans', Arial, Sans-Serif; Schriftgewicht: 300;
Als Nächstes werden die Stile für den Website-Header wie folgt hinzugefügt.
.Portfolio-Header .padding (50px, 0); Hintergrundfarbe: @ BG-Header; Text ausrichten: Mitte; .profile-avatar img .size (80px); Grenzradius: 50%; .profile-name .font-size (24px); .margin-bottom (10px); Farbe: @ Farbname; Schriftfamilie: @ Schriftname; Schriftgewicht: 400; .profile-Felder .max-width (320px); .font-size (14px); Farbe: Aufhellen (@ BG-Kopf, 50%); Rand links: auto; Rand rechts: auto; .field-list padding: 0; .field-item Anzeige: Inline-Block; &: after content: ','; &: last-child: after content: "; .profile-location .font-size (14px); color: heller (@ bg-header, 30%); &: vor .margin-right (10px); .font-size (18px);
Dies ist ein ziemlich großes Stück Syntax, also lassen wir es in Stücke zerlegen und untersuchen, was es tut. Erstens haben wir in der Kopfzeile Hintergrundfarbe mit der in unserer gespeicherten Farbe hinzugefügt @ bg-Header Variable. Wir gebrauchen .Polsterung() Mixins von Remixins zum Hinzufügen von Füllungen an der Ober- und Unterseite des Headers, wodurch mehr vertikaler Leerraum entsteht. Wir haben auch hinzugefügt Text ausrichten: zentrieren So sieht unser Inhalt mehr in Ordnung.
.Portfolio-Header .padding (50px, 0); Hintergrundfarbe: @ BG-Header; Textausrichtung: Mitte;…
Wir haben die Avatar-Bildgröße des Benutzers mit festgelegt .Größe() Mixins und kreisförmig gemacht, indem der Randradius auf 50% gesetzt wird. Sie können sehen, dass diese Stile in deklariert sind .Profil-Avatar img.
.Profil-Avatar img .size (80px); Grenzradius: 50%;
Nachfolgend sind die Regeln für den Namen des Benutzers aufgeführt. Hier stellen wir die Schriftgröße mit ein .Schriftgröße() mixin. Wir haben die eingesetzt @ Farbname Variable für die Schriftfarbe und übergeben die Schriftfamilie mit der @Schriftfamilie Variable. Und schließlich haben wir hinzugefügt Schriftgewicht: 400; um die Schrift mutiger als der Rest aussehen zu lassen.
.Profilname .Font-Größe (24px); .margin-bottom (10px); Farbe: @ Farbname; Schriftfamilie: @ Schriftname; Schriftgewicht: 400;
Als Nächstes betrachten wir die Regeln für den Bereich der User-Creative-Felder, auf die wir abzielen .Profilfelder. In Behance können Sie beliebig viele Fähigkeiten oder Feldspezialitäten hinzufügen. Das bedeutet, dass jeder Benutzer kurze oder sehr lange Skillbeschreibungen hat. Ich habe mich deshalb entschieden, die Breite mit a einzustellen maximale Breite. Wir haben die Schriftfarbe für 50% heller vom Hintergrund der Kopfzeile mit eingestellt aufhellen (@ bg-header, 50%).
Darüber hinaus ist jedes Feldelement durch ein Komma getrennt, das wir über ein :nach dem Pseudoelement. Logischerweise sollte das letzte Element jedoch kein Komma enthalten. Daher haben wir das letzte Element mit ausgewählt :letztes Kind und setze das Inhalt Eigenschaft, leer zu sein Inhalt:".
.Profilfelder max-Breite (320px); .font-size (14px); Farbe: Aufhellen (@ BG-Kopf, 50%); Rand links: auto; Rand rechts: auto; .field-list padding: 0; .field-item Anzeige: Inline-Block; &: after content: ','; &: last-child: after content: ";
Nachfolgend sind die Stilregeln für die Gestaltung des Benutzerstandorts aufgeführt. Hier setzen wir die Farbe etwas heller als die Hintergrundfarbe, 30% um genau zu sein. Außerdem haben wir die Lücke zwischen dem Text und dem Markierungssymbol von Foundation Icon Fonts durch Hinzufügen etwas erweitert Rand rechts zum :Vor Pseudoelement.
.Profilposition .Font-Größe (14px); Farbe: Aufhellen (@ BG-Kopf, 30%); &: before .margin-right (10px); .font-size (18px);
Nachdem Sie diese Stile hinzugefügt haben, sollte die Kopfzeile nun etwa wie folgt aussehen:
Das folgende Snippet enthält alle Stile für unser Portfolio.
.Portfolio-Bereich . Margin (50px, Auto); max Breite (960px); Breite: 100%; .portfolio-list padding-left: 0; .portfolio-item .margin-bottom (30px); Höhe (320px); Padding (0, 15px); Schwimmer: links; Typ des Listentyps: keine; Breite: 33.33333333333333%; .portfolio-content text-align: center; .portfolio-cover width: 100%; .portfolio-image border: 8px fest #fff; Max-Breite: 100%; .portfolio-title .font-size (14px); Farbe: dunkler (@ color-title, 10%); Text-Transformation: Großschreibung; vertikal ausrichten: Mitte; Breite: 100%; .portfolio-fields .font-size (12px); Farbe: dunkler (@ bg-body, 30%); .field-list padding: 0; .field-item Anzeige: Inline-Block; &: after content: ','; &: last-child: after content: ";
Viele der oben genannten Stile sind dekorativ. Hier einige wichtige Punkte, die es zu beachten gilt:
Zuerst setzen wir die .Portfolio-Bereich Breite auf 100%, aber die maximale Breite bleibt bei 960px. Dadurch kann sich die Breite in kleinerer Ansichtsfenstergröße elegant anpassen. Wie Sie oben sehen können, haben wir auch das festgelegt .Portfolio-Element Breite auf 33.33333333333333%. Dies liegt daran, dass in jeder Zeile drei Elemente angezeigt werden. Das 33,33333333333333% wird aus der Division von 100% durch 3 abgeleitet.
Das .Portfolio-Abdeckung width ist auf 100% gesetzt, daher wird die Breite des übergeordneten Elements ausgefüllt. Das .Portfolio-Bild wird mit gesetzt Max-Breite: 100% Das Bild wird also unabhängig von der Größe nicht die übergeordnete Breite überschreiten. Alle diese Breiteneinstellungen helfen uns dabei, unsere Website flüssiger zu machen.
Nun sollte der Portfolio-Abschnitt so aussehen.
Als Nächstes fügen wir die Stile für die Fußzeile hinzu. Die Fußzeile ist schlicht und einfach. Es besteht nur aus "Powered by" Text und einem Behance-Symbol aus Foundation Icon Fonts. Nachfolgend finden Sie alle Stilregeln für die Fußzeile.
.Portfolio-Fußzeile .margin (30px, auto); max Breite (960px); Text ausrichten: Mitte; Breite: 100%; .power-by .font-size (12px); Farbe: dunkler (@ bg-body, 30%); Text-Transformation: Großbuchstaben; .power-logo .breite (36px); Höhe (36px); Farbe: # 1769ff; Anzeige: Inline-Block; Marge: 0 auto; Überlauf versteckt; Position: relativ; Textdekoration: keine; Text Gedankenstrich: 100%; Leerraum: Nowrap; &: vor Zeilenhöhe (38px); .font-size (36px); Anzeige: Inline-Block; Höhe: 100%; links: 0; Position: absolut; Text-Gedankenstrich: 0; oben: 0; Breite: 100%;
Ähnlich wie beim Portfolio-Abschnitt stellen wir die Breite der Fußzeile auf 100% ein und richten sie mit der Mitte des Browserfensters aus Marge: 0 auto;. Wir richten auch den gesamten Inhalt an der Mitte aus, damit er ordentlich aussieht. Wir verstecken dann den Text im Inneren .Power-Logo Verwenden Sie die Kellum-Methode und zeigen Sie nur das Behance-Logo mit der Markenfarbe Blau an # 1769ff.
Hinweis: Wenn Sie einen Blick darauf werfen möchten, haben Sie eine ganze Reihe von Entwicklern zu ihren Branding-Richtlinien.
Die Fußzeile sollte jetzt ziemlich vollständig aussehen.
Wir haben ein fließendes Layout, aber jetzt werden wir unsere Webseite ansprechbar machen. Glücklicherweise ist unsere Website nur eine einzige Seite mit einem sehr einfachen Layout. Daher ist kein langer Code erforderlich, um reaktionsfähig zu sein. Zunächst fügen wir das (entscheidende) Meta-Ansichtsfenster in das Fenster ein Kopf Etikett.
Als Nächstes fügen wir wie folgt einige Medienabfragen hinzu.
@media only screen und (min-width: 768px) und (max-width: 959px) .portfolio-area .portfolio-item width: 50%; @media only screen und (max-width: 767px) .portfolio-area .portfolio-item height: auto; Breite: 100%;
Bei diesen Medienabfragen werden zwei Elemente in einer Reihe zwischen 959px und 768px Breite des Ansichtsfensters und ein Element angezeigt, wenn die Breite des Ansichtsfensters 767px und weniger beträgt.
Unsere Portfolio-Website in verschiedenen DarstellungsgrößenNachdem wir 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 anzeigen. Außerdem werden einige CSS3-Animationen hinzugefügt, um das Erlebnis zu verbessern.
Accentsconagua