TheSims.css

A “Design System” inspired by the 2000 life simulation game, The Sims. For the full nostalgia effect, open this video in another tab. All source code is available on GitHub.

Features:

If you’re using Semantic HTML it ‘just works’*
Dark mode by default
Uses Comic Sans, the world’s most reassuring font
Buttons that look like buttons
Great for your Sims fansite

*component variants, grouping elements and modals require extra classes

Installation / usage

You can load TheSims.css directly from unpkg and include it in the head of your HTML:

<link rel="stylesheet" href="https://unpkg.com/thesims.css">

or install it as an npm package:

npm install thesims.css

Text Input

Enter Last Name:

Show code

<div class="field-row">
    <label for="input-text-1">Enter Last Name:</label>
    <input type="text" id="input-text-1" name="input-text-1" />
</div>

Textarea

BIO

Show code

<label for="input-textarea-1" class="block">BIO</label>
<textarea
    type="text"
    id="input-textarea-1"
    name="input-textarea-1"
    cols="40"
    rows="6"
></textarea>

Button

Buttons in The Sims come in all shapes and sizes, most of which are not reproduced in this library. For now, there are two types: rectangular (the default) and skewed.

Show code

<button type="button">OK</button>

Skewed

Add the class skew to give a button a skewed appearance.

Show code

<button type="button" class="skew">OK</button>

Button group

Group multiple buttons together using the button-group class.

Show code

<div class="button-group">
    <button type="button" class="skew">Take Job</button>
    <button type="button" class="skew">Look Again</button>
    <button type="button" class="skew">End Search</button>
</div>

Radio

Yes

Show code

<div class="field-row">
    <input type="radio" id="radio-1" name="first-example" />
    <label for="radio-1">Yes</label>
</div>
<div class="field-row">
    <input type="radio" id="radio-2" name="first-example" />
    <label for="radio-2">No</label>
</div>

Checkbox

This is a checkbox

Show code

<div class="field-row">
    <input type="checkbox" id="checkbox-1" name="checkbox-1" />
    <label for="checkbox-1">This is a checkbox</label>
</div>

Slider

Sliders can be rendered by specifying a range type on an input element.

Music

Show code

<div class="field-row">
    <label for="range1">Music</label>
    <input
        id="range1"
        type="range"
        min="1"
        max="11"
        value="5"
        style="width: 128px"
    />
</div>

Create a modal by adding the class modal to an element. Modals usually consist of an image, a heading, some text and one or more actions.

Show code

<div class="modal">
    <img
        src="speed-controls.png"
        alt="Speed controls: pause symbol, single right pointing arrow, double right pointing arrow, and triple right pointing arrow."
    />
    <h2>Did you know?</h2>
    <p>
        Experienced players will find the keyboard shortcuts for
        speed control handy <br />
        ` = Pause <br />
        1 = Normal <br />
        2 = Faster <br />
        3 = Fastest
    </p>
    <div class="button-group">
        <button type="button" class="skew">OK</button>
    </div>
</div>

Acknowledgements

The code is adapted from 98.css by Jordan Scales.

This library uses ComicNeue a fallback for devices which do not ship with Comic Sans. The monospace font is Comic Mono by Shannon Miwa and dtinth.