gitwtfhub

wtf is ds.css?

spiritov/ds.css — explained in plain English

Analysis updated 2026-05-18

552CSSAudience · designerComplexity · 1/5Setup · easy

TL;DR

A CSS framework and set of web component widgets that give any web page the retro look of the Nintendo DS and DS Lite user interface.

Mindmap

mindmap
  root((ds.css))
    What it does
      DS style CSS
      Retro UI look
      Web component widgets
    Tech stack
      CSS
      JavaScript
      Web Components
    Use cases
      Style a whole site
      Scope styles to a section
      Add a calendar widget
    Audience
      Web developers
      Designers
      Hobby projects

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Why would anyone build with this?

REASON 1

Link the stylesheet from unpkg to give a website's buttons and menus a Nintendo DS look instantly.

REASON 2

Apply the DS style to only one section of a page using the scoped stylesheet and a wrapper class.

REASON 3

Drop in ready made widgets, like a calendar, using simple custom HTML tags such as ds-calendar.

REASON 4

Install the package via npm and use the widgets inside a framework like Svelte.

What's in the stack?

CSSJavaScriptWeb Components

How it stacks up

spiritov/ds.cssgustavoguanabara/php-modernoatom/one-dark-syntax
Stars552558473
LanguageCSSCSSCSS
Last pushed2023-08-092018-09-05
MaintenanceDormantDormant
Setup difficultyeasyeasyeasy
Complexity1/51/51/5
Audiencedesignervibe coderdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you spin it up?

Difficulty · easy Time to first run · 5min
The README does not state a license for this project.

Wtf does this do

This is a CSS framework that recreates the look of the Nintendo DS and DS Lite user interface, so any web page can borrow that nostalgic handheld console style for its buttons, menus, and other elements. Instead of writing your own styling from scratch, you add one stylesheet and standard HTML elements pick up the DS look automatically. The easiest way to use it is to link directly to the hosted file from unpkg in the head of an HTML page, so there is nothing to install. You can also download the finished files from the dist folder and host them yourself, or install the package through npm if your project already uses a package manager and a build step. If you only want the DS styling applied to part of a page rather than the whole site, there is a scoped version of the stylesheet. You link that version instead, then wrap the section you want styled in a div with a specific class name, leaving everything outside that div looking like ordinary HTML. Beyond plain CSS, the project also includes a small set of interactive widgets built as web components, such as a calendar, that you can drop into any page with a single script tag and a custom HTML tag like ds-calendar. These widgets can be used the same simple way in plain HTML, or imported into a JavaScript framework such as Svelte. The README lists a couple of open ideas for the future, including more components inspired by Pictochat and other DS features, so the project is still actively being expanded. This is aimed at web developers and designers who want a quick, distinctive retro look for a personal site, game jam entry, or fun project without building a custom design system themselves.

Yoink these prompts

Prompt 1
Show me how to add ds.css from unpkg to my HTML page and style a button with it.
Prompt 2
Help me use the scoped version of ds.css so only one section of my page gets the DS look.
Prompt 3
Walk me through adding the ds-calendar web component to a plain HTML page.
Prompt 4
Explain how to import a ds.css widget like ds-calendar into a Svelte component.
Prompt 5
Suggest some fun page ideas that would look good with this DS styled CSS framework.

Frequently asked questions

wtf is ds.css?

A CSS framework and set of web component widgets that give any web page the retro look of the Nintendo DS and DS Lite user interface.

What language is ds.css written in?

Mainly CSS. The stack also includes CSS, JavaScript, Web Components.

What license does ds.css use?

The README does not state a license for this project.

How hard is ds.css to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is ds.css for?

Mainly designer.

View the repo → Decode another repo

This repo across BitVibe Labs

Don't trust strangers blindly. Verify against the repo.