I personally like metrojs. Wonderfully crafted in Ukraine.
So what is it?
Are you tired of Bootstrap? Get started with Metro 4, the popular framework for building responsive, mobile-first sites in Metro style, with the Metro CDN and a template starter page.
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.
Quick start
Looking to quickly add Metro 4 to your project? Use Metro CDN, provided for free by the folks at KeyCDN.
<link rel="stylesheet" href="https://cdn.metroui.org.ua/v4.3.2/css/metro-all.min.css">
Some Examples:
Official examples visit here
A desktop UI : Yes a desktop UI by Metrojs
- A Datatable UI: Supereasy by Metro:*
- Admin Panel: in just an hour* :)
Here is Github Resporitory:
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.
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/.
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…
Please also check my previous posts regarding creating your cloud service like digital ocean or google cloud. Part 1 and Part-2 and Part-3 . Also most important listening your VMs on external IPs here -4
In Part-3 we have also seen how to install opennebula. Opennebula is an alternative to openstack/ cloudstack.
I hope you people like the above article and learned something.
You are most welcome to join my team form for joining .
Contact email: Manishfoodtechs@gmail.com.
If you have any problem, our team is also engaged in professional consultancy and delivery.
Don't forget to Follow, like or tag me :).
Top comments (17)
Hm okay, your website won't look identical to hundreds or thousands of other Bootstrap sites (well it's not that hard to customize in order to make it look different), but it will look exactly like any Microsoft Metro UI site or app? Back to square one.
It may be a great choice, I just wondered in which cases you'd want to use this library instead of the official Microsoft toolkit, I mean this:
microsoft.com/design/fluent/#/web
Just wondering what the difference is.
Firstly - it’s not plagiarism! all code is written by me from scratch using the Microsoft dev guide. Secondly, all the code is available as open source on github, so it won’t go anywhere. Thirdly, 6.5k stars say that someone needs this and I am grateful to those who use my Metro 4 library. And in the fourth, I myself and the company in which I work use this library for projects, therefore it is constantly developing and will develop!
Hey Sergey , How are you!
Metrojs is wonderful and my team also use it. On 24 December 2019, I had introduced metrojs to devto community in one of my article. The metrojs was viewed by 21,828 developers and 176 stars to the article.
I am one of your followers at Github . People who want to follow Sergey can visit github.com/olton . Also, link to his website: pimenov.com.ua/
Also, facebook.com/metrouicss on Facebook
But I didn't mention plagiarism, it didn't cross my mind ... 6.5K stars that's fantastic and it shows that people like and use it, power to you. Bootstrap is also great, and Material Design, and others. There's plenty of room for alternatives so more choice, power to the people.
Yes leob, Metrojs is a fantastic project. Give it a try :)
I might, checked the website and it looks great. And I've clarified my original post a bit and made it somewhat more neutral and less subjective.
But, my question remains (this is in fact what triggered my original comment): how should I see this library in relationship to the official Microsoft "Metro" standard - is it "inspired by", or is it an official and hundred percent faithful implementation, or what?
I know about "Metro" from Microsoft but when I visit the Metro UI website I don't even see a reference to Microsoft's standard, so this left me highly confused.
So I think i would be good to provide just a bit more context or background on the website as to how this relates to "Microsoft Metro", this will also help people to understand what the "use case" of the library is.
This is not an official library from Microsoft. This is completely my vision of what has been written in the Microsoft Dev Guide since 2012. The development of the library was agreed with Microsoft and the project even received the status of Microsoft Bizspark Startup. At the same time, a Microsoft representative said that I didn’t need to somehow indicate a reference to Microsoft or Microsoft Windows. Over time, I wrote those components that were no longer in the Dev guide, but I needed in the same style. That's how it all grew, starting in May 2012.
Hey leob... I found this ...
metroui.org.ua/v3/
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.
metroui.org.ua/v0/
metroui.org.ua/v2/
Good to know about the history, and that the project even received endorsement from Microsoft. I think that might be a relevant piece of background information also for prospective users of the library, and would be good to mention on the website, also to prevent confusion.
Guys, I dont know about you, but for me, almost I prefer write my css for my own!
I know its boring or slowly for companies or what ever, but write by my self makes the look better. Just my sharing my opinion.
Great to see an alternative, tho I believe atomic approaches and low-level utilities like Tailwind will get the most traction in future ;)
Ewwww.
If I visited a website, and it looked like a Windows Metro desktop, I'd hit that back button so quick.
And it's not super functional either. I tried the "Desktop" demo, and when I tried to drag a "window", it wouldn't stop dragging.
if your need to create your own set of Metro 4 components in minutes - use special builder.
Metro 4 Builder - builder.metroui.org.ua
The short history of the Metro UI CSS
m.habr.com/ru/post/431152/ (russian language)
Nice Sergey !
English Translation is here:
translate.googleusercontent.com/tr...