Creazione di una homepage Metro-Style con il plugin JavaScript Isotope

Microsoft Windows 8 potrebbe non essere una storia di successo per quanto riguarda l'esperienza utente, ma sicuramente ha introdotto il mondo con un nuovo concetto di design: Metro.

Dalla sua comparsa nel 2012, è diventato estremamente popolare con il suo aspetto piatto, semplice e colorato. In questo articolo vedremo come possiamo costruire la homepage di un blog con il concetto di design di Metro.

Come definisci il linguaggio di progettazione "Metro"?

Metro è il nome in codice dell'ultima guida di stile di Microsoft o "linguaggio di progettazione". Sebbene il suo approccio semplice e minimalista sia stato introdotto in alcuni software Microsoft (come Windows Phone 7 e Windows 8), i web designer e i graphic designer hanno rapidamente abbracciato e incorporato nei loro progetti.

Non sarebbe controverso affermare che, insieme ai concetti di design di Google, Metro ha aiutato il web a creare il mondo design piatto tendenza.

Sebbene Wikipedia definisca Metro come "un linguaggio di design basato sulla tipografia", potremmo obiettare che è più di questo. A mio parere, ci sono tre importanti caratteristiche dello stile Metro:

• Semplicità: Con semplici scatole quadrate e rettangolari e un uso corretto dello spazio bianco, la caratteristica principale della Metro è la semplicità. La maggior parte dei grafici e dei web designer aveva già una tendenza al design semplice, e l'ultra-minimalismo di Metro è stato rapidamente catturato.
• Tipografia: La tipografia è diventata un elemento importante nel web design, specialmente dopo il 2010. (A parte gli stilisti svizzeri, a proposito - quelli lo sapevano da sempre!) L'audace mossa di Microsoft di proporre tipografia contro lo skeuomorphism di Apple è stata accettata felicemente dal design comunità, rendendo Metro un successo.
• colorfulness: Uno dei maggiori successi di Metro, per quanto mi riguarda, è l'uso di colori opachi. Il web era agonizzante con sfumature argento / cromo, effetti vetro e colori esageratamente brillanti; e quando arrivò Metro, le comunità del web design si resero rapidamente ai suoi colori "piatti" calmi.

Oltre a queste funzionalità, Microsoft definisce Metro con cinque principi:

1. Orgoglio per l'artigianato
2. Veloce e fluido
3. Autenticamente digitale
4. Fai di più con meno
5. Vinci come uno

Una piccola nota sul nome "Metro": a causa di problemi di copyright, Microsoft ha dovuto cambiare il nome di questo linguaggio di progettazione in "Microsoft Design Language" o "Modern Design", e le applicazioni sono chiamate "Modern Apps" invece di "Metro" applicazioni "; tuttavia, il nome è rimasto tra i designer. Questo articolo continuerà a definire il linguaggio del design con il suo nome in codice "Metro", ma tieni presente che il linguaggio del design è ufficialmente chiamato Modern Design.

Presentazione di Isotope: un plugin JavaScript per Layout magici

Per ottenere un layout di homepage in stile Metro in un blog WordPress, utilizzeremo un fantastico plugin JavaScript chiamato Isotope. Le opzioni di layout del plugin ci aiuteranno a creare una homepage metropolitana e reattiva. (Anche il plugin funziona come plugin jQuery, ma andremo con vanilla JavaScript.)

In questo tutorial, stiamo per utilizzare una versione beta di Isotope - versione 2.0.0-beta.8, per essere precisi. È diverso dalla versione uno, ma dovrebbe comportarsi allo stesso modo nelle versioni stabili della seconda versione in futuro.

PHP e HTML

Se stessimo facendo un tutorial HTML, incollerei il seguente codice:

 
Un post sull'isotopo, forse?
 
WordPress è il migliore!
 
Cosa pensi di me?
 
Informazioni sull'evento olimpico di Sochi
 
Aiuto!
 
Non riesco a trovare molti titoli di post!
 
Rocce HTML5, dico a Ya!
 
Qualcuno ricorda Caesar 3?
 
Amo il tavolo.
 
Amo la lampada.
 
Non faccio sempre demo su CodePen ... 
 
... Ma quando lo faccio, sono semplicemente belli!
 

Ma abbiamo bisogno del codice WordPress! Ecco come lo facciamo in WordPress:

Alcune note sul codice:

• Notare il js-isotopo classe e il -isotopi opzioni dati attributo nel nostro contenitore DIV. Questi ci aiutano a iniziare il plugin Isotope senza alcun codice JavaScript.
• Se vuoi che uno dei tuoi post si distingua, puoi raddoppiarne la larghezza aggiungendo un post meta con la chiave metro-doppio e il valore sì.
• È possibile aggiungere più colori all'array (e al codice CSS). Ho usato i colori che ho trovato qui.

Il CSS

*, *: before, *: after -moz-box-dimensionamento: border-box; -webkit-box-dimensionamento: border-box; box-dimensionamento: border-box; body background: #EEE; font- famiglia: Segoe UI, Arial, sans-serif; .container width: 50em; margin: 1em auto; padding: .1999em; .item width: 12em; height: 12em; background-color: white; float: left ; margin: .2em; background-size: cover; padding: 1em; .item-double width: 24.4em; .item-teal background-color: # 008299; .item-blue background-color: # 2672EC; .item-purple background-color: # 8C0095; .item-darkpurple background-color: # 5133AB; .item-red background-color: # AC193D; .item-orange background colore: # D24726; .item-green background-color: # 008A00; .item-skyblue background-color: # 094AB2; .item-teal: hover background-color: # 00A0B1; .item- blu: hover background-color: # 2E8DEF; .item-purple: hover background-color: # A700AE; .item-darkpurple: hover background-color: # 643EBF; .item-red: hover background -color: # BF1E4B; .item-orange: hover background-color: # DC572E; .item-green: hover background-col oppure: # 00A600; .item-skyblue: hover background-color: # 0A5BC4; .item a, .item .not-found color: #FFF; dimensione carattere: 2em; altezza riga: 1.3; testo -decorazione: nessuna; display: blocco inline; larghezza: 100%; altezza: 100%; solo @media screen e (max-width: 50em) .container width: 100%; margin: 0;

Ricorda: questo tutorial contiene il codice CSS di base per creare un layout in stile Metro, ma potrebbero non funzionare per il tuo progetto. Se ritieni che qualcosa non sia giusto, dovresti giocare un po 'con il codice per farlo funzionare per il tuo tema.

Il JavaScript

Sai cosa? Non abbiamo bisogno di alcun codice JavaScript! Da quando abbiamo aggiunto il nome della classe .js-isotopo al nostro contenitore DIV e fornito le opzioni di Isotope con il -isotopi opzioni dati attributo, non dobbiamo fare nient'altro. L'isotopo trova solo il .js-isotopo classe, ottiene le opzioni e corre da solo.

Pulito, giusto?

Il risultato

Il risultato sotto è in realtà un output HTML, ma lo stesso si applica quando inserisci il codice WordPress sopra nel tuo tema:

Parole finali

Un'interfaccia simile a Metro non è difficile da imitare nel web design e, come puoi vedere, è bellissima. (Puoi fare anche meglio di questo migliorando il mio codice!)

In aggiunta a ciò, Isotope è un plugin molto carino per noi per fornire un layout reattivo ai nostri visitatori. In realtà ha ancora più funzioni come ordinare e filtrare gli oggetti, ma naturalmente non abbiamo avuto bisogno di quelli mentre costruivamo una homepage per il nostro blog.

Cosa ne pensi del linguaggio del design moderno? Cosa ne pensi di Isotope? Cosa ne pensi di questo tutorial? Condividi i tuoi commenti qui sotto!