TheSims.css
TheSims.css
A “Design System” inspired by the 2000 life simulation game,<br>The Sims. For the full nostalgia effect, open<br>this video<br>in another tab. All source code is available on<br>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<br>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<br>div class="field-row"><br>label for="input-text-1">Enter Last Name:label><br>input type="text" id="input-text-1" name="input-text-1" /><br>div>
Textarea
BIO
Show code<br>label for="input-textarea-1" class="block">BIOlabel><br>textarea<br>type="text"<br>id="input-textarea-1"<br>name="input-textarea-1"<br>cols="40"<br>rows="6"<br>>textarea>
Button
Buttons in The Sims come in all shapes and sizes, most of which<br>are not reproduced in this library. For now, there are two<br>types: rectangular (the default) and skewed.
OK
Show code<br>button type="button">OKbutton>
Skewed
Add the class skew to give a button a skewed<br>appearance.
OK
Show code<br>button type="button" class="skew">OKbutton>
Button group
Group multiple buttons together using the<br>button-group class.
Take Job<br>Look Again<br>End Search
Show code<br>div class="button-group"><br>button type="button" class="skew">Take Jobbutton><br>button type="button" class="skew">Look Againbutton><br>button type="button" class="skew">End Searchbutton><br>div>
Radio
Yes
No
Show code<br>div class="field-row"><br>input type="radio" id="radio-1" name="first-example" /><br>label for="radio-1">Yeslabel><br>div><br>div class="field-row"><br>input type="radio" id="radio-2" name="first-example" /><br>label for="radio-2">Nolabel><br>div>
Checkbox
This is a checkbox
Show code<br>div class="field-row"><br>input type="checkbox" id="checkbox-1" name="checkbox-1" /><br>label for="checkbox-1">This is a checkboxlabel><br>div>
Slider
Sliders can be rendered by specifying a range type<br>on an input element.
Music
Show code<br>div class="field-row"><br>label for="range1">Musiclabel><br>input<br>id="range1"<br>type="range"<br>min="1"<br>max="11"<br>value="5"<br>style="width: 128px"<br>/><br>div>
Modal
Create a modal by adding the class modal to an<br>element. Modals usually consist of an image, a heading, some<br>text and one or more actions.
Did you know?
Experienced players will find the keyboard shortcuts for<br>speed control handy
` = Pause
1 = Normal
2 = Faster
3 = Fastest
OK
Show code<br>div class="modal"><br>img<br>src="speed-controls.png"<br>alt="Speed controls: pause symbol, single right pointing arrow, double right pointing arrow, and triple right pointing arrow."<br>/><br>h2>Did you know?h2><br>p><br>Experienced players will find the keyboard shortcuts for<br>speed control handy br /><br>` = Pause br /><br>1 = Normal br /><br>2 = Faster br /><br>3 = Fastest<br>p><br>div class="button-group"><br>button type="button" class="skew">OKbutton><br>div><br>div>
Acknowledgements
The code is adapted from<br>98.css by Jordan<br>Scales.
This library uses<br>ComicNeue a fallback for<br>devices which do not ship with Comic Sans. The monospace font is<br>Comic Mono<br>by Shannon Miwa and dtinth.