css95

Windows 95-inspired CSS and presentational UI primitives extracted from wes.dev.

Install

pnpm add css95

Global CSS

import 'css95/style.css';

The default scale is 2px. Optionally set --css95-scale on a theme wrapper or ancestor to resize css95 components:

.ThemeClassic {
  --css95-scale: 2px;
}

<div class="ThemeClassic">
  <section class="Window -active">
    <div class="WindowTitleBar">
      <span class="WindowTitleText">Control Panel</span>
    </div>
    <div class="WindowContent">Hello</div>
  </section>
</div>

CSS Modules

import styles from 'css95/style.module.css';

<div class={styles.Window}>
  <div class={styles.WindowTitleBar}>Hello</div>
</div>;

State classes are available with bracket access:

styles['-active'];

Themes

ThemeClassic is the default Windows 95 palette. Additional React95-inspired palettes are available as ThemeName classes and component wrappers, such as ThemeBee.

<div class="ThemeBee">
  <section class="Window -active">
    <div class="WindowTitleBar">
      <span class="WindowTitleText">Control Panel</span>
    </div>
    <div class="WindowContent">Hello</div>
  </section>
</div>

Solid

import 'css95/style.css';
import { Button, ThemeBee, Window } from 'css95/solid';

<ThemeBee>
  <Window title="Control Panel" appearance="active">
    <Button>OK</Button>
  </Window>
</ThemeBee>;

React

import 'css95/style.css';
import { Button, ThemeBee, Window } from 'css95/react';

<ThemeBee>
  <Window title="Control Panel" appearance="active">
    <Button>OK</Button>
  </Window>
</ThemeBee>;

The component adapters do not import CSS. Import css95/style.css in your app, or pass CSS Module mappings with classes={styles}.

License

MIT, https://wes.dev/LICENSE.txt