@@adsense


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.

The project is looking for sponsors!

Currently v3.0.15
Documentation for v2 can be found here

easy to use

less source

mit license

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.

@@adsense

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!

Developed with advice

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.

BizSpark Startup

Metro UI CSS is a BizSpark Startup. Microsoft BizSpark is a global program that helps software startups succeed by giving them access to software development tools, connecting them with key industry players, and providing marketing visibility.

BizSpark provides free software, support, and visibility to help startups succeed. Join BizSpark and become part of a global community that has over 50,000 members in 100+ countries.

Join the BizSpark Program now

Thanks to JetBrains

Thanks to the company JetBrains for supporting the project in the form of a license for a great product PhpStorm.

Get PhpStorm now!