Building den Responsive Tidslinje Portfolio Page
Dette innlegget er en del av en serie som heter Design og bygge en Responsive Tidslinje Portfolio Page.Design en Stilig Tidslinje Portfolio Page Bruke PhotoshopFinishing den Responsive Tidslinje Portfolio PageWhat du skal lage < p> I løpet av denne opplæringen vi skal bygge den fantastiske Tidslinje Portfolio som sett i en tidligere opplæringen av Tomas Laurinavicius. Vi skal bruke noen responsive teknikker samt CSS3 animasjoner, Sass og en liten bit av jQuery.

Fil og katalogstrukturen

OK, er første skritt å opprette filene og mappene vi behov. Bildet nedenfor viser vår roten strukturen.

Som du ser, har vi et veldig enkelt satt opp her. Inne i "css" katalogen gå videre og lage en styles.scss
fil og også ta en kopi av normalize.css. For å kunne bruke Sass i dette prosjektet vil du enten må Sass installert på maskinen din, eller du trenger en app for å gjøre titting og kompilering for deg. Jeg bruker CodeKit for Mac, men det er nok av alternativer som Prepos, Scout, og Koala for å nevne noen. De er ikke helt gratis, men uansett hvilken du velger, vil spare deg for mye tid!

Inne i "js" -mappen lage en fil som heter app.js Hotell og laste ned en kopi av modernizr.js
å plassere her også. Den Modernizr build jeg har brukt inkluderer alle CSS3 og HTML5 tester som vi ikke skulle ha behov for mer enn det. Høyre, som dekker våre første filer og mapper. Det neste trinnet er å sjekke vår PSD design for å se hvilke deler som må ha klippet ut.

Slicing PSD

Utformingen av denne siden er rett-frem som gjør jobben med å avgjøre om vi trenger noen skiver enklere. Tomas har faktisk gitt alle disse eiendelene sammen med PSD, så det ville være mulig å ha noen skiver i det hele tatt fra dette design. Men jeg bestemte meg for denne opplæringen vi skal skjære ut de tre porteføljebilder og laste ikonet nederst på siden. Dette er bare for å lette mer enn noe annet, så vi trenger ikke å gjøre noen endring av størrelse i Photoshop.

I Photoshop ta stykket verktøy og nøye trekke ut skivene. Du kan kalle hver skive ved å dobbeltklikke på det. Deretter bruker du Lagre for Web ...
(eller lignende menypunktet avhengig av hvilken versjon av Photoshop) for å eksportere skivene i vår bildekatalogen.

Jeg deretter opprettet en ny mappe inne " bilder "kalt" portefølje "som vil holde bildene knyttet til portefølje elementer. Flytt de tre portefølje bilder til denne mappen og som fullfører vår slicing prosessen!

Avatar Image

Nå leder over til uifaces.com og plukke en av de bilder som skal brukes som vår profil bilde. Jeg klarte å finne den samme som design, men det spiller ingen rolle hvem du velger. Grab 128x128 versjonen og pop den i "bilder" -mappen.

Vi er nesten ferdig med våre bilder med bare de sosiale medier og navigasjon ikoner for å sortere ut. Vi vil gjøre det neste.

Sprites

Når du har grupper av bilder som ikoner er det en god idé å lage et bilde som inneholder alle av dem i et rutemønster. Disse kalles Sprites. Du kan ta dette til det ekstreme og lage én stor fil av hver
enkelt bilde på nettstedet ditt, men for denne opplæringen vi skal lage to sprites og en tilsvarende netthinnen versjon for hver.

Så, ved hjelp aktiva koblingene av Tomas, kan vi laste ned hver av sosiale medier ikoner. Grab 128x128 pixel versjon av hver, slik at vi kan skalere ned til størrelser vi trenger. Så i Photoshop må vi opprette en fil som er 101px ved 51px
. Dra hvert av de sosiale medier ikoner i denne filen og endre størrelse ned til 24px av 24px
. Ikonene er svart, men vi trenger dem for å være hvit, så gjelder et lag stil til hver og en som gir en farge overlegg av hvitt. Endre bakgrunnsfarge til noe mørkt slik at vi kan se dem og deretter ordne dem som så ...

Hvert ikon er nøyaktig 1 pixel
fra kantene og fra hverandre. Jeg har også forandret tettheten av hvert ikon til 80%. Nå kopiere denne raden av ikoner og plassere den rett under og pass på å holde den 1 pixel
fra kantene. Endre tettheten av den andre raden av ikoner til 100%. Det skal se omtrent slik ut ...

Nå skjule bakgrunnslaget i Photoshop for å gi en gjennomsiktig bakgrunn og Lagre for Web
som en PNG

sosial-sprite.png
inne i "bilder" -mappen. Det neste trinnet er å opprette netthinnen versjon av denne sprite, så vi får skarpe ikoner på høy pikseltetthet skjermer. Dette bør være ganske enkel og bare innebærer å doble størrelsen på det vi allerede har. Så retina versjonen vil være 202px ved 102px
. Husk, alt
må dobles som inkluderer avstanden rundt hvert ikon så for denne sprite vi trenger 2 piksler
mellom hvert ikon og på kantene. Det ferdige retina versjonen skal se slik ut ...

Great! Nå bare skjule bakgrunnslaget som før og eksport som en PNG
men denne gangen kaller det [email protected]
. Dette er en standard navnekonvensjon for retina versjonen av en bildefil.

Så nå trenger vi bare å gjøre det samme med navigasjonsikonene. Disse ikonene er vektorobjekter inne i PSD som betyr at vi bare kan kopiere dem inn i en ny fil og skalere dem etter behov. Størrelsen er nødvendig for den vanlige versjonen er 49px av 18px Hotell og retina versjonen til dobbel størrelse er 98px av 36px
. De ferdige bildene skal se slik ut:

Utmerket! Lagre disse som nav-sprite.png Hotell og [email protected]
. Jeg tror som brytes opp alt vi trenger å gjøre for bildene, så la oss presse på for å skrive noen kode!

The Base HTML og Sass

La oss begynne med barebones på vår side. I vår index.html, kopiere følgende kode til å starte ting av!
≪! DOCTYPE html > < html > < head > < meta charset = "UTF-8" > < meta name = "view" content = "innledende skala = 1.0" > < title > Min Portefølje < /title > < link rel = "stylesheet" href = "css /style.css" > < script src = "js /modernizr.js" > < /script > < /head > < body > < main class = "wrap gruppen" > < side class = "sidebar" > < div class = "my-info" > < /div > < nav class = "menyer" > < /nav > < /side > < 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 >

Det er en enkel layout med hovedbretteelement inneholder en sidebar til side og en innholds div. Inne i sidepanelet vi har to seksjoner, min-info Hotell og et nav med en klasse med menyer. Våre avhengigheter er også inkludert, særlig den nyeste versjonen av jQuery 1.x. La oss nå begynne å fylle ut vår Sass fil med noen variabler
$ svart:. # 000; $ hvitt: #FFF; $ grå: # f7f7f7; $ Darkgrey: # 5e5e5e; $ red: # d35136; $ grønt: # 27b599; $ blå: # 088ecc; $ mørkblå: # 11171c; $ padding: 10px; $ margin: 10px; $ hoved bredde: 1000px; $ font-size: 14px; $ font-family: 'Lato', sans-serif; $ line-height: 1,4; $ break-fire: 1050px; $ break-tre: 760px; $ break-to: 520px; $ break-en: 360px;import url ('http://fonts.googleapis.com/? css familie = Lato: 300400700 '); @ import url (' normalize.css '); //Utilities.group:after {innhold: ""; display: table; klar: begge;}

Det er en rettferdig del av koden for å begynne med! Dette er egentlig bare å sette opp noen mislighold og variabler for bruk i hele vår Sass fil. Den viktigste delen her er det som holder de fire pause punkt variabler. Disse definerer på hvilke punkter vår layout bør endre. Sass kommer i svært nyttig her som vi kan bare referere til disse variablene når du skriver våre mediespørringer, og hvis en pause punkt må endres er det bare ett sted å endre det.

Som du kan se avimport uttalelse, er vi også importerer Google skriften som brukes i design og kopien av Normalize.css
vi lastet ned tidligere. Den eneste erklæringen så langt er gruppen klassen som er en clearfix
for elementer som inneholder fløt elementer. Sjekk ut nicolasgallagher.com for mer informasjon om dette.

Hvis alt er satt opp riktig, sparer styles.scss

vil generere ren CSS-filen vi har tatt med i vår side. Vise siden nå vil vise en heller kjedelig hvit skjerm, så la oss gjøre det mer moro ved å legge inn noen flere stiler og fleshing ut sidebar området

Den Sidebar.; Min Info

Først av alt la oss legge til følgende i vår Sass fil:
//hoved stiler * {position: relative; -webkit-box-sizing: border-boksen; -moz-box-sizing: border-boksen; -MS-box-sizing: border-boksen; box-sizing: border-box;} html, body, .wrap {min-høyde: 100%;} body {color: $ grå; font-size: $ font-size; font-family: $ font-family; line-height: $ line-height; bakgrunn: $ mørkblå;}

Hvert element skal nå være plassert i forhold og har også box-sizing eiendommen satt til border-boksen, slik at elementene skal ha prosent bredder inclusive


av deres padding. Dette betyr at vi kan sette to elementer ved siden av hverandre på 50% bredde, og deretter justere padding i hver enkelt så mye vi vil, uten å bryte layout. En veldig, veldig nyttig CSS regelen! Støtte for nesten alle nettlesere kommer via leverandør prefiks erklæringer.

De resterende stiler her fungere som standardverdier for vår side. Vi må sørge for at de viktigste bretteelementene ligge på 100% høyde til alle tider som sidebar vår trenger for å fylle skjermen vertikalt. Vi setter kroppen bakgrunnen til $ mørkeblå her, som faktisk er vår sidebar farge. Dette er det som gir sidebar vår utseendet 100% høyde. I virkeligheten vil det sidebar element i seg selv bare være så høyt som sitt innhold, men vil ha en gjennomsiktig bakgrunn, og dermed viser fargen bak det

La oss starte fleshing ut sidebar ...
<.; img src = "images /cj.jpg" alt = "Chris Johnson" class = "portefølje-image" > < h1 > Chris Johnson < /h1 > < h2 > Erfaren UX /UI < br > Designer basert i London, UK < /h2 > < div class = "sosial gruppe" > < a href = "#" class = "dribbble" > Dribbble < /a > < a href = "#" class = "twitter" > Twitter < /a > < a href = "#" class = "facebook" > Facebook < /a > < a href = "#" class = "google" > Google + < /a > < /div >

Legg denne koden inn i .my-info div. Du må kanskje endre navn porteføljen-image
avhengig av hva du har kalt det. Det er ikke mye som skjer her, men lagre filen og ta en titt i nettleseren.

Lovely. Nå åpner opp style.scss Hotell og skriv inn følgende kode:
.sidebar {width: 100%; høyde: 100%; media skjerm og (min-width: $ break-tre) {float: left; bredde: 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%; }}}

Som vi følger en mobil-først-strategi her, må vi sidebar vår å være i full bredde og full høyde på mobile løsninger. En rask media spørring for vår $ break-three
bryte punkt flyter sidepanelet til venstre og begrenser bredden til 20%.

De stiler for .my-info er enkel nok. Vi ønsker bare å sentrere alt og gi det hele litt plass rundt kantene. For å skille ut vår snart å være menydel vi bare bruke en 1px grensen på nedre kant. For å gjøre porteføljen-image sirkulær, gir det en 50% border-radius og, til slutt, vi må overstyre noen skriftstiler for eventuelle h1 eller h2 elementer inne i denne delen.

Social Media Links

Nå må vi takle disse sosiale medier linker, ved hjelp av en av sprites vi opprettet tidligere. Plasser følgende kode rett etter h2
erklæringer i den siste blokken med kode
.social {width: 120px;. margin: 0 auto; et {float: left; width: 25px; høyde: 25px; margin: 0 $ margin /5; bakgrunn: url (../images /sosial-sprite.png) no-repeat; text-indent: -9999px; media skjerm og (-webkit-min-enhet-pixel-ratio: 2), skjerm og (min-enhet-pixel-ratio: 2) {background: url (../images/[email protected]) no-repeat; background-size: 101px 51px; } &Amp; .dribbble {background-posisjon: 0px 0px; &: hover {background-posisjon: 0px -25px; }} &Amp; .twitter {background-posisjon: -25px 0px; &: hover {background-posisjon: -25px -25px; }} &Amp; .facebook {background-posisjon: -50px 0px; &: hover {background-posisjon: -50px -25px; }} &Amp; .googleplus {background-posisjon: -75px 0px; &: hover {background-posisjon: -75px -25px; }}}}

Det ser ganske komplisert, men det er egentlig ikke. Hovedtyngden av denne koden er håndtering hvordan ikonene og deres hover statene som går. Først av alt må vi flyte hver av < a > elementer, gi dem en bredde og høyde, og også noen margin til plass dem ut. Det neste vi gjør er å angi bakgrunnsbildet. Dette bør settes til den sosiale sprite vi opprettet tidligere. Til slutt, må vi sørge for at teksten som brukes i hvert element vises ikke på siden. Teksten-innrykk
eiendom tar seg av det pent.

Den neste delen er interessant. Her er vi spesifiserer hvilken bakgrunn å bruke for høy pikseltetthet skjermer. Ideen her er å bruke "doblet" versjon av den sosiale sprite hvis
pikselforhold på innretningen er 2. Bakgrunnen-size
eiendom er nødvendig å skalere filen tilbake ned til opprinnelig størrelse, så all vår posisjonering kode bare virker Anmeldelser uten å kopiere noe.

De neste fire avsnittene er alle det samme konseptet. Vi er bare å sette bakgrunnen posisjon for hvert ikon og den respektive hover
tilstand. La oss ta en titt i nettleseren:

Awesome! Det ser veldig bra. Hvis alt er riktig hover statene skal alt arbeid, og de bør alle se skarp på en iPhone /iPad etc. Nå, la oss starte takle sidebar menyen.

Den Sidebar Menyer

Start med å taste følgende i index.html i menyene
container
. < h3 class = "arbeid" > Work < /h3 > < ul > < li > < a href = "#" class = "dagens menypost" > Nyeste < /a > < /li > < li > < a href = "#" > Web Design < /a > < /li > < li > < a href = "#" > Branding < /a > < /li > < li > < a href = "#" > Photography < /a > < /li > < li > < a href = "#" > Print < /a > < /li > < li > < a href = "#" > Mobile Design < /a > < /li > < /ul > < h3 class = "om" > Om < /h3 > < ul > < li > < a href = "#" > Skills < /a > < /li > < li > < a href = "#" > Erfaring < /a > < /li > < li > < a href = "#" > Education < /a > < /li > < li > < a href = "#" > Klienter < /a > < /li > < li > < a href = "#" > Testimonials < /a > < /li > < li > < a href = "#" > Blogg < /a > < /li > < /ul > < h3 class = "kontakt" > Kontakt < /h3 > < ul > < li > < a href = "#" > Adresse < /a > < /li > < li > < a href = "#" > Telefon < /a > < /li > < li > < a href = "#" > Social Networks < /a > < /li > < li > < a href = "#" > E < /a > < /li > < /ul >

Ganske selvforklarende tror jeg, så la oss fortsette ved å oppgi disse stilene etter min-info-delen, men fortsatt inne i generelle sidebar
element
.menus {text-align:. center; media skjerm og (min-width: $ break-tre) {padding: $ padding * 2 $ padding * 3; } H3 {text-transform: store bokstaver; font-size: 120%; font-weight: normal; padding-left: $ padding * 2,5; markøren: pekeren; bredde: 20%; margin: $ margin * 2 $ margin * 11 $ margin; media skjerm og (min-width: $ break-en) {margin: $ margin * 2 auto $ margin * 2; }media Skjerm og (min-width: $ break-tre) {margin: $ margin * 2 0 $ margin 0; } &Amp;: før {innhold: ""; position: absolute; top: 0px; venstre: 0px; høyde: 18px; display: block; bakgrunn: url (../images /nav-sprite.png) no-repeat; media skjerm og (-webkit-min-enhet-pixel-ratio: 2), skjerm og (min-enhet-pixel-ratio: 2) {background: url (../images/[email protected]) no-repeat; background-size: 49px 18px; }} &Amp; .work {color: $ rød; &: før {width: 15px; background-posisjon: 0px 0px; }} &Amp; .om {color: $ grønn; &: før {width: 17px; background-posisjon: -15px 0px; }} &Amp; .contact {color: $ blå; &: før {width: 17px; background-posisjon: -32px 0px; }}}}

Dette er faktisk veldig lik den sosiale ikoner så langt som konseptet og gjennomføringen av konseptet. For menyene element selv vi bare vil at alt skal være sentrert. Når vi kommer over vår $ break-tre-break point vil vi trenge litt polstring for å posisjonere menyene bort fra kantene litt.

Hver av h3 elementer skal ha forskjellige farger og forskjellige ikoner. Vi bruker en kombinasjon av: før
pseudo element, å sprites og mediespørringer oppnå dette. Bortsett fra dette har vi et par mediespørringer for å styre marginene på h3
elementer ved større skjermstørrelser. Dette er slik at de alltid er riktig plassert i forhold til sine menyer.

Snakker av menyene, vil vi legge til CSS for dem i et øyeblikk. Først, la oss ta en titt i nettleseren:

Titlene ser virkelig fint! Menyene ikke så mye. La oss raskt ta seg av det før de blå mislighold føre oss noen mer smerte ...

Meny Lister
ul {list-style: none; padding: 0; display: none; margin: 0 $ margin * 13.5 $ margin; text-align: left; media skjerm og (min-width: $ break-tre) {margin: 0 0 0 $ margin * 2,5; display: block; width: auto; } &Amp; .Åpen {display: inline-block; margin: 0 auto $ margin $ margin * 6; media skjerm og (min-width: $ break-tre) {margin: 0 0 0 $ margin * 2,5; display: block; width: auto; }} Li {a {color: $ Darkgrey; text-decoration: none; -webkit-overgang: farge 0.4s letthet; -moz-overgang: farge 0.4s letthet; -o-overgang: farge 0.4s letthet; -MS-overgang: farge 0.4s letthet; overgang: farge 0.4s letthet; &: hover, & .current menypost {color: $ hvitt; -webkit-overgang: farge 0.4s letthet; -moz-overgang: farge 0.4s letthet; -o-overgang: farge 0.4s letthet; -MS-overgang: farge 0.4s letthet; overgang: farge 0.4s letthet; }}}}

At mobil resolusjoner vi ønsker våre menyer å være skjult, slik at brukeren kan velge å skjule eller vise dem når de trenger tilgang til dem. Når vi treffer vår $ break-three
peke menyene skal være synlig hele tiden.

.Åpen
klasse håndterer hvordan menyene displayet når de er åpne. Designet har dem ganske nøyaktig plassert, så vi gjør det samme her som bruker marginer. Igjen, $ break-three
punktet kommer inn i bildet og overstyrer marginene for de vedtak og oppover. Stilene for li elementene er ganske grei. Det viktigste å merke seg er bruken av CSS3 Transitions. Jeg har brukt dem her for å gi en fin fade utseende når svever på elementet. Jeg oppfordrer deg til å leke seg med overganger for å se hva interessante effekter du kan oppnå!

La oss lagre filen og vise resultatene i nettleseren.

Veldig fint! Menyene er oppfører seg akkurat som de skal. Vi nå kommer til å gjennomføre vår første bit av Javascript /jQuery, for å kontrollere åpning og lukking av menyene

Åpne app.js Hotell og skriv inn følgende funksjon:.
$ (function () {$ ('menyer h3.') på ("klikk", funksjon (e) {$ (denne) .next ('ul') toggleClass ('åpent');.. e.preventDefault ( ); return false;});});

Vi starter denne filen med jQuery dokument klar funksjon
som i utgangspunktet venter på dokumentet for å være fullt klar før du kjører noen av koden. Les mer på klar hendelse på api.jquery.com.

Vi er så feste et klikk hendelsen til noen h3
inne våre menyer
element. Når denne hendelsen skjer (når brukeren klikker h3) vi bruker jQuery til å finne den "neste" ul element og veksle klassen av åpen på det. Så hvis elementet har klassen allerede vil det fjerne den, og vice versa hvis den ikke gjør det. Den siste linjen er der for å stoppe eventuelle standardvalg for element. Dette sannsynligvis gjelder ikke her fordi h3 elementer ikke har en standardhandling, mens et anker tag, for eksempel, gjør. Likevel er det lurt å komme inn i vanen med å inkludere det når du bruker klikk hendelsesbehandlinger.

Lagre denne filen og gå tilbake til nettleseren. Når på mobile oppløsninger, hvis du klikker menytitler bør du se menyen åpne opp under det. Hvis dette ikke skjer, sjekk Javascript for eventuelle feil, eller oppdatere nettleseren og prøv igjen.

Som brytes opp sidebar området! La oss presse frem og få noe av innholdet på siden

hovedinnhold

Det første trinnet er å legge til HTML vi trenger til side
. ≪. Artikkel class = "portefølje -item gruppe første "> < header class = "portefølje-info" > < div class = "date" > 7 november 2013 < /div > < div class = "description" > Gratis PSD mal for startups, små bedrifter og i utgangspunktet for alle like god design. < /div > < div class = "meta" > < p > < strong > Klient: < /strong > Despreneur < /p > < p > < strong > Tags: < /strong > Web Design < /p > < /div > < /header > < figur class = "portefølje-image" > < img src = "images /portefølje /free-psd-templates.jpg" alt = "Gratis PSD Maler" > < /figuren > < /artikkel > < artikkelen class = "portefølje-varegruppe" > < header class = "portefølje-info" > < div class = "date" > 7 november 2013 < /div > < div class = "description" > Gratis PSD mal for startups, små bedrifter og i utgangspunktet for alle like god design. < /div > < div class = "meta" > < p > < strong > Klient: < /strong > Despreneur < /p > < p > < strong > Tags: < /strong > Web Design < /p > < /div > < /header > < figur class = "portefølje-image" > < img src = "images /portefølje /humørsyk-shot.jpg" alt = "Moody Shot" > < /figuren > < /artikkel > < artikkelen class = "portefølje-varegruppe" > < header class = "portefølje-info" > < div class = "date" > 7 november 2013 < /div > < div class = "description" > Gratis PSD mal for startups, små bedrifter og i utgangspunktet for alle like god design. < /div > < div class = "meta" > < p > < strong > Klient: < /strong > Despreneur < /p > < p > < strong > Tags: < /strong > Web Design < /p > < /div > < /header > < figur class = "portefølje-image" > < img src = "images /portefølje /new-york.jpg" alt = "New York" > < /figuren > < /artikkel > < artikkelen class = "portefølje-varegruppe lasting-wrap" > < header class = "portefølje-info" > < /header > < figur class = "portefølje-image" > < div class = "loading" > < img src = "images /loading.png" alt = "Loading" class = "roter" > & nbsp; Loading ... < /div > < /figuren > < /artikkel >

Plasser denne koden inne i .content div. Vi har de tre artiklene som har i design og også en "Loading" artikkel. Jeg har plassert laste ikonet inne i sin egen portefølje-element, slik at vi kan holde strukturen på siden. Da kan jeg bare plassere lasteikonet seg inne i porteføljen-bildeelement. Du vil se her også at den første portefølje-elementet har en klasse først. Dette vil være viktig i vår CSS som vi vil komme inn etter å ha tatt en annen rask titt i nettleseren:

Nice, men ikke helt hva vi ønsker, så la oss få rett inn stilene
.content {. width: 100%; min-høyde: 100%; bakgrunn: $ hvitt; media skjerm og (min-width: $ break-tre) {float: left; width: 80%; } .portfolio-Item {bakgrunn: $ grå; &: før {innhold: ""; position: absolute; width: 3px; bakgrunn: mørkere ($ grå, 5%); top: 0px; venstre: 17px; bottom: 0px; } &Amp; .first {&: før {top: 30px; }} .portfolio-Info {min-høyde: 100%; color: $ Darkgrey; padding: $ padding * 2 $ padding * 2 $ padding * 2 $ padding * 4; -webkit-box-sizing: border-boksen; -moz-box-sizing: border-boksen; -MS-box-sizing: border-boksen; box-sizing: border-boksen; media skjerm og (min-width: $ break-tre) {float: left; width: 30%; } .date {Font-size: 110%; color: $ svart; margin-bottom: $ margin; &: før {innhold: ""; position: absolute; width: 11px; høyde: 11px; border-radius: 50%; border: 2px solid $ grå; bakgrunn: $ rød; venstre: -29px; top: 3px; }} .meta {Color: $ svart; margin-top: $ margin; p {margin: 0; }}}}}

En annen stor del av koden der! La oss bryte det ned bit for bit. De .content stiler ligner på sidebar stiler i at mobil resolusjoner vi bare trenger det fulle bredde, men noe på eller over vår $ break-three
punktet bør vi flyter det og trekke bredden i 80 %. Vi trenger også å gi innholdet div hvit bakgrunn § den av fra sidelinjen.

De portefølje-element elementer bør ha en grå bakgrunn. Å skape tidslinjen kjører ned den venstre kanten av innholdet området vi kommer til å gi hver portefølje-element a: før
element. Her er vi bare helt plassere den 17px fra venstre kant og bruke topp /bunn triks for å tvinge den til å ha 100% høyde. Dette innebærer å sette både toppen Hotell og bunn
eiendom til 0, som er i effekt er å fortelle element for å være på begge steder, noe som resulterer i en full høyde element. Dette fungerer også for venstre og høyre egenskaper for å lage en full bredde element. Vi må plassere vår første
portefølje-elementet bort fra den øverste kanten av vinduet som vi oppnår her ved å sette den øverste annonsen til 30px.

De portefølje-info artiklene bør, igjen, være 100% bredt med mindre vi er på $ break-tre eller over. For å skape den lille røde sirkelen sett på design jeg bestemte meg for å bruke dato elementer, som de to synes forbundet. I CSS den beste måten å oppnå det på er å bruke en: før pseudo
element. For å gjøre det en sirkel det må ha litt høyde og bredde og en border-radius på 50%. Vi så absolutt plassere den til venstre for den datoen. For å få det lite gap rundt det, bare bruke en kant i samme farge som de portefølje-element elementer.

Den meta-informasjon er svært enkel. Bare sette teksten svart og gi den en toppmargen. Enhver < p > tags inne her skal ikke ha noen marginer. Lagre filen og se på hva denne relativt korte delen av koden har oppnådd.

Dette blir veldig nær nå! La oss fortsette med vårt innhold
stiler ...
.portfolio-image {padding: $ padding * 2; bakgrunn: $ hvitt; border-left: 1px solid mørkere ($ grå, 10%); text-align: center; media skjerm og (min-width: $ break-tre) {float: left; width: 70%; } Img {width: 100%; max-width: 610px; høyde: auto; } Div.loading {img {width: auto; høyde: auto; }}}

Plasser denne rett etter at portefølje-info stiler. Denne korte kodeblokk vil gjøre bildene inne porteføljeposter responsive. Ideen er å skalere ned bildene til så lite som vi trenger, men bare skalere opp til deres faktiske bredden. Dette betyr at du må ha fast bredde bilder, men det er helt mulig i en layout /mal som dette, som bildene vil trolig være dynamisk generert og beskjæres til en viss størrelse.

Vi er også å bruke portefølje-bildeelementer å legge til en annen design detalj, at det å være tynn grensen mellom bildene og informasjonen. Hvis du tar en titt i nettleseren nå, bør du se bildene pent skalering med leseren og bare generelt ser kjempebra!

Neste opp

Det er tid for en kaffepause! I det følgende og siste del av denne serien, vil vi legge til noen bluss i oppsettet. Vi vil bygge ladeikonet nederst på innholdet vårt område, animere det med CSS3, så hermet uendelig rulling som flere portefølje elementer er lagt i.