Learn METRO4 with Real Code Examples

Install via npm: `npm install metro4`

Or use CDN: `<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/metro4/css/metro-all.min.css'>`

Include JS via CDN or npm: `metro.min.js`

Optionally customize theme using Metro 4 variables

Integrate with build tools like Gulp, Webpack, or Parcel

Install Node.js & npm

Install Metro 4 via npm or CDN

Setup Gulp or build tools if customizing

Include JS widgets for interactive components

Start coding with grids, tiles, and widgets

metro4.json - configuration and theme variables

index.html - main markup

css/ - custom styles

js/ - JS widgets and custom scripts

package.json - npm dependencies

npm install metro4

gulp build - compile CSS/JS

gulp watch - development mode

Optional: npm start for dev server

Custom CLI for theme building

Framework is language-agnostic

Form messages can be localized

RTL support via CSS

Widgets are locale-independent

Typography adapts to different languages

Keyboard navigation supported

ARIA roles in modals and interactive widgets

Focus management for dialogs

Screen reader-friendly defaults

Semantic HTML encouraged

Buttons, forms, tiles, menus, tables

Responsive grid and flex layouts

Customizable colors and typography

Metro 4 widgets for interactivity

Accessible, structured HTML

No built-in state system

Widgets handle component-level state

Reactive frameworks handle app-level state

Class toggles via JS for modals/tiles

Focus and accessibility features integrated

Handled via JS widgets and forms

Integration with REST APIs for dynamic content

No direct data-binding included

Forms support validation and interactive feedback

Frontend frameworks manage app-level data