Metro UI is an free, open source, html-first toolkit for developing web sites with HTML, CSS, and JS.
With Metro UI, you can easily and quickly make a site from prototype to production.
Metro UI includes general styles, responsive grid, layouts, typography, 100+ components and javascript routines, 800+ built-in icons.
Main <Features>
Html-First
Using Metro UI is straightforward. You don't even need to know javascript to make fully functional websites that interact with the user.
JS Routines
Metro UI includes several JS libs to work with strings, color, animations, datetime, and others.
Dark & Light
Support dark-light switching out of the box, including the relevant components.
Good Docs
Metro UI has detailed documentation and good examples. Requests an additional example.
Started <Any>
Jump right into building with Metro UI — use the CDN, install it via package manager, or download the source code.
Build <With>
Use any bundler to create your own set of Metro UI components.
esbuild
Parcel
Rollup
Vite
Webpack
Create your own awesome set of Metro UI components with your favorite bundler. You can see examples of using different bundlers in this repository.
{Structure}
Metro UI offers the developer utilities functions, 6 specialized modules, and more than 100 components that do not require jQuery.
Moreover, Metro UI contains the m4q module, which provides the user with most of jQuery's functionality for interacting with the DOM.
There are also modules for working with dates, terms, color and more... All parts are written by the same author, so Metro UI has zero-dependency.
Metro UI consists of five parts:
1
Common CSS
contains styles for: display, flex, border, cursor, floating, sizing and positioning, typography, and base themes colors
2
Common JS
contains a lot of usefulness functions, such as an extended list of type and condition checking functions, css functions, and more other
3
Special Modules
libraries for work with datetime, str (for string), farbe (for color), html, animation routines
4
Components
more than 100 components for almost all cases: inputs, cards, menus, and others
5
Icons
Metro Icons Font includes 800+ useful icons for your application
CSS <Vars>
Metro UI is evolving with each release to better utilize CSS variables for global theme styles, individual components, and even utilities.
:root
Metro UI provide dozens of variables for colors, font styles, and more at a :root level for use anywhere.
Variables are divided into global and component variables.
Variables names start with the component name and are followed by the name of the property.
:root {
--body-background: #ffffff;
--body-color: #191919;
--border-color: #e8e8e8;
--link-color: #5a87cb;
--link-color-hover: #0056B3FF;
}
:dark-side
All Metro UI components support dark ↔ light mode.
In Metro UI light mode is default.
For dark mode you can define variables inside a .dark-side class.
To switch to dark mode you must add class .dark-side to html tag. Also you can use special components that switch mode.
.dark-side {
--body-background: #1e1f22;
--body-color: #dbdfe7;
--border-color: #4a4d51;
--link-color: #5a87cb;
--link-color-hover: #0056B3FF;
}
You can override css variables not only in the :root.
If you only need to change one or more components on a page or component(s) in specified area, add your own class to the component (area) and define variables inside that class.
More information you can get from documentation.
{Special}
Metro UI includes special js modules to work with date and time, strings, colors, html, animations, and hooks.
These modules were designed specifically to achieve the goals when creating Metro UI, so they should also help you achieve your goals.
1
Datetime
Class to work with date and time: parsing, formatting, converting, calculating, ...
2
Str
Class and fabric function to work with string: counting, transforming, checking, matching...
3
Farbe
Class and fabric function to work with colors: parsing, transforming, checking, matching...
If you're missing something, tell me, and maybe it will appear in the Metro UI.
Join the Discussion!
Metro UI <Action>
Maybe your site will be next?...
Metro <Icons>
Metro Icons is an open source SVG icon library featuring over 800+ glyphs.
Use them as SVGs or icon fonts—both options give you vector scaling and easy customization via CSS.
You can include icons in your project either using a CDN or using your favorite bundler.
Technical Partners
Thank you for tech support