Space Cadet is a CSS library for developing nostolgic websites that mimic the visual presentation of older versions of the Windows operating system. This project is meant to serve as an easy way for web developers to use modern web technologies to build web interfaces that resemble the styles of computers during the late 90's. This project is very much a work in progress, which you can follow at the github page.
<!-- Small buttons -->
<a class="button-small">button-small</a>
<a class="button-small disabled">button-small</a>
<!-- Regular buttons -->
<a class="button">button</a>
<a class="button disabled">button</a>
<!-- Large buttons -->
<a class="button-large">button</a>
<a class="button-large disabled">button</a>
button-small button-small button button button-large button-large
Buttons can be disabled using the .disabled class, or the disabled attribute:
<a class="button disabled">button</a>
<a disabled class="button">button</a>
These both render the same thing:
button button
<div class="well">
<div style="padding:10px;">
This is a well!
</div>
</div>
<div class="well-inverse">
<div style="padding:10px;">
This is an inverse well!
</div>
</div>
This will render:
<div class="well-inverse">
<div id="demo-title" class="title">
<span>Title</span>
<div class="controls">
<a class="control-button">_</a>
<a class="control-button">X</a>
</div>
</div>
<div style="padding:10px;">
<!-- Content here -->
</div>
</div>
You can add a title bar to any well to make it look like a window! Use these buttons to see different kinds of titles.
Toggle Fancy Toggle FocusGroups are an alternate way to group controls and information together on a page/form. Note that because of the way groups render background color and titles, they're best used inside of a well or element with the same background color as a well. This may change in the future...
<div style="padding:10px;">
<div data-group-title="This is a group" class="group">
<h3>Groups are great!</h3>
</div>
</div>
This will render the following:
The data-group-title attribute denotes the title of the group that appears in the top left corner.
At the moment, only text inputs are supported. Apply the .input-text class to any text input and you will render the following: