Getting Started

NetFrame is a pure CSS component library. No JavaScript framework required — drop in the stylesheet and use the classes.

Installation

npm install netframe
# or
pnpm add netframe
# or
yarn add netframe

Usage

Bundler (Vite, Webpack, etc.)

import 'netframe/dist/netframe.css';

CDN / link tag

<link rel="stylesheet" href="https://unpkg.com/netframe/dist/netframe.min.css" />

Sass consumers

If you want access to the raw Sass tokens and mixins in your own .scss files, use Dart Sass’s Node package importer (pkg: URLs, Sass 1.71+; enable it with --pkg-importer=node on the CLI or importers: [new NodePackageImporter()] in the JS API):

// Import everything
@use 'pkg:netframe/scss/netframe';

// Or cherry-pick
@use 'pkg:netframe/scss/tokens';
@use 'pkg:netframe/scss/mixins/neon-glow' as *;

Fonts are referenced as ../fonts/*.woff2 relative to the output CSS. Serve the files from netframe/fonts/ (e.g. copy them next to your CSS), or point the URLs elsewhere:

@use 'pkg:netframe/scss/netframe' with ($nf-font-path: '/assets/fonts');

CRT Overlay

The scanline effect is a core identity element. Add .nf-crt to <body> to apply it globally:

<body class="nf-crt">
  ...
</body>

This adds a fixed full-screen pseudo-element with the RGB phosphor + 3px scanline pattern. It uses pointer-events: none and z-index: 9999 so it floats above all content without interfering with interaction.

Icons

NetFrame uses Phosphor Thin icons. Install and reference them:

<!-- CDN -->
<script src="https://unpkg.com/@phosphor-icons/web@2.1.1/src/thin/index.js" type="module"></script>

<!-- Usage -->
<i class="ph-thin ph-terminal"></i>
<i class="ph-thin ph-folder-open"></i>

Or install as a package:

npm install @phosphor-icons/web

First component

PRIMARY BUTTON

<button class="nf-button nf-button-primary">
INITIALIZE
</button>

Browser support

NetFrame uses color-mix(), CSS nesting, and :focus-visible. Supported in all evergreen browsers (Chrome 111+, Firefox 113+, Safari 16.4+).