Όλα Όσα Χρειάζεστε Για Να Δημιουργήσετε Ιστοσελίδες Metro UI-Styled Σαν Τα Windows 8

Τα Windows 8  Κυκλοφορήσαν  και το γνωστό look του λειτουργικού συστήματος έχει αλλάξει εντελώς με το tile-based Metro UI.

Είναι μια μεγάλη κίνηση από τη Microsoft καθώς το νέο UI  θα χρησιμοποιηθεί σε όλες τις πλατφόρμες τους, συμπεριλαμβανομένων των desktop, tablet, κινητά καθώς και την ιστοσελίδα τους .

Μας άρεσε το Metro UI, γιατί ταιριάζει σε πολλές πτυχές του σύγχρονου σχεδιασμού ιστοσελίδων όπως η απλότητα, τα  grid-based interfaces  (που είναι καλό για responsive layouts και αρκετά ακόμα).

Αν και το tile-based UI δεν είναι κάτι καινούργιο, το Metro UI θα εμπνεύσει σίγουρα πολλούς σχεδιαστές και θα δούμε ιστοσελίδες παρόμοιες με αυτό.

Αν σας αρέσει το Metro UI  και σχεδιάζετε να δημιουργήσει την επόμενη ιστοσελίδα σας εμπνευσμένοι από αυτό, παρακάτω θα βρείτε διάφορες πηγές για τη δημιουργία Windows 8 Metro UI-layouts

Frameworks και Templates για Metro-Styled Websites

Metro UI CSS

Το Metro UI CSS είναι ένα αρκετά πλήρες framework για την κατασκευή Metro-Styled ιστοσελίδων.
Έχει δημιουργηθεί με LESS και έχει ένα grid system, για την τυπογραφία, πίνακες, φόρμες, κουμπιά και εικόνες.
Έχει επίσης ενσωματωμένο σε JavaScript στοιχεία για τα δημοφιλή tiles, menu, sidebar, accordion, progress bars, notices  και άλλα.

BootMetro

Το BootMetro είναι σαν ένα θέμα για το Bootstrap του Twitter που φέρνει κάθε χαρακτηριστικό του Bootstrap, αλλά με ένα σχέδιο Metro.
Είναι στην πραγματικότητα λίγο καλύτερο, καθώς υπάρχουν προσαρμοσμένα στυλ για τα  tiles, application bar και κάποια άλλα components.

metro-bootstrap

Παρόμοιο με το BootMetro, το Metro-bootstrap είναι ένα θέμα για το Bootstrap του Twitter.

Metro UI Template

 

Πρόκειται για  ένα framework και template  για να σας βοηθήσει να δημιουργήσετε ιστοσελίδες χρησιμοποιώντας το Windows 8 Metro UI στυλ.
Διαθέτει πολύ ομαλά transitions και πολλά tiles (περιλαμβάνονται RSS, Twitter, καιρικές συνθήκες, κλπ).
Το πρότυπο είναι φιλικό προς κινητές συσκευές  καθώς και έχει ένα jQuery UI θέμα.

Droptiles – Metro-Style Web Dashboard

Ένα open source Windows 8 Start Web 2.0 Dashboard (όπως το iGoogle).

PHP Image Gallery In Metro UI

Ένα  PHP script γκαλερί που μπορεί να δημιουργήσει αυτόματα μικρογραφίες και μπορεί να εμφανίσει τις εικόνες σε ένα Lightbox.
Είναι συμβατό πλήρως με την HTML5 και την CSS3.

Motown

Μια βιβλιοθήκη για την κατασκευή μετρό-style εφαρμογών με το Visual Studio, χρησιμοποιώντας όσο μικρότερο κώδικα είναι δυνατόν.
Δεν στηρίζεται σε JavaScript.

 

jQuery Plugins για Metro UI-Styled Websites

jq-metro

Το JQ-metro έρχεται για τη δημιουργία μετρό-interfaces με αρκετές επιλογές όπως panorama, pivot, progress bar, list picker, toggle switch, buttons και textbox.

Metro JS


Αυτό το jQuery plugin είναι ικανό να δημιουργήσει  ιδιαίτερα προσαρμόσιμα tiles, application bar και έχει υποστήριξη theming.

jQuery Metro UI Plugin

Το plugin επικεντρώνεται στο να μας δώσει τη δυνατότητα δημιουργίας tile με ευκολία.

jQuery Mobile Metro Theme

Ένα δωρεάν jQuery UI κινητών που είναι προσαρμοσμένο για τις Cordova εφαρμογές.
Χρησιμοποιεί διάφορα plugins για το το χειρισμό του app bar, progress bar, toggle button και date-picker.

Metro UI Theme Builder For jQuery UI

Ένα ThemeRoller σαν το theme builder για το jQuery UI που επικεντρώνεται στη δημιουργία Metro UI outputs.

TileJS (non-jQuery)

Ένας αυτόνομος κώδικας JavaScript δημιουργίας πλακιδίων (tiles) και την επίτευξη tilting effect onClick (με CSS3).

Δωρεάν Εικόνες Metro UI

Modern UI Icons

Metro UI Dock Icon Set

Metro Icons