ds.css: Nintendo DS Lite UI Framework in Pure CSS

ds.css is a CSS framework that recreates Nintendo DS and DS Lite UI elements with themed colors, pixel-edged controls, patterned panels, and PictoChat-style messages.

You can use it to build retro portfolio pages, nostalgia-driven landing pages, or internal tools with a handheld console look.

How to use it:

1. Download the package and copy the contents of /css from the zip into your project, then link it:

<link rel="stylesheet" href="css/ds.css" />

2. Projects that already run npm can install the package instead and import it from a bundler entry point.

npm i @spiritov/ds.css
import '@spiritov/ds.css';

3. Open the official documentation, choose the UI component you need, click “Show Code,” and paste the displayed HTML into your page.

Alternatives:

• 8-bit CSS Framework: NES.css
• Windows 7 CSS Framework: 7.css
• Windows XP CSS Framework: XP.css
• Terminal Style CSS Framework: terminal.css
• CSS & CSS3 Frameworks Category

FAQs:

Q: Does ds.css require JavaScript to work?
A: No. Every component, including the accordion and radio buttons, styles native HTML elements with CSS alone.

Q: Why does my grid component show up with zero size?
A: Grid containers need an explicit width and height in your own CSS. ds.css does not set a default size for empty grids.

Q: Can I change the DS Lite color palette to match my own brand?
A: Yes. Override any of the --color-ds-[name] custom properties in your :root selector, and every class built on that variable updates automatically.

Q: Does ds.css affect existing form controls across my site?
**A: Yes. The stylesheet targets native buttons, text inputs, radio inputs, labels, legends, and accordion elements.

Q: Can I use ds.css with a React or Vue project?
A: Yes. Install the npm package and import the CSS file in your main JavaScript entry point. The styles apply to any component markup that uses the provided class names.