Welcome to Metro UI

First library in Metro Style; 7k+ stars on github; Expressive coding...; ...with impressive library; Choose the right strategy!; Use Metro UI for your next project!

npm i @olton/metroui

click to copy to clipboard

Quick Start

click to open

Metro UI is a 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 reactive site from prototype to production.

Metro UI includes general styles, responsive grid, layouts, typography, 100+ components and javascript routines, 800+ built-in icons, and also router for SPA and special data model for creating a reactive web application with two-way data binding.

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.

Reactivity

Metro UI includes several JS libs to work with any aspects, and, most importantly, special data model for creating a reactive web application with two-way data binding.

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.

Test <Code>

🥛 Latte

We use Latte to test our code. Latte is a powerful testing framework (from Metro UI author) that allows you to write tests for your applications with ease.

It supports testing for: JavaScript, TypeScript, HTML elements (DOM enabled), React Components, and entire web pages with built-in headless browser.

Get started with Latte

Started <Any>

Jump right into building with Metro UI — use the CDN, install it via package manager, or download the source code.

CDN

The CDN is provided by the excellent provider KeyCDN. You can also use other free CDNs.

NPM

Install Metro UI source Less and JavaScript files via npm and build your custom set.

Download

Download and use Metro UI source Less and JavaScript files from GitHub.

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: common styles and useful javascript functions, 9 specialized modules, and 100+ ready to use components. Metro UI contains the Dom module for interacting with the DOM, modules for working with dates, strings, color and more... All parts are written by the same author, so Metro UI has zero-dependency.

Metro UI consists of five parts:

Common CSS

contains styles for: display, flex, border, cursor, floating, sizing and positioning, typography, and base themes colors

Common JS

contains a lot of usefulness functions, such as an extended list of type and condition checking functions, css functions, and more other

Libraries

libraries for work with datetime, str (for string), farbe (for color), html, animation routines

Components

more than 100 components for almost all cases: inputs, cards, menus, and others

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.

{Libraries}

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.

Datetime

Class and fabric function to work with date and time: parsing, formatting, converting, calculating, ...

GitHub

Str

Class and fabric function to work with string: counting, transforming, checking, matching...

GitHub

Farbe

Class and fabric function to work with colors: parsing, transforming, checking, matching...

GitHub

Html

A set of function to create html elements via javascript...

GitHub

DOM

Library to work with DOM elements. Also, it contains the animation functions.

GitHub

Hooks

Special hook functions: useDebounce, useThrottle, useState, useEvent, useEffect.

GitHub

Guardian

Data validation library. Validate user input with special guardians and parsers.

GitHub

Router

Class for creating a router for your SPA application.

GitHub

Model

Class for creating a reactive model with two-way binding.

GitHub

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 icon font 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.

You can view all icons on this site.

Technical Partners

Thank you for tech support