Metro UI CSS 3.0

The front-end framework for developing projects on the web in Windows Metro Style

Metro UI CSS developed with the advice of Microsoft to build the user interface and include: general styles, grid, layouts, typography, 20+ components, 300+ built-in icons. Metro UI CSS build with {LESS}. Metro UI CSS is open source and has MIT licensing model.

Currently v3.0.4. Documentation for v2 can be found here

easy to use

less source

mit license

Whats new in 3.0

  1. compatible with AngularJS
  2. full code refactoring & new components
  3. declarative approach to the definition of components
  4. framework itself monitors components, pressure via ajax
  5. create cool page without knowledge of javascript
  6. support classic approach to definition of components

The main feature in version 3 is: a declarative approach to the definition and initialization of components, and the framework itself monitors components, pressure via ajax. When a declarative definition of all component parameters are set via data-* attributes, including methods and events of the component. This approach allows to further separate html and javascript code. Now that would determine which component do not need to know javascript :). It is still possible to determine which component directly via javascript.



Simple steps to create cool pages

  • Create page with HTML5 DOCTYPE

    
                                        <!DOCTYPE html>
                                    
  • Include required styles and libs

    
                                        <!DOCTYPE html>
                                        <html>
                                        <head>
                                            <link href="metro.css" rel="stylesheet">
                                            <script src="jquery.js"></script>
                                            <script src="metro.js"></script>
                                        </head>
                                        </html>
                                    
  • Use declarative style to create components

    
                                        <!DOCTYPE html>
                                        <html>
                                        <head>
                                            <link href="metro.css" rel="stylesheet">
                                            <script src="jquery.js"></script>
                                            <script src="metro.js"></script>
                                        </head>
                                        <body>
                                            <h1>Hello world!</h1>
                                            <div class="countdown" data-role="countdown" data-days="2"></div>
                                        </body>
                                        </html>
                                    
  • Enjoy the result

    Hello world!