spiritov
ds.css is a css framework and love letter to the DS / DS Lite's firmware.
Installation
Please see the GitHub's readme to get started!
ds.css uses a mix of semantic html and class names for its styling. For example, a button can be created with <button>, but a wider button needs class='button-lg' applied.
Buttons
Colors
16 theme colors are available for coloring some components with class names. You can click on the colors below to preview how components on this page will look with them.
Note
For other uses, their respective css variables are available, too.
(--color-ds-slate)
class name ds-slate
ds-slate-50
Grid Sizing
2 css variables are available to help set grid sizes and to align components in them.
Accordion
Accordion headers can be colored.
End Credits

So let's run
Make a great escape
And I'll be waiting outside for the getaway

Alert
Alerts can be paired with a loading animation (which could also be used on its own)!
Looking for software available for download...
Bars
Bars should be given a width.
Buttons
Buttons have 3 widths.
Radio Buttons
Radio buttons require a color on each <input> to appear selected.
Note
Bring your own container for the <fieldset>! This example uses a grid for its layout.
Select an option
Grids
Grids should be given a width and height (if they have nothing in them).
Info Box
image
Settings
Change system settings here. Select the setting you'd like to change.
Input
Bumpers are available to go before or after inputs.
Pictochat
2 highlight classes are available to highlight text.
Note
ds-slate-50 versions of colors may fit better with pictochat headers.
Now joining..
satellites
cause the feelings come and go like flashing lights, but you never leave my satellite
Now leaving..
Calendar
The calendar is imported separately as a JavaScript module.
Note
The calendar can be colored with a style attribute, and can have its outline hidden with border-hidden.
Clock
The clock is imported separately as a JavaScript module.
Note
The clock can be colored with a style attribute, and can have its outline hidden with border-hidden.