Erstellen der Responsiven Zeitleiste-Portfolioseite

() translation by (you can also view the original English article)

Final product image — What You'll Be Creating

Während dieses Tutorials werden wir das fantastische Zeitleiste-Portfolio erstellen, wie es in einem früheren Tutorial von Tomas Laurinavicius zu sehen war. Wir werden einige Responsive-Techniken sowie CSS3-Animationen, Sass und ein bisschen jQuery verwenden.

Datei- und Verzeichnisstruktur

OK, der erste Schritt besteht darin, die benötigten Dateien und Ordner zu erstellen. Das Bild unten zeigt unsere Wurzelstruktur.

Wie Sie sehen können, haben wir hier eine sehr einfache Einrichtung. Erstellen Sie im Verzeichnis "css" eine Datei "styles.scss" und besorgen Sie sich eine Kopie von normalize.css. Um Sass in diesem Projekt zu verwenden, müssen Sie entweder Sass auf Ihrem Computer installieren oder Sie benötigen eine App, die das Anschauen und Kompilieren für Sie übernimmt. Ich verwende derzeit CodeKit für Mac, aber es gibt viele Alternativen wie Prepos, Scout und Koala, um nur einige zu nennen. Sie sind nicht alle kostenlos, aber für welches Sie sich auch entscheiden, sparen Sie viel Zeit!

Erstellen Sie im Ordner "js" eine Datei namens app.js und laden Sie eine Kopie von modernizr.js herunter, um sie ebenfalls hier zu platzieren. Der von mir verwendete Modernizr-Build enthält alle CSS3- und HTML5-Tests, da wir nicht mehr benötigen sollten. Richtig, das deckt unsere anfänglichen Dateien und Ordner ab. Der nächste Schritt besteht darin, unser PSD-Design zu überprüfen, um zu sehen, welche Bits herausgeschnitten werden müssen.

Schneiden der PSD

Das Design dieser Seite ist unkompliziert, was die Entscheidung erleichtert, ob wir Slices benötigen. Tomas hat tatsächlich alle diese Assets zusammen mit der PSD bereitgestellt, sodass es möglich wäre, überhaupt keine Slices von diesem Design zu haben. Ich habe mich jedoch für dieses Tutorial entschieden, dass wir die drei Portfoliobilder und das Ladesymbol am unteren Rand der Seite ausschneiden sollten. Dies dient vor allem der Einfachheit, sodass wir in Photoshop keine Größenänderung vornehmen müssen.

Nehmen Sie in Photoshop das Slice-Werkzeug und zeichnen Sie die Slices vorsichtig aus. Sie können jedem Slice einen Namen geben, indem Sie darauf doppelklicken. Verwenden Sie dann Für Web speichern... (oder einen ähnlichen Menüpunkt, je nach Photoshop-Version), um die Slices in unser Bilderverzeichnis zu exportieren.

Ich habe dann einen neuen Ordner in "Bilder" namens "Portfolio" erstellt, der die Bilder zu den Portfolio-Elementen enthält. Verschieben Sie die drei Portfoliobilder in diesen Ordner und damit ist unser Slicing-Prozess abgeschlossen!

Avatar-Bild

Gehen Sie nun zu uifaces.com und wählen Sie eines der Bilder aus, das Sie als unser Profilbild verwenden möchten. Ich habe es geschafft, das gleiche wie das Design zu finden, aber es spielt keine Rolle, wen Sie wählen. Besorgen Sie sich die 128x128-Version und fügen Sie sie in den Ordner "images" ein.

Wir sind fast fertig mit unseren Bildern, nur die Social Media- und Navigationssymbole müssen sortiert werden. Das machen wir als nächstes.

Sprites

Wenn Sie Gruppen von Bildern wie Symbolen haben, ist es eine gute Idee, ein Bild zu erstellen, das alle in einem Rastermuster enthält. Diese werden Sprites genannt. Sie können dies auf die Spitze treiben und eine große Datei von jedem einzelnen Bild auf Ihrer Website erstellen, aber für dieses Tutorial werden wir zwei Sprites und eine entsprechende Retina-Version für jedes erstellen.

Mit den von Tomas bereitgestellten Asset-Links können wir also jedes der Social-Media-Symbole herunterladen. Besorgen Sie sich jeweils die 128x128-Pixel-Version, damit wir auf die benötigten Größen skalieren können. Dann müssen wir in Photoshop eine Datei erstellen, die 101 x 51 Pixel groß ist. Ziehen Sie jedes der Social-Media-Symbole in diese Datei und verkleinern Sie die Größe auf 24 x 24 Pixel. Die Symbole sind schwarz, aber wir müssen sie weiß sein. Wenden Sie also auf jedes Symbol einen Ebenenstil an, der eine weiße Farbüberlagerung ergibt. Ändern Sie Ihre Hintergrundfarbe in etwas Dunkles, damit wir sie sehen können, und ordnen Sie sie dann so an ...

Jedes Symbol ist genau 1 Pixel von den Kanten und voneinander entfernt. Ich habe auch die Deckkraft jedes Symbols auf 80% geändert. Duplizieren Sie nun diese Reihe von Symbolen und platzieren Sie sie direkt darunter. Achten Sie darauf, dass sie 1 Pixel von den Rändern entfernt ist. Ändern Sie die Deckkraft der zweiten Reihe von Symbolen auf 100%. So sollte es aussehen...

Blenden Sie nun die Hintergrundebene in Photoshop aus, um einen transparenten Hintergrund zu erhalten, und speichern Sie für das Web als PNG mit dem Titel social-sprite.png im Ordner "images". Der nächste Schritt besteht darin, die Retina-Version dieses Sprites zu erstellen, damit wir scharfe Symbole auf Displays mit hoher Pixeldichte erhalten. Dies sollte ziemlich einfach sein und beinhaltet nur die Verdoppelung der Größe dessen, was wir bereits haben. Die Retina-Version wird also 202px mal 102px groß sein. Denken Sie daran, dass alles verdoppelt werden muss, einschließlich des Abstands um jedes Symbol. Für dieses Sprite benötigen wir also 2 Pixel zwischen jedem Symbol und an den Rändern. Die fertige Retina-Version sollte so aussehen...

Super! Jetzt einfach die Hintergrundebene wie zuvor ausblenden und als PNG exportieren, aber dieses Mal nennen Sie es social-sprite@2x.png. Dies ist eine Standardbenennungskonvention für die Retina-Version einer Bilddatei.

Jetzt müssen wir nur noch mit den Navigationssymbolen vorgehen. Diese Symbole sind Vektorobjekte innerhalb der PSD, was bedeutet, dass wir sie einfach in eine neue Datei duplizieren und nach Bedarf skalieren können. Die benötigte Größe für die normale Version beträgt 49 x 18 Pixel und die Retina-Version mit der doppelten Größe beträgt 98 x 36 Pixel. Die fertigen Bilder sollten so aussehen:

Ausgezeichnet! Speichern Sie diese als nav-sprite.png und nav-sprite@2x.png. Ich denke, das ist alles, was wir für die Bilder tun müssen, also lassen Sie uns weitermachen, um etwas Code zu schreiben!

Das Basis-HTML und Sass

Beginnen wir mit den Barebones unserer Seite. Kopieren Sie in unserer index.html das folgende Markup, um zu beginnen:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0">

    <title>My Portfolio</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/modernizr.js"></script>
</head>
<body>
    <main class="wrap group">
        <aside class="sidebar">
           <div class="my-info">

           </div>
           <nav class="menus">

           </nav>
        </aside>
        <div class="content">

        </div>
    </main>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="js/app.js"></script>
</body>
</html>

Es handelt sich um ein einfaches Layout mit dem main-Wrapping-Element, das eine aside Seitenleiste und ein Inhalts-div enthält. In der Seitenleiste haben wir zwei Bereiche, my-info und ein nav mit einer Klasse von menus. Unsere Abhängigkeiten sind ebenfalls alle enthalten, insbesondere die neueste Version von jQuery 1.x. Beginnen wir nun damit, unsere Sass-Datei mit einigen Variablen auszufüllen.

$black: #000;
$white: #FFF;
$grey: #f7f7f7;
$darkgrey: #5e5e5e;
$red: #d35136;
$green: #27b599;
$blue: #088ecc;
$darkblue: #11171c;

$padding: 10px;
$margin: 10px;
$main-width: 1000px;

$font-size: 14px;
$font-family: 'Lato', sans-serif;
$line-height: 1.4;

$break-four: 1050px;
$break-three: 760px;
$break-two: 520px;
$break-one: 360px;

@import url('http://fonts.googleapis.com/css?family=Lato:300,400,700');
@import url('normalize.css');

//Utilities
.group:after {
  content: "";
  display: table;
  clear: both;
}

Das ist ein ordentlicher Codeblock für den Anfang! Dies ist wirklich nur das Einrichten einiger Standardeinstellungen und Variablen zur Verwendung in unserer gesamten Sass-Datei. Der wichtigste Abschnitt hier ist der, der die vier Breakpoint-Variablen enthält. Diese legen fest, an welchen Stellen sich unser Layout ändern soll. Sass ist hier sehr praktisch, da wir beim Schreiben unserer Medienabfragen einfach auf diese Variablen verweisen können und wenn ein Breakpoint geändert werden muss, gibt es nur einen Ort, um ihn zu ändern.

Wie Sie an der @import-Anweisung sehen können, importieren wir auch die im Design verwendete Google-Schriftart und die zuvor heruntergeladene Kopie von Normalize.css. Die einzige Deklaration bisher ist die group-Klasse, die ein Clearfix für Elemente ist, die Floating-Elemente enthalten. Weitere Informationen hierzu finden Sie auf nicolasgallagher.com.

Wenn alles richtig eingerichtet ist, wird beim Speichern von style.scss die einfache CSS-Datei generiert, die wir in unsere Seite aufgenommen haben. Wenn Sie die Seite jetzt anzeigen, wird ein ziemlich langweiliger weißer Bildschirm angezeigt. Machen wir es also noch lustiger, indem Sie weitere Stile hinzufügen und den Seitenleistenbereich ausgestalten.

Die Seitenleiste; Meine Information

Zunächst fügen wir unserer Sass-Datei Folgendes hinzu:

//Main styles
* {
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

html, body, .wrap {
    min-height: 100%;
}

body {
    color: $grey;
    font-size: $font-size;
    font-family: $font-family;
    line-height: $line-height;
    background: $darkblue;
}

Jedes Element sollte jetzt relative positioniert werden und auch die box-sizing-Eigenschaft auf border-box gesetzt haben, sodass die Elemente prozentuale Breiten einschließlich ihrer Auffüllung haben können. Das heißt, wir können zwei Elemente mit 50% Breite nebeneinander setzen und dann die Polsterung in jedem beliebig anpassen, ohne das Layout zu zerstören. Eine sehr, sehr nützliche CSS-Regel! Die Unterstützung für fast alle Browser erfolgt über die Hersteller-Präfix-Deklarationen.

Die verbleibenden Stile hier dienen als Standard für unsere Seite. Wir müssen sicherstellen, dass die Hauptumhüllungselemente jederzeit auf 100% Höhe bleiben, da unsere Seitenleiste den Bildschirm vertikal ausfüllen muss. Wir setzen den Körperhintergrund hier auf $darkblue, was eigentlich unsere Seitenleistenfarbe ist. Dies verleiht unserer Seitenleiste das Erscheinungsbild von 100% Höhe. In Wirklichkeit ist das Seitenleistenelement selbst nur so hoch wie sein Inhalt, hat aber einen transparenten Hintergrund und zeigt so die Farbe dahinter.

Fangen wir an, die Seitenleiste auszuarbeiten...

<img src="images/cj.jpg" alt="Chris Johnson" class="portfolio-image">
<h1>Chris Johnson</h1>
<h2>Experienced UX/UI <br> Designer based in London, UK</h2>
<div class="social group">
    <a href="#" class="dribbble">Dribbble</a>
    <a href="#" class="twitter">Twitter</a>
    <a href="#" class="facebook">Facebook</a>
    <a href="#" class="googleplus">Google+</a>
</div>

Fügen Sie diesen Code in das .my-info-Div ein. Möglicherweise müssen Sie das portfolio-image umbenennen, je nachdem, wie Sie es genannt haben. Hier ist nicht viel los, aber speichern Sie die Datei und schauen Sie im Browser nach.

Schön. Öffnen Sie nun style.scss und geben Sie folgenden Code ein:

.sidebar {
    width: 100%;
    height: 100%;

    @media screen and (min-width: $break-three) {
        float: left;
        width: 20%;
    }


    .my-info {
        text-align: center;
        padding: $padding*3 0;
        border-bottom: 1px solid $darkgrey;

        .portfolio-image {
            border-radius: 50%;
        }

        h1, h2 {
            font-weight: normal;
        }

        h1 {
            font-size: 120%;
        }

        h2 {
            font-size: 100%;
        }

    }

}

Da wir hier eine Mobile-First-Strategie verfolgen, muss unsere Seitenleiste bei mobilen Auflösungen die volle Breite und Höhe aufweisen. Eine schnelle Medienabfrage für unseren Breakpoint $break-three verschiebt die Seitenleiste nach links und begrenzt die Breite auf 20 %.

Die Stile für .my-info sind einfach genug. Wir wollen nur alles zentrieren und allen etwas Platz an den Rändern geben. Um unseren zukünftigen Menübereich abzutrennen, verwenden wir einfach einen 1px-Rahmen am unteren Rand. Um das portfolio-image kreisförmig zu machen, geben Sie ihm border-radius von 50% und schließlich müssen wir einige Schriftstile für alle h1- oder h2-Elemente in diesem Abschnitt überschreiben.

Social-Media-Links

Jetzt müssen wir uns mit diesen Social-Media-Links auseinandersetzen, indem wir eines der Sprites verwenden, die wir zuvor erstellt haben. Platzieren Sie den folgenden Code direkt nach den h2-Deklarationen im letzten Codeblock.

.social {
    width: 120px;
    margin: 0 auto;

        a {
            float: left;
            width: 25px;
            height: 25px;
            margin: 0 $margin/5;
            background: url(../images/social-sprite.png) no-repeat;
            text-indent: -9999px;

            @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2) {
                background: url(../images/social-sprite@2x.png) no-repeat;
                background-size: 101px 51px;
            }

            &.dribbble {
                background-position: 0px 0px;

                &:hover {
                    background-position: 0px -25px;
                }

            }

            &.twitter {
                background-position: -25px 0px;

                &:hover {
                    background-position: -25px -25px;
                }
            }

            &.facebook {
                background-position: -50px 0px;

                &:hover {
                    background-position: -50px -25px;
                }
            }

            &.googleplus {
                background-position: -75px 0px;

                &:hover {
                    background-position: -75px -25px;
                }
            }

        }
}

Das sieht ziemlich kompliziert aus, ist es aber nicht. Der Großteil dieses Codes behandelt die Darstellung der Symbole und ihrer Hover-Zustände. Zuerst müssen wir jedes der <a>-Elemente schweben lassen, ihnen eine Breite und Höhe und auch einen gewissen Abstand geben, um sie zu verteilen. Als nächstes legen wir das Hintergrundbild fest. Dies sollte auf das zuvor erstellte Social-Sprite eingestellt werden. Schließlich müssen wir sicherstellen, dass der in jedem Element verwendete Text nicht auf der Seite erscheint. Dafür sorgt die Eigenschaft text-indent.

Der nächste Abschnitt ist der interessanteste. Hier legen wir fest, welcher Hintergrund für Displays mit hoher Pixeldichte verwendet werden soll. Die Idee hier ist, die "verdoppelte" Version des Social-Sprites zu verwenden, wenn das Pixelverhältnis des Geräts 2 beträgt. Die background-size-Eigenschaft ist erforderlich, um die Datei wieder auf die Originalgröße zu skalieren, sodass unser gesamter Positionierungscode nur funktioniert, ohne etwas duplizieren zu müssen.

Die nächsten vier Abschnitte sind alle das gleiche Konzept. Wir legen nur die Hintergrundposition für jedes Symbol und den jeweiligen Hover-Zustand fest. Werfen wir einen Blick in den Browser:

Genial! Das sieht richtig gut aus. Wenn alles korrekt ist, sollten die Hover-Zustände alle funktionieren und sie sollten alle auf einem iPhone/iPad usw. scharf aussehen. Jetzt beginnen wir mit dem Seitenleistenmenü.

Die Seitenleistenmenüs

Geben Sie zunächst Folgendes in index.html im menus-Container ein.

1	<h3 class="work">Work</h3>
2	<ul>
3	<li><a href="#" class="current-menu-item">Latest</a></li>
4	<li><a href="#">Web Design</a></li>
5	<li><a href="#">Branding</a></li>
6	<li><a href="#">Photography</a></li>
7	<li><a href="#">Print</a></li>
8	<li><a href="#">Mobile Design</a></li>
9	</ul>
10
11	<h3 class="about">About</h3>
12	<ul>
13	<li><a href="#">Skills</a></li>
14	<li><a href="#">Experience</a></li>
15	<li><a href="#">Education</a></li>
16	<li><a href="#">Clients</a></li>
17	<li><a href="#">Testimonials</a></li>
18	<li><a href="#">Blog</a></li>
19	</ul>
20
21	<h3 class="contact">Contact</h3>
22	<ul>
23	<li><a href="#">Address</a></li>
24	<li><a href="#">Phone</a></li>
25	<li><a href="#">Social Networks</a></li>
26	<li><a href="#">Email</a></li>
27	</ul>

Ziemlich selbsterklärend, denke ich, also lasst uns fortfahren, indem wir die folgenden Stile nach dem Abschnitt my-info eingeben, aber immer noch innerhalb des gesamten sidebar-Elements.

.menus {
    text-align: center;

    @media screen and (min-width: $break-three) {
        padding: $padding*2 $padding*3;
    }

    h3 {
        text-transform: uppercase;
        font-size: 120%;
        font-weight: normal;
        padding-left: $padding*2.5;
        cursor: pointer;
        width: 20%;
        margin: $margin*2 $margin*11 $margin;

        @media screen and (min-width: $break-one) {
            margin: $margin*2 auto $margin*2;
        }

        @media screen and (min-width: $break-three) {
            margin: $margin*2 0 $margin 0;
        }

        &:before {
            content: "";
            position: absolute;
            top: 0px;
            left: 0px;
            height: 18px;
            display: block;
            background: url(../images/nav-sprite.png) no-repeat;

            @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2) {
                background: url(../images/nav-sprite@2x.png) no-repeat;
                background-size: 49px 18px;
            }
        }

        &.work {
            color: $red;

            &:before {
                width: 15px;
                background-position: 0px 0px;
            }
        }

        &.about {
            color: $green;

            &:before {
                width: 17px;
                background-position: -15px 0px;
            }
        }

        &.contact {
            color: $blue;

            &:before {
                width: 17px;
                background-position: -32px 0px;
            }
        }
    }
}

Dies ist den Social Icons in Bezug auf das Konzept und die Umsetzung des Konzepts tatsächlich sehr ähnlich. Für den menus-Punkt selbst wollen wir nur, dass alles zentriert ist. Sobald wir unseren $break-three-Haltepunkt überschritten haben, benötigen wir etwas Auffüllen, um die Menüs etwas von den Rändern weg zu positionieren.

Jedes der h3-Elemente sollte unterschiedliche Farben und unterschiedliche Symbole haben. Dazu verwenden wir eine Kombination aus dem Pseudoelement :before, Sprites und Medienabfragen. Abgesehen davon haben wir ein paar Medienabfragen, um die Ränder der h3-Elemente bei größeren Bildschirmgrößen zu steuern. Auf diese Weise sind sie immer richtig in Bezug auf ihre Menüs positioniert.

Apropos Menüs, wir werden das CSS für sie gleich hinzufügen. Werfen wir zunächst einen Blick in den Browser:

Die Titel sehen wirklich gut aus! Die Menüs nicht so sehr. Lassen Sie uns das schnell erledigen, bevor uns die blauen Voreinstellungen noch mehr Schmerzen bereiten...

Menülisten

ul {
    list-style: none;
    padding: 0;
    display: none;
    margin: 0 $margin*13.5 $margin;
    text-align: left;
    
    @media screen and (min-width: $break-three) {
        margin: 0 0 0 $margin*2.5;
        display: block;
        width: auto;
    }

    &.open {
        display: inline-block;
        margin: 0 auto $margin $margin*6;

        @media screen and (min-width: $break-three) {
            margin: 0 0 0 $margin*2.5;
            display: block;
            width: auto;
        }
    }

    li {
        a {
            color: $darkgrey;
            text-decoration: none;
            -webkit-transition: color 0.4s ease;
            -moz-transition: color 0.4s ease;
            -o-transition: color 0.4s ease;
            -ms-transition: color 0.4s ease;
            transition: color 0.4s ease;

            &:hover, &.current-menu-item {
                color: $white;
                -webkit-transition: color 0.4s ease;
                -moz-transition: color 0.4s ease;
                -o-transition: color 0.4s ease;
                -ms-transition: color 0.4s ease;
                transition: color 0.4s ease;
            }
        }
    }
}

Bei mobilen Auflösungen möchten wir, dass unsere Menüs ausgeblendet sind, damit der Benutzer sie ausblenden oder anzeigen kann, wenn er darauf zugreifen muss. Sobald wir unseren $break-three-Punkt erreicht haben, sollten die Menüs die ganze Zeit sichtbar sein.

Die .open-Klasse behandelt, wie die Menüs angezeigt werden, wenn sie geöffnet sind. Das Design hat sie ziemlich genau platziert, also machen wir das gleiche hier mit Rändern. Auch hier kommt der $break-three-Punkt ins Spiel und überschreibt die Spielräume für diese Auflösungen und darüber. Die Stile für li-Elemente sind ziemlich einfach. Zu beachten ist vor allem die Verwendung von CSS3-Übergängen. Ich habe sie hier verwendet, um beim Schweben über dem Element eine schöne Ausblendung zu erzielen. Ich ermutige Sie, mit Übergängen herumzuspielen, um zu sehen, welche interessanten Effekte Sie erzielen können!

Lassen Sie uns die Datei speichern und die Ergebnisse im Browser anzeigen.

Sehr schön! Die Menüs verhalten sich genau so, wie sie sollten. Wir führen jetzt unser erstes bisschen JavaScript/jQuery aus, um das Öffnen und Schließen der Menüs zu steuern.

Öffnen Sie app.js und geben Sie die folgende Funktion ein:

$(function() {

    $('.menus h3').on('click', function(e) {
        $(this).next('ul').toggleClass('open');
        e.preventDefault(); return false;
    });

});

Wir starten diese Datei mit der jQuery document ready-Funktion, die im Grunde wartet, bis das Dokument vollständig bereit ist, bevor der Code ausgeführt wird. Lesen Sie mehr zum Ready-Event auf api.jquery.com.

Wir fügen dann jedem h3 innerhalb unseres menus-Elements ein Click-Ereignis hinzu. Wenn dieses Ereignis eintritt (wenn der Benutzer auf h3 klickt), verwenden wir jQuery, um das "nächste" ul-Element zu finden und die Klasse von open darauf umzuschalten. Wenn das Element die Klasse bereits enthält, wird sie entfernt und umgekehrt, wenn dies nicht der Fall ist. Die letzte Zeile ist dazu da, jede Standardaktion für das Element zu stoppen. Dies trifft hier wahrscheinlich nicht zu, da h3-Elemente keine Standardaktion haben, während zum Beispiel ein Anchor-Tag dies tut. Dennoch empfiehlt es sich, es bei der Verwendung von Click-Event-Handlern einzubeziehen.

Speichern Sie diese Datei und kehren Sie zum Browser zurück. Wenn Sie bei mobilen Auflösungen auf die Menütitel klicken, sollte das Menü darunter geöffnet werden. Wenn dies nicht der Fall ist, überprüfen Sie das JavaScript auf Fehler oder aktualisieren Sie Ihren Browser und versuchen Sie es erneut.

Das schließt den Sidebar-Bereich ein! Lassen Sie uns vorwärts gehen und einige Inhalte auf die Seite bringen.

Hauptinhalt

Der erste Schritt hier besteht darin, den benötigten HTML-Code zur Seite hinzuzufügen.

<article class="portfolio-item group first">
    <header class="portfolio-info">
        <div class="date">7 Nov 2013</div>
        <div class="description">
            Free PSD template for startups, small businesses and basically for everyone liking good design.
        </div>
        <div class="meta">
            <p><strong>Client:</strong> Despreneur</p>
            <p><strong>Tags:</strong> Web Design</p>
        </div>
    </header>
    <figure class="portfolio-image">
        <img src="images/portfolio/free-psd-templates.jpg" alt="Free PSD Templates">
    </figure>
</article>
<article class="portfolio-item group">
    <header class="portfolio-info">
        <div class="date">7 Nov 2013</div>
        <div class="description">
            Free PSD template for startups, small businesses and basically for everyone liking good design.
        </div>
        <div class="meta">
            <p><strong>Client:</strong> Despreneur</p>
            <p><strong>Tags:</strong> Web Design</p>
        </div>
    </header>
    <figure class="portfolio-image">
        <img src="images/portfolio/moody-shot.jpg" alt="Moody Shot">
    </figure>
</article>
<article class="portfolio-item group">
    <header class="portfolio-info">
        <div class="date">7 Nov 2013</div>
        <div class="description">
            Free PSD template for startups, small businesses and basically for everyone liking good design.
        </div>
        <div class="meta">
            <p><strong>Client:</strong> Despreneur</p>
            <p><strong>Tags:</strong> Web Design</p>
        </div>
    </header>
    <figure class="portfolio-image">
        <img src="images/portfolio/new-york.jpg" alt="New York">
    </figure>
</article>
<article class="portfolio-item group loading-wrap">
    <header class="portfolio-info">
    </header>
    <figure class="portfolio-image">
    <div class="loading">
        <img src="images/loading.png" alt="Loading" class="rotate">&nbsp;Loading...
    </div>
    </figure>
</article>

Fügen Sie diesen Code in das .content-Div ein. Wir haben die drei Artikel, die im Design vorkommen, und auch einen "Laden"-Artikel. Ich habe das Ladesymbol in einem eigenen portfolio-item platziert, damit wir die Struktur der Seite beibehalten können. Ich kann dann einfach das Ladesymbol selbst innerhalb des portfolio-image-Elements positionieren. Sie werden auch hier sehen, dass das erste portfolio-item eine Klasse von first hat. Dies wird in unserem CSS wichtig sein, zu dem wir nach einem weiteren kurzen Blick in den Browser kommen:

Schön, aber nicht ganz das, was wir wollen, also kommen wir gleich zu den Stilen.

.content {
    width: 100%;
    min-height: 100%;
    background: $white;

    @media screen and (min-width: $break-three) {
        float: left;
        width: 80%;
    }

    .portfolio-item {
        background: $grey;

        &:before {
            content: "";
            position: absolute;
            width: 3px;
            background: darken($grey, 5%);
            top: 0px;
            left: 17px;
            bottom: 0px;
        }

        &.first {
            &:before {
                top: 30px;
            }
        }

        .portfolio-info {
            min-height: 100%;
            color: $darkgrey;
            padding: $padding*2 $padding*2 $padding*2 $padding*4;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            -ms-box-sizing: border-box;
            box-sizing: border-box;

            @media screen and (min-width: $break-three) {
                float: left;
                width: 30%;
            }

            .date {
                font-size: 110%;
                color: $black;
                margin-bottom: $margin;

                &:before {
                    content: "";
                    position: absolute;
                    width: 11px;
                    height: 11px;
                    border-radius: 50%;
                    border: 2px solid $grey;
                    background: $red;
                    left: -29px;
                    top: 3px;
                }
            }

            .meta {
                color: $black;
                margin-top: $margin;

                p {
                    margin: 0;
                }
            }

        }

    }

}

Ein weiteres großes Stück Code gibt es! Lass es uns Stück für Stück aufschlüsseln. Die .content-Stile ähneln den Seitenleisten-Stilen insofern, als wir bei mobilen Auflösungen nur die volle Breite benötigen, aber alles, was an oder über unserem $break-three-Punkt liegt, sollten wir schweben lassen und die Breite auf 80% ziehen. Außerdem müssen wir dem content-Div einen weißen Hintergrund geben, um ihn von der Seitenleiste abzutrennen.

Die portfolio-item-Elemente sollten einen grauen Hintergrund haben. Um die Zeitleiste zu erstellen, die am linken Rand des Inhaltsbereichs entlang läuft, geben wir jedem portfolio-item ein :before-Element. Hier positionieren wir es nur absolut 17px vom linken Rand und verwenden den Top/Bottom-Trick, um eine Höhe von 100% zu erzwingen. Dazu müssen sowohl die top- als auch die bottom-Eigenschaft auf 0 gesetzt werden, was bedeutet, dass sich das Element an beiden Positionen befinden soll, was zu einem Element voller Höhe führt. Dies funktioniert auch für die linken und rechten Eigenschaften, um ein Element mit voller Breite zu erstellen. Wir müssen unser erstes portfolio-item vom oberen Rand des Fensters weg positionieren, was wir hier erreichen, indem wir die oberste Eigenschaft auf 30px setzen.

Die portfolio-info-Artikel sollten wiederum 100% breit sein, es sei denn, wir sind bei $break-three oder höher. Um den kleinen roten Kreis auf dem Design zu erstellen, entschied ich mich, die date-Elemente zu verwenden, da die beiden miteinander verbunden zu sein scheinen. Im CSS ist der beste Weg, dies zu erreichen, ein :before-Pseudoelement zu verwenden. Um einen Kreis daraus zu machen, muss er eine gewisse Höhe und Breite und einen border-radius von 50% haben. Wir positionieren es dann absolut links vom Datum. Um die kleine Lücke um ihn herum zu erhalten, wenden Sie einfach einen Rahmen an, der dieselbe Farbe wie die portfolio-item-Elemente hat.

Die meta-Informationen sind sehr einfach. Setzen Sie einfach den Text schwarz und geben Sie ihm einen oberen Rand. Alle <p>-Tags hierin sollten keine Ränder haben. Speichern Sie die Datei und sehen Sie sich an, was dieser relativ kurze Codeabschnitt erreicht hat.

Das wird jetzt sehr eng! Fahren wir mit unseren content-Stilen fort...

.portfolio-image {
    padding: $padding*2;
    background: $white;
    border-left: 1px solid darken($grey, 10%);
    text-align: center;

    @media screen and (min-width: $break-three) {
        float: left;
        width: 70%;
    }

    img {
        width: 100%;
        max-width: 610px;
        height: auto;
    }

    div.loading {
        img {
            width: auto;
            height: auto;
        }
    }
}

Platzieren Sie diese direkt nach den portfolio-info-Stilen. Dieser kurze Codeblock macht die Bilder in den Portfolio-Elementen responsive. Die Idee ist, die Bilder so klein wie nötig zu verkleinern, aber nur auf ihre tatsächliche Breite zu skalieren. Dies bedeutet, dass Sie Bilder mit fester Breite haben müssen, aber in einem Layout / einer solchen Vorlage ist dies durchaus machbar, da die Bilder wahrscheinlich dynamisch generiert und auf eine bestimmte Größe zugeschnitten werden.

Wir verwenden die portfolio-image-Elemente auch, um ein weiteres Designdetail hinzuzufügen, nämlich die dünne Grenze zwischen den Bildern und den Informationen. Wenn Sie jetzt noch einmal in den Browser schauen, sollten Sie sehen, dass die Bilder mit dem Browser gut skalieren und im Allgemeinen einfach großartig aussehen!

Weiter nach oben

Es ist Zeit für eine Kaffeepause! Im folgenden und letzten Teil dieser Serie werden wir dem Layout etwas Aufflackern verleihen. Wir erstellen das Ladesymbol unten in unserem Inhaltsbereich, animieren es mit CSS3 und ahmen dann das unendliche Scrollen nach, wenn mehr Portfolioelemente geladen werden.