system.css

Install System.css via CDN or npm

main

System.css is a pure CSS library for building interfaces that resemble Apple's System 6 (monochrome macOS). It requires no JavaScript and is compatible with any front-end framework. You can install it using a CDN for quick prototyping or via npm for project-based development.

Set up a local development environment

main

To contribute to or develop System.css locally, follow these steps:

Clone the repository.
Install dependencies: npm install.
Start the development environment: npm start.

Detailed style definitions can be found in style.css.

npm install
npm start

Use System.css components in HTML

main

To build a System 6-style interface, use specific class names for windows, title bars, and dialogs. Below is a starter template demonstrating a standard window with a title bar and a modeless dialog containing form fields.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>System.css Starter</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="https://unpkg.com/@sakun/system.css" />
</head>
<body>
    <!-- Standard Window Example -->
    <div class="window" style="width:30rem;">
        <div class="title-bar"> 
            <button aria-label="Close" class="close"></button>
            <h1 class="title">System.css</h1>
            <button aria-label="Resize" class="resize"></button>
        </div>
        <div class="separator"></div>
        
        <div class="window-pane">
            Hello world!
        </div>
    </div>

    <!-- Modeless Dialog Example -->
    <div class="window" style="width:30rem;">
        <div class="title-bar"> 
            <button aria-label="Close" class="close"></button>
            <h1 class="title">Search</h1>
            <button aria-label="Resize" disabled class="hidden"></button>
        </div>
        <div class="separator"></div>
        
        <div class="modeless-dialog">
            <section class="field-row" style="justify-content: flex-start">
                <label for="text_find" class="modeless-text">Find:</label>
                <input id="text_find" type="text" style="width:100%;" placeholder="">
            </section>
            <section class="field-row" style="justify-content: flex-end">
                <button class="btn">Cancel</button>
                <button class="btn" style="width:95px;">Find</button>
            </section>
        </div>
    </div>
</body>
</html>

What's inside system.css