Integrations

Set up Master CSS in Angular

Guide to setting up Master CSS in your Angular project.

Master CSS Progressive Rendering scans the rendered HTML ahead of time, server-side or at build time, generates the corresponding CSS rules for each page, and defer loads the runtime engine to keep track of the dynamic class names.

Faster page loading

Non-rendering-blocking internal CSS and defer loading

Fully automatic

Capture any program-generated class names

CSS encapsulation

Only ship the page-used CSS instead of the whole site


Create a project

If you don't have a Angular project, create one first. It's recommended to refer Angular CLI.

ng new my-appcd my-app

Create a configuration file

Run the command to create a master.css.js file.

npm create @master/css@rc

Install Master CSS

Install Master CSS Server into your project via package managers.

npm i @master/css-runtime@rc @master/css-server@rc

Set up CSS runtime engine

Initialize the runtime engine with your configuration.

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';import { AppModule } from './app/app.module';import { initCSSRuntime } from '@master/css-runtime'; import config from '../master.css'; initCSSRuntime(config); platformBrowserDynamic().bootstrapModule(AppModule)    .catch(err => console.error(err));

Set up Angular Universal

Run the command to create a Angular server-side application.

npx ng add @nguniversal/express-engine

Set up CSS pre-rendering

All CSS rules are pre-rendered and injected into HTML on the server side or at build time.

import { render } from '@master/css-server'; import config from './master.css'; export function app() {    server.get('*', (req, res) => {        res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });         res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] },             (error: Error, html: string) => {                 error                     ? console.error(error)                     : res.send(render(html, config).html)             }         )     }); }

Launch server

Run the development server.

npm run dev:ssr

Start using Master CSS

Now style your first element using Master CSS syntax!

<h1 class="italic m:12x fg:strong font:40 font:heavy">Hello World</h1>

Open your browser to watch the changes.

localhost:3000

Hello World

  • Master UI


© 2025 Aoyue Design LLC.MIT License
Trademark Policy