Crearea unei pagini de pornire în stilul metroului cu pluginul JavaScript pentru izotopi

Microsoft Windows 8 poate să nu fie o poveste de succes în ceea ce privește experiența utilizatorului, dar cu siguranță a introdus lumea cu un nou concept de design: Metro.

De la apariția sa în 2012, a devenit extrem de popular cu aspectul său plat, simplu și colorat. În acest articol, vom vedea cum putem construi o pagină de pornire a blogului cu conceptul de design al Metro.

Cum definiți limbajul de design "Metro"?

Metro este codul de cod al celui mai recent ghid de stil al Microsoft, sau "limbaj de design". Deși abordarea minimală, simplă, a fost introdusă în unele dintre programele Microsoft (cum ar fi Windows Phone 7 și Windows 8), designerii web și graficii au fost îmbrățișați și încorporați repede în desenele lor.

Nu ar fi controversat să spunem că, împreună cu conceptele de design ale Google, Metro a ajutat site-ul web să creeze plan flat tendinţă.

Deși Wikipedia definește Metro drept "un limbaj de design bazat pe tipografie", am putea susține că este mai mult decât atât. În opinia mea, există trei caracteristici caracteristice ale metroului:

• Simplitate: Cu casete simple pătrate și dreptunghiulare și utilizarea corectă a spațiului alb, caracteristica principală a metroului este simplitatea. Cei mai mulți designeri grafici și web aveau deja tendința de a crea un design simplu, iar ultra-minimalismul lui Metro a fost rapid prins.
• Tipografie: Tipografia a devenit un element imens în designul web, mai ales după 2010. (Desigur, păstrez designerii elvețieni, apropo - acei tipi știau totul!) Mișcarea îndrăzneață a Microsoft de a prezenta tipografia împotriva skeuomorfismului Apple a fost fericit acceptată de design comunități, făcând Metro un succes.
• colorfulness: Una dintre cele mai mari realizări ale Metro, în ceea ce mă privește, este folosirea culorilor mat. Pânza a fost agonizată cu gradienți de argint / crom, efecte de sticlă și culori exagerat de strălucitoare; iar atunci când Metro a venit de-a lungul, comunitățile de design web s-au ținut repede la culorile sale "pline".

Mai mult decât aceste caracteristici, Microsoft definește Metro cu cinci principii:

1. Mândria în măiestrie
2. Rapid și fluid
3. Authentic digitale
4. Fa mult cu putin
5. Câștigați ca unul

O notă mică despre numele "Metro": Din cauza problemelor legate de drepturile de autor, Microsoft a trebuit să schimbe numele acestei limbi de design în "Microsoft Design Language" sau "Modern Design", iar aplicațiile sunt denumite "Aplicații moderne" Aplicații "; cu toate acestea, numele a rămas printre designeri. Acest articol va continua să definească limba de design cu numele de cod "Metro", dar rețineți că limba de design este denumită oficial Design modern.

Introducerea izotopului: Un plugin JavaScript pentru Magic Layouts

Pentru a obține o structură de pagină în stilul metroului într-un blog WordPress, vom folosi un plugin JavaScript fantastic numit Isotop. Opțiunile de configurare a pluginului ne vor ajuta să construim o pagină de pornire Metro de lux. (Pluginul funcționează și ca plugin jQuery, dar vom merge cu JavaScript de vanilie.)

În acest tutorial, vom folosi o versiune beta a lui Isotope - versiunea 2.0.0-beta.8, pentru a fi exactă. Este diferit de versiunea 1, dar ar trebui să se comporte la fel în versiunile stabile ale versiunii a doua în viitor.

PHP și HTML

Dacă am fi făcut un tutorial HTML, aș lipi următorul cod:

 
O postare despre izotop, poate?
 
WordPress este cel mai bun!
 
Ce crezi despre mine?
 
Despre evenimentul de la Jocurile Olimpice de la Sochi
 
Ajutor!
 
Nu pot veni cu numeroase titluri postale!
 
HTML5 Rocks, îți spun eu!
 
Oricine Îți amintești de Caesar 3?
 
Iubesc masa.
 
Iubesc lampa.
 
Nu fac întotdeauna demonstrații pe CodePen ... 
 
... Dar când fac, sunt doar frumoase!
 

Dar avem nevoie de codul WordPress! Iată cum procedăm în WordPress:

Câteva note despre cod:

• Observați js-izotop clasa și date-izotop opțiuni atribut în containerul nostru DIV. Acestea ne ajută să inițiem pluginul Isotope fără niciun cod JavaScript.
• Dacă doriți ca unul dintre postările dvs. să iasă în evidență, puteți dubla lățimea acestuia adăugând o postare meta cu cheia metro-dublu și valoarea da.
• Puteți adăuga mai multe culori la matrice (și codul CSS). Am folosit culorile pe care le-am găsit aici.

CSS

*, *: înainte, *: după -moz-box-size: box-border -webkit-box-size: box-border; familie: Segoe UI, Arial, sans-serif; .container width: 50em; margine: 1em auto; padding: .1999em; .item width: 12em; ; marimea: .2em; fundal-size: cover; padding: 1em; .item-dublu width: 24.4em; .item-teal background-color: # 2672EC; .item-purpuriu background-color: # 8C0095; .item-darkpurple fundal-culoare: # 5133AB;. color: # D24726; .item-verde background-color: # 008A00; .imagini-color: # 094AB2; albastru: hover fundal-culoare: # 2E8DEF; .item-violet: hover fundal-culoare: # A700AE; .item-darkpurple: hover background-color: # 643EBF; -color: # BF1E4B; .item-portocaliu: hover fundal-culoare: # DC572E; .item-verde: hover background-col sau: # 00A600; .item-skyblue: hover culoare-fundal: # 0A5BC4; .it a, .it nu a fost găsit color: #FFF; font-size: 2em; -descriere: nici una; afișare: bloc inline; lățime: 100%; înălțime: 100%; numai ecranul @media și (lățimea maximă: 50em) .container width: 100%;

Amintiți-vă: Acest tutorial conține codul de bază CSS pentru a crea un aspect în stil metrou, dar este posibil ca acestea să nu funcționeze pentru designul dvs. Dacă simțiți că ceva nu este corect, ar trebui să jucați cu codul puțin pentru a vă face să funcționeze pentru propria temă.

JavaScript

Știi ce? Nu avem nevoie de cod JavaScript! De când am adăugat numele clasei .js-izotop la containerul nostru DIV și a oferit opțiunile lui Isotop cu date-izotop opțiuni nu trebuie să facem altceva. Isotopul găsește doar .js-izotop clasa, obține opțiunile și se execută.

Așteaptă?

Rezultatul

Rezultatul de mai jos este de fapt o ieșire HTML, dar același lucru se va aplica și atunci când puneți codul WordPress de mai sus în tema:

Cuvintele finale

O interfață similară metroului nu este greu de reprodus în designul web, și după cum puteți vedea, arată frumos. (Puteți face chiar mai bine decât aceasta îmbunătățind codul meu!)

În plus, Isotopul este un plugin destul de frumos pentru a oferi vizitatorilor noștri un aspect receptiv. De fapt are mai multe caracteristici, cum ar fi sortarea și filtrarea obiectelor, însă, firește, nu aveam nevoie de ele în timp ce construim o pagină de pornire pentru blogul nostru.

Ce părere aveți despre limbajul de design modern? Ce crezi despre Isotop? Ce părere aveți despre acest tutorial? Trimiteți comentariile dvs. mai jos!