olton / metro-ui-css

Impressive component library for expressive web development! Build responsive projects on the web with the first front-end component library in Metro Style. And now there are even more opportunities every day!

Metro UI Components Library

Sleek, intuitive, and powerful front-end framework for faster and easier web development.
Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style.

Explore Metro 4 docs »

Metro 4 is an MIT-licensed open source project. It's an independent project with its ongoing development made possible entirely thanks to the support by these
awesome Backers.

---

Project State

---

Project Size

---

License and Premium Features

This project licensed under the MIT license. In addition, SUPPORT PACK is available for an annual subscription on https://korzh.com/ and for a Patreon Patrons.

SUPPORT PACK includes an Extra time for priority support by email and other options.

Community

Contributing

All contributions are welcome. Learn more about how you can contribute to this project here.

Important! Before you create Pull Request, you must sign CLA!

Docs

Please click here for Documentation and Demo.

Releases

Metro 4 releases frequently. I Am create release when there are significant bug fixes, new APIs or components. The usual frequency of release of the new version is one week on Sundays.

LTS

Long term support of older versions of Metro 4 does not currently exist. If your current version of Metro 4 works for you, you can stay on it for as long as you'd like. If you want to make use of new features as they come in you should upgrade to a newer version.

Browser Compatibility

Latest 2 ✔	Latest 2 ✔	Latest 2 ✔	Latest 2 ✔	Latest 2 ✔

Old version

Metro UI CSS 3.x you can find in a repo Metro-UI-CSS-3
Metro UI CSS 2.x you can find in a repo Metro-UI-CSS-2
Metro UI CSS 0.x you can find in a repo Metro-UI-CSS-095

Documentation and Demo for V3: metroui.org.ua/v3.
Documentation and Demo for V2: metroui.org.ua/v2.
Documentation and Demo for V0: metroui.org.ua/v0.

Activities

Thanks

Thanks to all. Special thanks to all those who financially supported the project.

Credits

You can read about credits here

---

2012-2020 © Copyright by Serhii Pimenov. All Rights Reserved. Created by Serhii Pimenov.

metro-ui-css's Issues

Support vertical tile-double

It would be great to be able to have tiles that can span multiple rows vertically. Very useful for "live" tiles showing some information.

Links in Tiles

Hello,

i have troubles to create links in tiles (windows 8 like template). I have only basic knowledge on web design, so i tried to surround the div class="tile..." with a link element. This works fine on firefox, but on internet explorer you can't follow the link if you hit the image inside the tile. I tried different aproaches, but couldn't find a solution that works with IE.

Has somebody an example how you would implement a link that works for all browsers?

Menu bug when switch between menu pulled and normal

Hi,
as in the email I wrote to you, when the menu switch from pull version (tablet / mobile) to the normal one after a dropdonw was open, in normal mode won't open (for example, on ipad 1, if you change from portrait mode to landscape, after a dropdown was open, they won't open).

Fix:
Add this snippet to "dropdown.js" in the function "initSelectors" after "clearDropdown();".

$(this).parents("ul").css("overflow", "visible");

How about integrating a div scroll plugin instead of click + drag?

Hello,
Currently we have click + drag to move from left to right. How about integrating a jQuery based scroll plugin so that a mouse-over on either side of screen would result into auto-scrolling, eliminating the need of click and drag or mousewheel scroll.

I have tried to integrate one in the project I am working on:
https://github.com/sagarsane/abetterportfolio

The link to the actual live site is on that page.

Thank you!

Change Segoue font to ...

no description

Fix: Pagecontrol under 767px (pull it)

Hi,
just another fix found today...

FILE: pagecontrol.js

Replace line 18 to 23 with:

if (!$a.parent('li').hasClass('active')) {
    $frames.hide();
    $ul.find("li").removeClass("active");
    var target = $($a.attr("href"));
    target.show();
    $(this).parent("li").addClass("active");
}
if ($(this).parent("li").parent("ul").parent(".page-control").find(".menu-pull-bar").is(":visible")) {
    $(this).parent("li").parent("ul").slideUp("fast", function () {
        $(this).css("overflow", "").css("display", "");
    });
}

Insert after line 39:

$(".page-control .menu-pull-bar").text($(".page-control ul li.active a").text());
$(".page-control ul li a").click(function (e) {
    e.preventDefault();
    $(this).parent("li").parent("ul").parent(".page-control").find(".menu-pull-bar").text($(this).text());
});

FILE: modern-responsive.css

Insert in @media (min-width: 768px) NB.: Isn't really beatiful, but keeping it global, there is the same bug as dropdown.js that display: none persist and from 768px and up menu will disappear

.page-control ul {
    display: block !important;
    overflow: visible !important;
}
.page-control .menu-pull-bar {
    display: none;
}

Insert in @media (max-width: 767px)

.page-control .menu-pull {
    background-image: url('IMAGE ROW34 DARK VERSION'); /* I can't attach here, but I have it as PNG and I post the URL DATA URI at the end */
    display: block;
}
.page-control .menu-pull-bar {
    display: block;
    width: 100%;
    height: 44px;
    border: 1px solid #CCC;
    border-bottom: 0px;
    background-color: rgba(217, 217, 217, 0.16);
    padding: 10px 0px 10px 20px;
    color: #2D89EF;
}
.page-control ul {
    width: 100%;
    height: auto;
    margin: 0px;
    position: relative;
    padding: 0px 20px 10px 20px;
    border: 1px solid #CCC;
    border-bottom: 0px;
    border-top: 0px;
    display: none;
}
.page-control ul li {
    display: block;
    float: left;
    width: 100%;
    padding-left: 0;
    line-height: 32px;
    position: relative;
    height: auto;
}
.page-control ul li:first-child {
    margin-left: 0px;
}
.page-control ul li.active {
    border: 0px;
    background-color: rgba(0, 0, 0, 0);
}
.page-control ul li.active a {
    color: #1e1e1e;
}
.page-control ul li a {
    width: 100%;
    text-align: left;
}
.page-control ul li a:hover {
    background: #464646;
    color: #fff;
}
.page-control .frames {
    margin-top: 0px;
}

Data uri:

data:image/png;base64,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

Easy tutorial on how to get this works:

<div class="page-control" data-role="page-control">
    <span class="menu-pull"></span>
    <div class="menu-pull-bar"></div>
    ...
</div>

Done

Hope to help :D

Problems with Chrome

I'm using Chrome Version 22.0.1229.79, and few things are not showing correctly (slider tiles, rating, progress bar, carousel), on Firefox, Opera and IE seems ok.

Background Parallax

I created a background parallax that can be best viewed on the start.html page.

Gist is located here.

Could we have a continuous list of tiles fit vertically in the browser?

Instead of a fixed height and fixed width metro sections, could we have the tiles flow continuous horizontally while fitting vertically on the browser?

I am trying to simulate the tablet experience on Windows 8. On the tablet, the tiles fit vertically but they flow continuously horizontally and you can use touch to scroll. It would be awesome to replicate that experience on browser.

Thank you very much for this effort. I salute you!

Icons on windows phone 7

Icons on Windows Phone 7 (HTC Radar 4G) are not rendering.
Is this a bug by any chance or I need to do something different? Used demo page for testing http://metroui.org.ua/icons.php
Thanks

color:white when using optional row classes

You could add color:white to the optional row classes to provide a better readability:

http://public.daniel-korn.de/optional-row-classes-1.png
http://public.daniel-korn.de/optional-row-classes-2.png

input[type="password"] not implimented

Hi again,
you've said that this issue is closed but your css file still not supporting input password.
thans

A metro style auto-complete input box

I am having trouble finding an auto-complete plugin that goes with metro style theme, it will be great if you can add one.

Thanks in advance!!

Mouse on the Windows 8 Start Page

On the Windows 8 Start Page, if you drag the screen(mouse down), and mouse up when you're off of the screen, the screen scrolls without a mouse down.

This is a small problem, but it can be annoying.

BTW, THANKS for this awesome project. I'm really going to look into it further in the coming weeks.

Adding HTML5 formelements

I would like to see the following (HTML5) formelements:

• phone
• url
• email

I've checked the forms.less but I can't figure out how I add those ;)

Thanks,
Frank

tiles click animation

no description

Version in modern.less is still 1.1.1

This is still version 1.1.1 but you are providing 1.1.3?

single icon A button

Link with only icon inside does not work.

Example:

<a href="/"><i class="icon-file"></i></a>

Icon Password Box Display

Hi! When you see a password box in an iPhone or iPad, the icon of the password box doesn't display well.

Thanks in advance!!

single icon A button big

Example:

<a class="button big bg-color-blue fg-color-white"><i class="icon-cog icon-large"></i>Wizard</a>

adding jquery.kinetic scrolling plugin

Hi olton,
what about adding jquery.kinetic scrolling plugin i like it in the original project Droptiles !

Icons "\xx" not working at Chrome

OS: Win 7 x64
Browser: Chrome 23.0.1271.64 m (current)

Icons from -home to -fire are not working. They are simply invisible. I was digging in CSS files and I've foud that issue occurs with styles defned like:

.icon-home:before {
content: "\21";
}

When it's like \e000 it's ok.

Question about the Tiles 1 tab in the Demo

I noticed that in Tiles 1 in the demo, you implement drag & drop of tiles, but you don't do it anywhere else.

The question is, 1) have abandoned drag & drop, and if so, 2) what was the reason?

Finally, if there is no drag & drop, how does the user change the layout to make important tiles appear where they need them?

Firefox 14, Opera 12 on Windows 8 - horizontal scroll issue

Not tested in IE 10 (metro and desktop version) and Google Chrome.

Images in tiles, and tiles itself will lost position (adds ~3-6 pixels to X and Y) and mess if you start to scroll.

Maybe, it is better to use background-image for tiles in div? I used this option in my project.

upd: looks like margin issue, if you add some element (in my case simple paragraph) - glitches will go away (compare Index.html and Images.html in new-demo).
Will dig later.

    <!-- add this before Metro-scroll   -->      
    <h2>&nbsp;</h2>
    <!-- Scrollable content -->             
    <div class="metro-scroll">

Does the 'tile-image-slider' property work for text-based DIVs?

Hello,

Does this property work for sliding animation on the tiles which have any other content than img tag?

If not, I think it would be useful to have a slider property for text-based live tiles too. This would eliminate the need to integrate any third party libraries for this feature.

Add new template please

Hello. Please, add new template.

Screenshot

You can add white and black versions

Add input[type=text]

Добавить элемент формы input[type=text] с дополнительной функциональной кнопкой

Suggestion - Metro-UI-CSS on Nuget.org

Would be nice for Metro UI CSS to have a package on nuget.org.
It would also boost its exposure for .NET developers.
thanks

web and Mobile ?

Is it ready for the mobile or just develop for the web ?

Could we have a mouseover border color?

At the moment we can not change the mouseover border color of tiles and list view. It would be really nice if we can change the color by CSS class.

Thank you very much for this project and I would be happy, if you realize this feature.

Best regards,
Twaldigas

tile quadro double-vertical problem in image set

cannot make image full in tile quadro double-vertical mode..

                    <div class="tile quadro double-vertical">
                        <div class="tile-content images-set">
                            <img src="images/1.jpg" alt="">
                            <img src="images/2.jpg" alt="">
                            <img src="images/3.jpg" alt="">
                            <img src="images/4.jpg" alt="">
                            <img src="images/5.jpg" alt="">
                        </div>
                        <div class="brand">
                            <span class="name">Photos</span>
                        </div>
                    </div>

change the pixel height just ruin the image..

Running 'new-demo' under WAMP server generates 404 error

Hello,

Thank you @olton for this great CSS library. It is really good!

I was trying to run Metro-UI-CSS new-demo under WAMP server. The demo files could not find the img, js, css folders.
Possibly because of the following scenario:
For eg:
One of the script tags in 'new-demo\index.html' has the source attribute as:
src="/js/site.js"
It should be either:
src="js/site.js"
or:
src="./js/site.js"

Same is the case with all the other demo pages under 'new-demo' folder. Currently it is looking at the root directory of the web server.
The original 'demo' folder looks fine.

Will commit this small fix soon!

Thank you.
Sagar

table css class "stripped" should be spelt "striped"

Add input[type=password]

Элемент должен содержать в себе кнопку для переключения показа пароля

Problem Footer SmartPhone

Hi! The footer doesn't display well when you see in a smartphone :)

Thanks in advance!!

Support of IE8 Browser

What are all the issues we might face if we use it in IE8 (which in not a compatible browser for Metro UI CSS).

FYI, 90% of our corporate internal users only use IE8.

Support mobile browser

This Project is very good!!

Will it going to support mobile browser? It will very nice if support iPad etc

Wrong styling if using ul inside accordion

When using a list (

) in the content of a accordion, the first level is using second level styling.
This is because the accordion is also using ul for the accordions.

Can this be fixed?

nab-bar icon padding bug

If there is elements in nav-bar menu with icon, wrong top margin occurs.

here is screenshot: http://cl.ly/image/0Y1N113k3G1h

And is it possible to return hover effect to nav-bar menu with inversed background color for menu item?

Drag & Drop actually?

Hi,

first, congratulations for the great work you have done :)

next, I wonder how i can implement an drag&drop for my tiles.

Maybe with kinetic jquery plugin?

Sincerely,

Mickael Andrieu

would you like to add some processing bar or loading bar?

or something like that, just like skydrive.com
while pages loading, display a processing bar,
here is the link:
https://skydrive.live.com/

Are the icons in the img folder copyright free?

I would be great to change background color for navigation-bar

Something like
<div class='navigation-bar background-color-blue'> to mimic microsoft sites color scheme.

Notices -> Replies, when small text it seems like broken

If your text in

    <ul class="replies">
        <li class="bg-color-*">
            <div class="avatar"><img/></div>
            <div class="reply">
                <div class="date">...</div>
                <div class="author">...</div>
                <div class="text">...</div>
            </div>
        </li>
    </ul>

in <div class="text">my text</div> too small, for example, just several words, image in avatar goes off the reply box. And box looks like crap.

Low prio: Adding FILE formelement

Can you add the file formelement to forms.less?

Thanks,
Frank

Easy way of displaying counts/additional information in the tile

See https://dl.dropbox.com/u/26422/metrostatus.png

It would be nice to have out of the box classes in the CSS to help you achieve this effect.

css class for tiles called "bage" should be spelt "badge"

safari radiobox issue

Black dot in selected radio button looks like on this screenshot in safari.

http://cl.ly/image/062D2j3P0f1K

In Google chrome is just ok.

Bootstrap theme?

Is this a sort of bootstrap theme? I do see that your sample site uses Bootstrap, but you don't advertise it anywhere. Could you, please, clear this question up?

Support for panorama views