Metro Style Bootstrap: 10 Template

Metro, per una nuova estetica del Web

by admin admin 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 admin admin Date: 29-05-2013 metro bootstrap twitter template css html5 windows visite : 6728  
 
 
 
 

Articoli correlati

    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 creare un aplicazione Vue.js in 5 minuti

    Vue.js sta acquisendo sempre più popolarità, diventando un importante concorrente di framework come Angular o React.js. Come framework per i principianti, conquista i cuori dei giovani sviluppatori front-end e delle…

    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…

    318 utili risorse per twitter bootstrap #6

    Tutorial per Twitter Bootstrap Articoli CUSTOMIZING BOOTSTRAP Tutorial che spiega come cominciare ad usare LESS con Twitter Bootstrap. TWITTER BOOTSTRAP TUTORIAL Come integrare Twitter Bootstrap in 20 minuti. ADDING SWIPE SUPPORT TO BOOTSTRAP'S CAROUSEL…

    I 10 migliori generatori di gradienti CSS

    Difficilmente si potrà creare il gradiente perfetto affidandoci alla pura e semplice scrittura di codice CSS. Avere un riferimento visivo in fase di creazione è fondamentale. Ecco perché tra i tool…