DEV Community

Cover image for Tired of Bootstrap? Try Metrojs.
manish srivastava
manish srivastava

Posted on • Updated on

Tired of Bootstrap? Try Metrojs.

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

Alt Text

  • A Datatable UI: Supereasy by Metro:*

Alt Text

  • Admin Panel: in just an hour* :)

Alt Text

Here is Github Resporitory:

GitHub logo olton / Metro-UI-CSS

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

Metro 4 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.


Status

Build Status Dependencies CSS gzip size JS gzip size Icons gzip size GitHub release npm version Nuget Website

Release

GitHub release GitHub release

Info

License: MIT GitHub issues GitHub code size in bytes

Donation

Donations on Patreon Donations on Open Collective

Community

Join the chat at https://discord.gg/NydRab3 Join the chat at https://gitter.im/metro4/Lobby Join the forum at https://forum.metroui.org.ua

Docs

Documentation and Demo: metroui.org.ua

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…

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)

Collapse
 
leob profile image
leob • Edited

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.

Collapse
 
olton profile image
Serhii Pimenov

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!

Collapse
 
manishfoodtechs profile image
manish srivastava • Edited

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/

Thread Thread
 
olton profile image
Serhii Pimenov

Also, facebook.com/metrouicss on Facebook

Collapse
 
leob profile image
leob

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.

Thread Thread
 
manishfoodtechs profile image
manish srivastava

Yes leob, Metrojs is a fantastic project. Give it a try :)

Thread Thread
 
leob profile image
leob • Edited

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.

Thread Thread
 
olton profile image
Serhii Pimenov

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.

Thread Thread
 
manishfoodtechs profile image
manish srivastava

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.

Thread Thread
 
olton profile image
Serhii Pimenov
Thread Thread
 
leob profile image
leob • Edited

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.

Collapse
 
makampos profile image
Matheus de Campos

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.

Collapse
 
madza profile image
Madza

Great to see an alternative, tho I believe atomic approaches and low-level utilities like Tailwind will get the most traction in future ;)

Collapse
 
goodevilgenius profile image
Dan Jones

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.

Collapse
 
olton profile image
Serhii Pimenov

if your need to create your own set of Metro 4 components in minutes - use special builder.
Metro 4 Builder - builder.metroui.org.ua

Collapse
 
olton profile image
Serhii Pimenov

The short history of the Metro UI CSS
m.habr.com/ru/post/431152/ (russian language)

Collapse
 
manishfoodtechs profile image
manish srivastava

Nice Sergey !
English Translation is here:

translate.googleusercontent.com/tr...