Convert Figma logo to code with AI

sakofchit logosystem.css

A design system for building retro Apple interfaces

2,339
78
2,339
4
View on GitHubView on NPM

Top Related Projects

jdan's avatar

98.css

9,000

A design system for building faithful recreations of old UIs

botoxparty's avatar

XP.css

2,205

A CSS framework for building faithful recreations of operating system GUIs.

khang-nd's avatar

7.css

1,580

A JS-independent, tree-shakeable CSS framework for building faithful recreations of the Windows 7 UI.

nostalgic-css's avatar

NES.css

20,612

NES-style CSS Framework | ファミコン風CSSフレームワーク

troxler's avatar

awesome-css-frameworks

7,803

List of awesome CSS frameworks in 2024

Quick Overview

System.css is a lightweight CSS library that provides a set of styles to create a Windows 98-inspired user interface. It allows developers to easily add a retro aesthetic to their web projects, mimicking the classic look of Microsoft's iconic operating system.

Pros

  • Easy to implement with minimal setup required
  • Provides a unique, nostalgic design that stands out from modern UI trends
  • Lightweight and doesn't significantly impact page load times
  • Includes styles for various UI elements, such as buttons, windows, and form inputs

Cons

  • Limited customization options without modifying the source CSS
  • May not be suitable for professional or modern web applications
  • Lacks responsiveness for mobile devices
  • Some users might find the retro design outdated or difficult to use

Code Examples

  1. Adding a button:
<button class="btn">Click me!</button>
  1. Creating a window:
<div class="window" style="width: 300px">
  <div class="title-bar">
    <div class="title-bar-text">My Window</div>
    <div class="title-bar-controls">
      <button aria-label="Close"></button>
    </div>
  </div>
  <div class="window-body">
    <p>Hello, World!</p>
  </div>
</div>
  1. Styling a form input:
<div class="field-row">
  <label for="text17">Text:</label>
  <input id="text17" type="text" />
</div>

Getting Started

To use System.css in your project, follow these steps:

  1. Add the following line to the <head> of your HTML file:
<link rel="stylesheet" href="https://unpkg.com/98.css" />
  1. Start using the provided classes in your HTML elements to apply the Windows 98 style:
<div class="window">
  <div class="title-bar">
    <div class="title-bar-text">My First Window</div>
  </div>
  <div class="window-body">
    <p>Welcome to the 90s!</p>
    <button class="btn">OK</button>
  </div>
</div>

That's it! You can now create Windows 98-style interfaces in your web projects using System.css.

Competitor Comparisons

jdan logo

98.css

9,000

A design system for building faithful recreations of old UIs

Pros of 98.css

  • More comprehensive, covering a wider range of UI elements
  • Better documentation and examples on the project website
  • Larger community and more frequent updates

Cons of 98.css

  • Larger file size, potentially impacting page load times
  • Less flexibility for customization without modifying source files
  • Strictly focused on Windows 98 aesthetic, limiting its use cases

Code Comparison

system.css:

button {
  border: 1px solid #000;
  background: #fff;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff;
}

98.css:

.button {
  box-sizing: border-box;
  border: 1px solid #003c74;
  background: linear-gradient(180deg, #fff 0%, #ecebe5 86%, #d8d0c4 100%);
  box-shadow: inset -1px -1px #00138c, inset 1px 1px #0831d9, inset -2px -2px #001ea0, inset 2px 2px #166aee;
}

Both projects aim to recreate classic operating system aesthetics using CSS. system.css focuses on a more general "system" look, while 98.css specifically targets the Windows 98 interface. 98.css offers a more complete set of UI components and better documentation, but at the cost of a larger file size and less flexibility. system.css provides a simpler, more lightweight approach that may be easier to customize for specific needs.

botoxparty logo

XP.css

2,205

A CSS framework for building faithful recreations of operating system GUIs.

Pros of XP.css

  • More comprehensive set of UI components, including window frames and icons
  • Includes JavaScript for interactive elements like draggable windows
  • Offers a more complete Windows XP look and feel

Cons of XP.css

  • Larger file size due to more components and JavaScript
  • May require more setup and configuration for complex layouts
  • Less focused on simplicity compared to system.css

Code Comparison

XP.css:

.xp-window {
  border: 1px solid #0055EA;
  background: linear-gradient(180deg, #0058EE 0%, #3A93FF 3%, #288EFF 6%, #127CE7 10%, #036FE2 14%, #0262C9 19%, #0054B0 63%, #004AA1 81%, #003E91 87%, #003A89 90%, #00338A 100%);
}

system.css:

.window {
  border: 1px solid #000;
  background: #fff;
  box-shadow: inset -1px -1px #dfdfdf, inset 1px 1px #fff;
}

XP.css provides more detailed styling for a Windows XP-specific look, while system.css offers a simpler, more generic approach to window styling. XP.css includes gradients and multiple color stops, whereas system.css uses basic colors and box-shadow for depth.

khang-nd logo

7.css

1,580

A JS-independent, tree-shakeable CSS framework for building faithful recreations of the Windows 7 UI.

Pros of 7.css

  • More comprehensive set of UI components, including form elements, buttons, and windows
  • Includes JavaScript for interactive elements like dropdown menus and window management
  • Offers multiple color schemes to mimic different Windows 7 themes

Cons of 7.css

  • Larger file size due to more extensive features and components
  • May require more setup and configuration for complex layouts
  • Potentially less flexible for custom designs outside the Windows 7 aesthetic

Code Comparison

7.css example:

<div class="window">
  <div class="title-bar">
    <div class="title-bar-text">My Window</div>
    <div class="title-bar-controls">
      <button aria-label="Minimize"></button>
      <button aria-label="Maximize"></button>
      <button aria-label="Close"></button>
    </div>
  </div>
  <div class="window-body">
    <p>Window content goes here.</p>
  </div>
</div>

system.css example:

<div class="window">
  <div class="title-bar">
    <div class="title-bar-text">My Window</div>
  </div>
  <div class="window-body">
    <p>Window content goes here.</p>
  </div>
</div>

The 7.css example shows more detailed window controls, while system.css offers a simpler structure. 7.css provides a more authentic Windows 7 look, whereas system.css aims for a more generic "system" appearance that can be adapted to various retro OS styles.

nostalgic-css logo

NES.css

20,612

NES-style CSS Framework | ファミコン風CSSフレームワーク

Pros of NES.css

  • More comprehensive set of UI components and styles
  • Larger community and more frequent updates
  • Better documentation and examples

Cons of NES.css

  • Larger file size and potentially slower load times
  • More opinionated design, which may limit customization options
  • Steeper learning curve due to more complex class structure

Code Comparison

NES.css:

<button type="button" class="nes-btn is-primary">Primary</button>
<button type="button" class="nes-btn is-success">Success</button>
<button type="button" class="nes-btn is-warning">Warning</button>
<button type="button" class="nes-btn is-error">Error</button>
<button type="button" class="nes-btn is-disabled">Disabled</button>

system.css:

<button class="btn">Button</button>
<button class="btn" disabled>Disabled</button>
<input type="button" class="btn" value="Input Button">
<input type="submit" class="btn" value="Submit Button">
<input type="reset" class="btn" value="Reset Button">

Both libraries aim to provide retro-style CSS frameworks, but NES.css offers a more extensive set of components and styles inspired by the Nintendo Entertainment System. system.css focuses on recreating the look of classic operating systems like Windows 98. NES.css has a larger community and more frequent updates, but this comes at the cost of a larger file size and potentially slower load times. system.css is more lightweight and easier to implement, but offers fewer pre-built components and customization options.

troxler logo

awesome-css-frameworks

7,803

List of awesome CSS frameworks in 2024

Pros of awesome-css-frameworks

  • Comprehensive list of CSS frameworks, providing a wide range of options
  • Regularly updated with new frameworks and resources
  • Includes categorization and brief descriptions for each framework

Cons of awesome-css-frameworks

  • Not a CSS framework itself, just a curated list
  • Requires additional research to choose the right framework for specific needs
  • No direct implementation or code examples provided

Code comparison

system.css:

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Ubuntu', 'Helvetica', 'Arial', sans-serif;
  background-color: #fff;
  color: #000;
}

awesome-css-frameworks:

## Base / Reset / Normalize

- [normalize.css](https://necolas.github.io/normalize.css/) - Modern, HTML5-ready alternative to CSS resets.
- [sanitize.css](https://csstools.github.io/sanitize.css/) - The best-practices CSS foundation.
- [minireset.css](https://jgthms.com/minireset.css/) - Tiny modern CSS reset.

Note: awesome-css-frameworks doesn't contain actual CSS code, but rather links to various CSS frameworks and resources.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

system.css

Documentation

System.css is a CSS library for building interfaces that resemble Apple's System OS which ran from 1984-1991. Design-wise, not much really changed from System 1 to System 6; however, this library is based on System 6 as it was the final monochrome version of macOS.

Fortunately, this library does not use any JavaScript and is compatible with any front-end framework of your choice. Most styles can also be overwritten to allow for deeper customization.

Getting Started

There are a couple of ways you can get started with System.css!

Import from CDN (easiest)

Add the following to your head tag:

<link rel="stylesheet" href="https://unpkg.com/@sakun/system.css" />

Here's some starter code to help you get started:

<!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>
    <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>

    <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>

Import from npmjs

npm i @sakun/system.css

Developing

  1. Clone the repository and run npm install
  2. Run npm start to start the development environment.

Everything you'll need can be found in style.css.

Contributing, Credits, etc.

Thanks for checking this project out! This library was made in good fun and was largely inspired by 98.css. The Chicago 12pt and Geneva 9pt fonts are recreations by @blogmywiki

System.css is still in beta! I recreated components based on Apple's Human Interface Guidelines. However, there's still a pretty good chance that I might've missed/overlooked something essential. I've also had to recreate most of the assets, which can also be found here.

If you find a bug, consider opening an issue. If there's something that you'd like to add, please feel free to create a PR!

If you'd like to see what else I'm up to, consider following me on Twitter or checking out my personal site :)

Sponsors

CSS Scan

CSS Scan: The fastest and easiest way to check, copy and edit CSS

NPM DownloadsLast 30 Days