skip to main |
skip to sidebar
Everything You Need To Create Windows 8 Metro UI-Styled Websites
Windows 8 has arrived and the familiar look of Windows OS has completely changed with the tile-based Metro UI.
This is a big move by Microsoft as this new UI will be used in all
their platforms including desktop, tablet, mobile and their website as
well.
Personally, I liked the Metro UI as it fits into
many aspects of the modern web design like simplicity, grid-based
interfaces (good for responsive layouts) and it is consistent in every
part (there is really a style guide behind it).
Although tile-based UIs is nothing new, Metro UI will definitely inspire many designers and we'll see websites similar to it.
If you like the Metro UI and planning to create your next website with inspirations from it, here are all the resource to create Windows 8 Metro UI-like layouts:
Frameworks & Templates For Metro-Styled Websites
Metro UI CSS is a pretty complete framework for building Metro-like websites.
It is created with LESS and has a grid system, styles for typography, tables, forms, buttons, and images
There are also built-in JavaScript components for the popular tiles, menu, sidebar, accordion, progress bars, notices and more.
BootMetro is like a theme for Twitter Bootstrap that brings every feature of Bootstrap but with a Metro design.
It is actually some more as there are custom styles for the tiles, application bar and some other components.
Similar to BootMetro above, metro-bootstrap is again a theme for Twitter Bootstrap.
It has all the beauties of Bootstrap and also includes the LESS styles as well.
This is a website framework and template to create sites using the Windows 8 Metro UI style.
It features very smooth transitions and many tiles (RSS, Twitter, weather, etc.) are included.
The template is mobile-friendly and has a jQuery UI theme as well.
An open source Windows 8 Start-like Web 2.0 Dashboard (like iGoogle).
It displays info in tiles where each tile is a mini app itself fetching data from external sources.
The project is built with ASP.NET but can be ported to any other language with ease.
A PHP image gallery script that can auto-generate thumbnails and can display images in a Lightbox.
it is fully HTML5 and CSS3 compliant.
A library to build Metro-style apps with Visual Studio using as little code as possible.
It doesn't rely on any JavaScript frameworks.
jQuery Plugins For Metro UI-Styled Websites
jq-metro jQuery plugin comes with several control for creating Metro-like interfaces.
Currently, panorama, pivot, progress bar, list picker, toggle switch, buttons and textbox are available.
This jQuery Metro UI plugin is capable of creating the tiles, application bar and has theming support.
The tiles and application bar are highly customizable in means of functionality and design.
The plugin enables us to create the tiled-views with ease and this is its only focus.
A free jQuery mobile Metro UI theme that is customized for the Cordova-built apps.
It uses various plugins for handling the app bar, progress bar, toggle button and date-picker.
A ThemeRoller-like theme builder for jQuery UI that focuses on creating Metro UI looking outputs.
A standalone JavaScript code for creating the tiles and accomplishing the tilting effect onClick (with CSS3).
Free Metro UI Icons
A set of pixel-perfect and hand-crafted icons in the Metro UI style.
They come in .design, 48*48px PNG (for App Bar) and as XAML files.
A free set of 670+ Windows 8 dock icons and it grows regulary.
It is available in 512*512px .PNG, 256*256px .ICO and as .SVG (converted by another designer).
The icons are inspired from the Windows Phone 7 and still a good fit for Metro UI apps.
Download pack consists of 130 .PNG icons.
Articles
0 التعليقات
Posts a comment