Metro UI - Expressive library for impressive coding Metro UIComponents Library Home Quick Start Sandbox Docs GitHub 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! Fork / Download / Discuss npm i @olton/metroui click to copy to clipboard Quick Start click to open 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. 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 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 and fabric function to work with date and time: parsing, formatting, converting, calculating, ... GitHub 2 Str Class and fabric function to work with string: counting, transforming, checking, matching... GitHub 3 Farbe Class and fabric function to work with colors: parsing, transforming, checking, matching... GitHub 4 Html A set of function to create html elements via javascript... GitHub 5 DOM Library to work with DOM elements. Also, it contains the animation functions. GitHub 6 Hooks Special hook functions: useDebounce, useThrottle, useState, useEvent, useEffect. GitHub 7 Guardian Data validation library. Validate user input with special guardians and parsers. 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 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 Made in Ukraine Copyright 2012-2024 by Serhii Pimenov Illustrations by ManyPixels Built with Metro UI , Powered by Astro Hosting by Mirohost • CDN by KeyCDN • IDE by JetBrains Docs version 2024.2. Metro UI Codebase licensed under MIT, docs CC BY 3.0.