Metro UI CSS


Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style and not only.

Developed by User:olton

Used languages: CSS(4.97 MB), JavaScript(2.82 MB), HTML(22.88 kB), PHP(1.05 kB)

Written Sass Less JS
Framework design plain, metro
Feature type full

Current version


Last release

Nov 24, 2019

Created at Mar 9, 2012

Last commit

Nov 24, 2019

Open Issues








Release Notes on November 24, 2019 for v4.3.4


  • [x] M4Q: upd to 1.0.4
  • [x] M4Q Manipulation: optimise append, prepend to one definition for IE
  • [x] M4Q Script: add $.script, $.fn.script to execute scripts from element or create script object
  • [x] M4Q Manipulation: $.fn.append, $.fn.prepend now support script tag processing
  • [x] M4Q Clone: now support cloning data if second argument withDatais true - $(el).clone(true, true)
  • [x] M4Q Events: now you can define event name with hyphen or in camelCase notation. Example: mouse-down, accordionCreate
  • [x] M4Q Ajax: fix handler for sending data
  • [x] M4Q Ajax: fix $.json if returned value can't be parsed
  • [x] M4Q Ajax: fix post for object
  • [x] $: add $.serializeToArray(form), $serialize(form)
  • [x] M4Q Events: fixed removeEventListener
Metro 4
  • [x] Animations: put animations to separate less/css file metro-animations
  • [x] Object animations: add .flip-card
  • [x] Object animations: add .post-card
  • [x] Inputs: change placeholder font-size to 14px, add text-ellipsis
  • [x] Utils CSS: add class .stop-pointer
  • [x] Role naming: you can now use a hyphen to separate words in verbose component names for the data-role attribute. Example: data-role='button-group'' and data-role='buttongroup'' are equivalent.
  • [x] Drag Items: add new component, issue #1336
  • [x] Table: fix viewPath for getting view from server
  • [x] Table: fix colspan for message emptyTableTitle
  • [x] Checkbox: add using attribute readonly
  • [x] Switch: add using attribute readonly
  • [x] Table: fix viewPath for saving view on server
  • [x] Animation CSS: relocation
  • [x] AppBar: fix app-bar-menu behavior when user resize a window
  • [x] Slider: fix hint for IE11
  • [x] Window: fix interop m4q and jquery for Metro.window.create()
  • [x] Splitter: fix for IE11
  • [x] AppBar: add events onMenuOpen, onMenuClose, onMenuExpand, onMenuCollapse

In this page, you can compare and find Frontend framework for your development in the following categories. Best CSS frameworks to use 2017(based on current maintenance), skeleton framework to start the project immediately, grid support frameworks, material design framework, AngularJS 1 supported frontend framework, Angular 2 supported CSS framework, ReactJs supported frontend framework, metro design framework, etc...

Frameworks can compare based on filesize, currently maintained by contributors, documentation supports and etc...