Metro UI CSS 3.0.17

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.


You can donate btc to:

1HBdvWjUQ6ynKCQkoUgoU2p27N4jqBvu5r

Dear friends!
I'am very want to buy AR15 - half automatic rifle. If everyone who likes Metro UI CSS donate 5-10 USD, my dream will be implemented.
Thanks to all.
Regards, Sergey Pimenov

Currently v3.0.17
Documentation for v2 can be found here

easy to use

less source

mit license

Core_CSS v1.0.0

Full Featured HTML Framework for building Phonegap Hybrid Applications in Material Design Style for all devices. New declarative framework from Sergey Pimenov Metro UI CSS author.

Whats new in 3.0

  1. compatible with AngularJS and RequireJS
  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!