Opprette en Metro-Style hjemmeside med Isotope JavaScript Plugin

Microsofts Windows 8 er kanskje ikke suksesshistorie med hensyn til brukeropplevelse, men det introduserte absolutt verden med et nytt designkonsept: Metro.

Siden fremveksten i 2012 har det blitt ekstremt populært med sitt flate, enkle og fargerike utseende. I denne artikkelen skal vi se hvordan vi kan bygge en blogg hjemmeside med designkonseptet Metro.

Hvordan definerer du "Metro" Design Language?

Metro er kodenavnet til Microsofts nyeste stilguide, eller "design språk". Selv om den enkle, minimalistiske tilnærmingen ble introdusert i noen av Microsofts programvare (som Windows Phone 7 og Windows 8), tok web- og grafisk designere seg raskt inn og innlemmet i deres design.

Det ville ikke være kontroversielt å si at sammen med Googles designkonsepter, hjalp Metro World Wide Web opprette flatt design trend.

Selv om Wikipedia definerer Metro som et typografibasert designsprog, kan vi hevde at det er mer enn det. Etter min mening er det tre viktige karakteristiske trekk ved Metro-stilen:

enkelhet: Med enkle kvadratiske og rektangulære bokser og riktig bruk av hvitt rom, er Metros hovedkarakteristikk enkelhet. De fleste grafiske og webdesignere hadde allerede en tendens til enkel design, og tunnelens ultra minimalisme ble raskt tatt på.
Typografi: Typografi ble et stort element i webdesign, spesielt etter 2010. (Jeg holder for eksempel sveitsiske designere fra hverandre - de kjente det hele tiden!) Microsofts dristige bevegelse av å sette fram typografi mot Apples skeuomorphism ble lykkelig akseptert av designen samfunn, noe som gjør Metro til en suksess.
colorfulness: En av Metros største prestasjoner, så vidt jeg er opptatt av, er bruken av matte farger. Internettet var agonizing med sølv / kromgradienter, glass effekter og overdrivende lyse farger; og når Metro kom sammen, fortsatte webdesign fellesskap raskt til sine rolige, "flade" farger.

Mer enn disse funksjonene definerer Microsoft Metro med fem prinsipper:

Stolthet i håndverk
Rask og flytende
Autentisk digital
Gjør mer med mindre
Vinn som en

Et lite notat på navnet "Metro": På grunn av opphavsrettsproblemer måtte Microsoft endre navnet på dette designspråket til "Microsoft Design Language" eller "Modern Design", og applikasjonene kalles "Moderne Apps" i stedet for "Metro Apps "; Men navnet stakk blant designere. Denne artikkelen vil fortsette å definere designspråket med kodenavnet "Metro", men husk at designspråket er offisielt kalt Modern Design.

Introdusere isotop: En JavaScript Plugin for Magiske Layouts

For å oppnå et T-bane-stiles hjemmeside-layout i en WordPress-blogg, skal vi bruke et fantastisk JavaScript-plugin som heter Isotop. Pluginens oppsettalternativer skal hjelpe oss med å bygge en fancy, responsiv Metro-hjemmeside. (Plugin fungerer også som et jQuery-plugin, men vi skal gå med vanilla JavaScript.)

I denne opplæringen skal vi bruke en beta-versjon av Isotop - versjon 2.0.0-beta.8, for å være eksakt. Det er annerledes enn versjon én, men det skal oppføre seg det samme i de stabile utgavene av versjon 2 i fremtiden.

PHP og HTML

Hvis vi gjorde en HTML-opplæring, ville jeg lime inn følgende kode:

 Et innlegg om isotop, kanskje?
 WordPress er den beste!
 Hva synes du om meg?
 Om Sochi Olympics Event
 Hjelp!
 Jeg kan ikke komme opp med mange posttitler!
 HTML5 Rocks, jeg forteller deg!
 Noen husker Caesar 3?
 Jeg elsker bordet.
 Jeg elsker lampe.
 Jeg lager ikke alltid demoer på CodePen ... 
 ... Men når jeg gjør det, er de bare vakker!

Men vi trenger WordPress-kode! Slik gjør vi det i WordPress:

Noen få notater på koden:

Legg merke til js-isotop klasse og data-isotopen-alternativer attributt i vår container DIV. Disse hjelper oss med å starte isotop-plugin uten JavaScript-kode.
Hvis du vil at et av innleggene dine skal skille seg ut, kan du doble bredden ved å legge til et innlegg meda med nøkkelen metro-dobbel og verdien ja.
Du kan legge til flere farger i arrayet (og CSS-koden). Jeg brukte fargene som jeg fant her.

CSS

*, *: før, *: etter -moz-boks-størrelse: grense-boks; -webkit-boks-størrelse: grenseboks; boksformatering: grenseboks; kropp bakgrunn: #EEE; font- familie: Segoe UI, Arial, sans-serif; .container width: 50em; margin: 1em auto; padding: .1999em; .item width: 12em; height: 12em; bakgrunnsfarge: hvit; flyte: venstre ; margin: .2em; bakgrunnsstørrelse: deksel; polstring: 1em; .item-double width: 24.4em; .item-teal background-color: # 008299;. # 2672EC; .item-lilla bakgrunnsfarge: # 8C0095; .item-darkpurple bakgrunnsfarger: # 5133AB; .item-rød bakgrunnsfarve: # AC193D;. farge: # D24726; .item-green background-color: # 008A00; .item-skyblue bakgrunnsfarger: # 094AB2; .item-teal: hover background-color: # 00A0B1;. blå: hover bakgrunns-farge: # 2E8DEF; .item-lilla: hover bakgrunnsfarve: # A700AE; .item-darkpurple: hover background-color: # 643EBF; .item-rød: hover -color: # BF1E4B; .emem-oransje: svever bakgrunns-farge: # DC572E; .item-grønt: svever background-col eller: # 00A600; .item-skyblue: svever bakgrunns-farge: # 0A5BC4; .item, .item .not-found color: #FFF; fontstørrelse: 2em; linjehøyde: 1,3; tekst -decoration: none; display: inline-blokk; bredde: 100%; høyde: 100%; @media bare skjerm og (maks bredde: 50em) .container bredde: 100%; margin: 0;

Husk: Denne opplæringen inneholder den grunnleggende CSS-koden for å lage et T-baneoppsett, men de kan ikke fungere for ditt design. Hvis du føler at noe ikke er riktig, bør du leke med koden litt for å få det til å fungere for ditt eget tema.

JavaScript

Vet du hva? Vi trenger ikke noen JavaScript-kode! Siden vi la til klassenavnet .js-isotop til vår container DIV og ga Isotopes alternativer med data-isotopen-alternativer attributt, vi trenger ikke å gjøre noe annet. Isotop finner bare .js-isotop klasse, får alternativene og kjører seg selv.

Ryddig, rett?

Resultatet

Resultatet nedenfor er faktisk en HTML-utgang, men det samme gjelder når du legger WordPress-koden ovenfor inn i temaet ditt:

Endelige ord

Et Metro-lignende grensesnitt er ikke vanskelig å etterligne i webdesign, og som du ser, ser det vakkert ut. (Du kan gjøre enda bedre enn dette ved å forbedre koden min!)

I tillegg til det er isotop et ganske fint plugin for oss å gi et responsivt oppsett til våre besøkende. Det har faktisk enda flere funksjoner som sortering og filtrering av elementer, men selvfølgelig behøvde vi ikke de samtidig som vi bygget en hjemmeside for bloggen vår.

Hva synes du om det moderne designspråket? Hva synes du om isotop? Hva synes du om denne opplæringen? Del dine kommentarer nedenfor!

Kode