Metro Style Bootstrap: 10 template

Metro, per una nuova estetica del Web

by Janeth Kent Date: 29-05-2013 metro bootstrap twitter template css html5 windows

In che direzione va il web design?

Gli stili cambiano rapidamente nel web design, grazie a siti/comunità di creativi come dribbble e behance i designer hanno degli ampi bacini cui attingere.

Attualmente la maggior parte dei designer si sta concentrando sulo stile FLAT.Basta dare un rapido sguardo a Google per capire di cosa stiamo parlando: semplificazione delle interfacce, i gradienti e le ombre che vengono per il momento tralasciate, colori vivaci, tinte piatte, forma e tipografia.

L’utilizzo di un design “FLAT” consente di utilizzare CSS più leggeri e quindi di minimizzare i tempi di caricamento.

Non puó mancare la menzione al Metro Style. Il principio di fondo di questo stile consiste nel fare affidamento più sulle soluzioni tipografiche che su quelle grafiche con lo scopo di ottenere un impatto semplice, pulito ed efficace che metta in risalto i contenuti.

Il framework si basa sul celebre Twitter Bootstrap e fornisce l'HTML, il CSS ed il JavaScript necessari per creare gli elementi grafici tipici dell'interfaccia dell'ultimo sistema operativo di Microsoft. Esso supporta un insieme di template per la definizione del layout delle pagine, degli stili predefiniti per titoli, tabelle, form, pulsanti e liste, oltre ad un elenco di icone ed altri interessanti componenti come barre di applicazione, pannelli di impostazione ed altro ancora.

Sul sito del progetto è possibile vedere una serie di demo interattive del risultato ottenibile con il framework, mentre da GitHub è possibile scaricare il codice distribuito con licenza Apache 2.0.

Questa raccolta di 10 template Metro Style è per tutti i fans di Bootstrap:

1. BootMetro

Un framework semplice e flessibile, BootMetro si basa su Twitter Bootstrap e si ispira alla Metro UI CSS di Sergey Pimenov.

Source   Demo

2. Bootswatch – Cosmo

Un Metro style gratis ispirato ai temi di Bootstrap.

Source + Demo

3. metro-bootstrap

Semplice Bootstrap con metro Style.

Source Demo

4. Metro UI CSS

Metro UI CSS comprende un set di stili per creare un sito con un'interfaccia simile a quella di Windows 8 Metro UI.

Source + Demo

5. Metro Mania

Metro Mania offre un pacchetto completo, un tema professionale, responsive basato su Bootstrap. L'intero pacchetto di Metro Mania include un set di 60 pagine e 6 colori (lilla, rosso, azzurro, blu, verde ed arancione).

Source Demo

6. Scaffold – Metro Style Template

Scaffold è un template HTML moderno e fresco basato su twitter bootstrap e disegnato secondo il metro style. Ideale per il corporate business website o per le agenzie di web design.

Source Demo

7. MADMIN – Admin Theme

Un leggerissimo template di Bootstrap basato sul design Metro ed ispirato alla prima citata filosofia FLAT.

Source Demo

8. Metro Flexible Navigation

Il Metro Flexible Navigation é un template minimalista e pulito basato sul grid design ed ispirato alla nuova interfaccia di Windows 8. Ha un livello di personalizzazione altissimo è scrollable e dragable allo stesso tempo e disopone di utilissimo controlli per lo sliding. . Il set di incone predefinito puó essere cambiato, é disponibile una vasta collezione.

Source Demo

9. MelonHTML5 – Metro UI

MelonHTML5- Metro UI is a flexible è un semplice framework utile per creare siti one-page ispirati al design di Windows 8 Metro UI. Supporta HTML5, CSS3.

Source Demo

10. Metro Help Desk Support Tickets

Il pacchetto Metro Help Desk integra un manuale d'uso ed una lista di FAQ che permette ai membri dell team di velocizzare i tempi di risposte e pertanto l'efficienza del prodotto.

Source Demo

 
by Janeth Kent Date: 29-05-2013 metro bootstrap twitter template css html5 windows visite : 10393  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.

 
 
 

Articoli correlati

Nuove unità grafiche della finestra - CSS

'Intercop 2022" è un progetto annunciato da Google, Microsoft, Apple e Mozzilla Foundation per far sì che tutti i browser offrano la stessa esperienza web. Il progetto ha 15 aree di…

Come funziona il GAP in CSS Grid e flexbox

Forse conoscete già la proprietà CSS gap. Non è esattamente una novità, ma l'anno scorso ha acquisito un'importante capacità: ora funziona in Flexbox oltre che in CSS Grid. Questo, e…

Introduzione alle CSS Container Queries

Il responsive web design è una componente essenziale dello sviluppo web. Come sviluppatori front-end, dobbiamo preoccuparci continuamente della moltitudine di nuove risoluzioni e dispositivi. Va da se che creare una versione…

Flexbox, breve guida pratica

In questo articolo impareremo a gestire gli elementi del nostro sito web in modo più efficiente ed efficace, grazie alla proprietà Flexbox. Ma attenzione, non stiamo parlando di una semplice proprietà…

Come scaricare i video di Twitter da PC, Android e iPhone

I social network hanno incoraggiato gli utenti stessi a generare contenuti multimediali di ogni tipo. Fotografie e immagini, GIF e, naturalmente, video. Questo tipo di contenuti è disponibile in piattaforme…

Paesaggi Parallax costruiti interamente con CSS e HTML

Il CSS3 ha messo finalmente fine alle nostre frustrazioni: con delle semplici proprietà si aprono infatti infinite soluzioni. Una tra tante, la possibilità di inserire uno sfondo animato in una pagina…

9 Utili Librerie CSS per il Disegno Web

I componenti perduti di bootstrap, un complemento che sicuramente non dovrete mai farvi mancare!  Jasny Bootstrap E se il vostro framework CSS parlasse? Ecco a voi un nuovo Framework Semantico.Un…

Introduzione all'animazione dei poligoni con css

Per lungo tempo noi sviluppatori web, abbiamo dovuto rassegnarci alle strutture geometriche fondamentali: i blocchi rettangolari. Cosí, quando è stato introdoto il clipping nei css, abbiamo gioito. Dite la verità... Ma cos'è…

Risorse grafiche gratuite

Sul web si trovano moltissime librerie di risorse grafiche gratuite. Senza pretendere di essere esaustivi, anzi, sono graditi apporti e suggerimenti, vogliamo stilare un elenco delle fonti che, a nostro…

CSS: la funzione Calc()

Nella progettazione di un sito web responsive, dobbiamo tener conto della ormai grande varietà di dispositivi sui quali sarà visualizzato il nostro lavoro e delle rispettive variazioni di risoluzioni alle…

HTML5: l'elemento track

L'elemento Track di HTML5 consente di aggiungere del testo ai file in riproduzione multimediale e visualizzarlo nel lettore video HTML5, senza necessità di script o software aggiuntivo. Il testo può includere…

Realizzare banner animati con CSS3

Avete dei clienti esigenti che "ancora" vi chiedono movimentati, sbrilluccicanti banner in flash? Se siete stanchi di rispondere che ormai il flash è andato in pensione potete proporre una soluzione…

Clicky