7.CSS - A 90s Tribute!
A design system for building faithful recreations of old UIs.
A design system for building faithful recreations of old UIs.
7.css is a CSS framework for building interface components that look like Windows 7. It is built on top of the GUI backbone of XP.css, which is an extension of 98.css.
My First Program
Hello, world!
OK Cancel
This framework relies on the usage of semantic HTML. To make a button, you'll need to use a <button>. Input elements require labels. Tabs rely on the role="tab" attribute. This page will guide you through that process, but accessibility is a primary goal of this project.
You can override many of the styles of your elements while maintaining the appearance provided by this framework. Need more padding on your buttons? Go for it. Need to add some color to your input labels? Be our guest.
This framework does not contain any JavaScript, it merely styles your HTML with some CSS. This means 7.css is compatible with your frontend framework of choice.
The fastest way to use 7.css is to import it from unpkg.
<link rel="stylesheet" href="https://unpkg.com/7.css">
You can also install 7.css from npm.
Installation
npm install 7.css
Usage
import "7.css/dist/7.css";
Scoping
In case you need 7.css to coexist with another CSS/styling framework, you may use the 7.scoped.css stylesheet instead to scope the styling within a .win7 class.
unpkg:
https://unpkg.com/7.css/dist/7.scoped.cssor npm:
import "7.css/dist/7.scoped.css"
Then in your code, wrap the component with .win7:
<div class="win7"><button>A Win7-styled button</button></div>
Also note that using the scoped stylesheet will eliminate the scrollbar styling as well.
Tree-shaking
In case you only need the styling of certain components rather than the complete stylesheet as a whole, you may import them separately as below:
unpkg:
https://unpkg.com/7.css/dist/gui/buttons.css https://unpkg.com/7.css/dist/gui/tabs.cssor npm:
import "7.css/dist/gui/buttons.css"
import "7.css/dist/gui/tabs.css"
For more components, see the published gui folder.
A balloon is a small pop-up window that informs users of a non-critical problem or special condition in a control. —Microsoft Windows User Experience - Balloons
A balloon or tooltip can be created using the role="tooltip" attribute. A balloon is better known as tooltip in web development.
<div role="tooltip">A balloon is better known as tooltip in web development.</div>
A control may bind to a balloon with the aria-describedby attribute. You will need to set up an event for the control to trigger the balloon.
Press Backspace to dismiss
<input type="text" placeholder="Press Enter" aria-describedby="balloon-password"/>
<div role="tooltip" id="balloon-password" hidden>Press Backspace to dismiss</div>
To change the position of the balloon, which subsequently change the placement of its tail, combine the respective vertical and horizontal classes:
Vertical: .is-top / .is-bottom Horizontal: .is-left / .is-right
This balloon is positioned bottom right of the source control (default behavior). This balloon is positioned bottom left of the source control. This balloon is positioned top left of the source control. This balloon is positioned top right of the source control.
<div role="tooltip">This balloon is positioned bottom right of the source control (default behavior).</div>
<div role="tooltip" class="is-bottom is-left">This balloon is positioned bottom left of the source control.</div>
<div role="tooltip" class="is-top is-left">This balloon is positioned top left of the source control.</div>
<div role="tooltip" class="is-top is-right">This balloon is positioned top right of the source control.</div>
A command button, also referred to as a push button, is a control that causes the application to perform some action when the user clicks it.— Microsoft Windows User Experience p. 160
A standard button measures 75px wide and 23px tall with 12px of horizontal padding by default. They are styled with 2 shades of gray as a vertical gradient.
<button>Click me</button>
When buttons are clicked, the gray gradient is shifted to corresponding sky blues. The following button is simulated to be in the pressed (active) state.
<button>I am being pressed</button>
Disabled buttons have solid background and lighter border.
<button disabled>I cannot be clicked</button>
Button focus is communicated with a dotted border, set 4px within the contents of the button. The following example is simulated to be focused.
<button>I am focused</button>
A default button (in Windows, hitting the Enter key in a dialog context triggers the button) has a greenish-blue border and a light blue gradient shade.
<button class="default">I am the one!</button>
A check box represents an independent or non-exclusive choice.— Microsoft Windows User Experience p. 167 Checkboxes are represented with a sunken panel, populated with a "check" icon when selected, next to a label indicating the choice.
Note: You must include a corresponding label after your checkbox, using the <label> element with a for attribute pointed at the id of your input. This ensures the checkbox is easy to use with assistive technologies, on top of ensuring a good user experience for all (navigating with the tab key, being able to click the entire label to select the box).
<input type="checkbox" id="example1">
<label for="example1">This is a checkbox</label>
Checkboxes can be selected and disabled with the standard checked and disabled attributes. When grouping inputs, wrap each input in a container with the field-row class. This ensures a consistent spacing between inputs.
<div class="field-row">
<input checked type="checkbox" id="example2">
<label for="example2">I am checked</label>
</div>
<div class="field-row">
<input disabled type="checkbox" id="example3">
<label for="example3">I am inactive</label>
</div>
<div class="field-row">
<input checked disabled type="checkbox" id="example4">
<label for="example4">I am inactive but still checked</label>
</div>
Users can show or hide additional information including data, options, or commands.—Microsoft Windows User Experience - Progressive Disclosure A collapsible section can be created using the elements details and summary.
<details>
<summary>Expand me to see something interesting</summary>
<p>🎉 Tadah!</p>
</details>
Add an open attribute to expand the content by default.
<details open>
<summary>I open myself willingly</summary>
<ul>
<li>This is my family</li>
<li>This is my house</li>
<li>This is my car</li>
</ul>
</details>
A combo box is a combination of a standard list box or a drop-down list and an editable text box, thus allowing users to enter a value that isn't in the list.—Microsoft Windows User Experience - Combo Boxes
To render a combo box, use a text input, a button, a parent ul, and children li together, wrapped inside a container element with the combobox class. For accessibility, follow the minimum requirements as below: Add a role="combobox" attribute to the text input Add a role="listbox" attribute to the ul Add a role="option" attribute to each li Specify the relationship between the list box and the text box by combining the id of the listbox with the aria-owns attribute on the text input
<div class="combobox">
<input type="text" role="combobox" aria-owns="company"/>
<button></button>
<ul role="listbox" id="company">
<li role="option">Facebook</li>
<li role="option">Amazon</li>
<li role="option">Apple</li>
<li role="option">Netflix</li>
<li role="option">Google</li>
</ul>
</div>
For more options of the list box, see the ListBox section.
A drop-down list box allows the selection of only a single item from a list. In its closed state, the control displays the current value for the control. The user opens the list to change the value.— Microsoft Windows User Experience p. 175 Dropdowns can be rendered by using the select and option elements.
<select>
<option>5 - Incredible!</option>
<option>4 - Great!</option>
<option>3 - Pretty good</option>
<option>2 - Not so great</option>
<option>1 - Unfortunate</option>
</select>
By default, the first option will be selected. You can change this by giving one of your option elements the selected attribute.
<select>
<option>5 - Incredible!</option>
<option selected>3 - Pretty good</option>
<option>2 - Not so great</option>
<option>1 - Unfortunate</option>
</select>
A group box is a special control you can use to organize a set of controls. A group box is a rectangular frame with an optional label that surrounds a set of controls.— Microsoft Windows User Experience p. 189 A group box can be used by wrapping your elements with the fieldset tag. It contains a sunken outer border and a raised inner border, resembling an engraved box around your controls.
<fieldset>
<div class="field-row">Select one:</div>
<div class="field-row">
<input id="radio5" type="radio" name="fieldset-example">
<label for="radio5">Diners</label>
</div>
<div class="field-row">
<input id="radio6" type="radio" name="fieldset-example">
<label for="radio6">Drive-Ins</label>
</div>
<div class="field-row">
<input id="radio7" type="radio" name="fieldset-example">
<label for="radio7">Dives</label>
</div>
</fieldset>
You can provide your group with a label by placing a legend element within the fieldset.
<fieldset>
<legend>Today's mood</legend>
<div class="field-row">
<input id="radio8" type="radio" name="fieldset-example2">
<label for="radio8">Claire Saffitz</label>
</div>
<div class="field-row">
<input id="radio9" type="radio" name="fieldset-example2">
<label for="radio9">Brad Leone</label>
</div>
<div class="field-row">
<input id="radio10" type="radio" name="fieldset-example2">
<label for="radio10">Chris Morocco</label>
</div>
<div class="field-row">
<input id="radio11" type="radio" name="fieldset-example2">
<label for="radio11">Carla Lalli Music</label>
</div>
</fieldset>
With a list box, users can select from a set of values presented in a list that is always visible.—Microsoft Windows User Experience - List Boxes
There are 2 ways you can render a list box. The simple one is using the select element with a multiple attribute specified.
<select multiple>
<option>5 - Incredible!</option>
<option selected>4 - Great!</option>
<option>3 - Pretty good</option>
<option>2 - Not so great</option>
<option>1 - Unfortunate</option>
</select>
The complex one is using a combination of the ul/li elements with the role attributes.
<ul role="listbox">
<li role="option">Facebook</li>
<li role="option" aria-selected="true">Amazon</li>
<li role="option">Apple</li>
<li role="option">Netflix</li>
<li role="option">Google</li>
</ul>
The latter offers more flexibility over using a mere select element. Choose the one that is more appropriate depending on your context or use case.
To add a drop shadow to the list box, use the has-shadow class. To add a hovering style on the list box items (using role attribute only), use the has-hover class.
<ul role="listbox" class="has-shadow has-hover">
<li role="option">Facebook</li>
<li role="option">Amazon</li>
<li role="option">Apple</li>
<li role="option">Netflix</li>
<li role="option">Google</li>
</ul>
With a list view, users can view and interact with a collection of data objects, using either single selection or multiple selection.—Microsoft Windows User Experience - List View Currently, the ListView is only implemented as the Details view, which styles tables.
<table>
<thead>
<tr>
<th>Name</th><th>Date Taken</th><th class="highlighted indicator">Tags</th><th>Size</th><th>Rating</th>
</tr>
</thead>
<tbody>
<tr><td>Toco Toucan</td><td>6/24/2005 12:22 PM</td><td>Sample; Wildlife</td><td>113 KB</td><td>* * * * *</td></tr>
<tr class="highlighted"><td>Dock</td><td>6/22/2005 8:17 PM</td><td>Sample; Ocean</td><td>310 KB</td><td>* * * * *</td></tr>
<tr><td>Autumn Leaves</td><td>11/4/2005 6:12 PM</td><td>Sample; Landscape</td><td>270 KB</td><td>* * * * *</td></tr>
</tbody>
</table>
Here's another example showcasing advanced usage, for example:
The handling of long text (using the width property of the table to limit the width) Using the has-shadow class to add a shadow to the table Flipping the column header sort indicator by adding the up class Changing text alignment using the text-align property The highlighted column header style without sort indicator (I didn't want to add another table just for that)
<table class="has-shadow" style="width: 460px">
<thead>
<tr>
<th>Name</th><th>Original Location</th><th class="highlighted">Date deleted</th><th>Size</th><th class="highlighted indicator up">Type</th>
</tr>
</thead>
<tbody>
<tr><td>contents_files</td><td>D:\Users\user\Documents\contents_files</td><td>3/29/2007 12:00 AM</td><td style="text-align: right">4 KB</td><td>File Folder</td></tr>
<tr><td>Windows Vista User Experience Guidelines</td><td>D:\Users\user\Documents\Windows Vista User Experience Guidelines</td><td>3/29/2007 12:00 AM</td><td style="text-align: right">0 KB</td><td>File Folder</td></tr>
<tr><td>AutoRecovery save of Document.asd</td><td>D:\Users\user\Documents\AutoRecovery save of Document.asd</td><td>3/23/2007 12:00 AM</td><td style="text-align: right">27 KB</td><td>ASD File</td></tr>
<tr><td>AutoRecovery save of Tree Views.asd</td><td>D:\Users\user\Documents\AutoRecovery save of Tree Views.asd</td><td>3/13/2007 12:00 AM</td><td style="text-align: right">693 KB</td><td>ASD File</td></tr>
<tr><td>contents</td><td>D:\Users\user\Documents\contents</td><td>3/29/2007 12:00 AM</td><td style="text-align: right">2 KB</td><td>HTML Document</td></tr>
</tbody>
</table>
The following components compose a complete navigation menu, also known as Navbar. Menu Menus are hierarchical lists of commands or options available to users in the current context.—Microsoft Windows User Experience - Menus A menu can be rendered using a composition of a parent ul and child items li, role="menu" and role="menuitem" attributes must be specified on the ul and li respectively. If a menu item has a submenu, add an aria-haspopup="true" attribute to it to render a caret indicator. To make the menu focusable, specify the tabindex attributes on the items. Alternatively, you can use an a to achieve the same.
<ul role="menu" style="width: 200px">
<li role="menuitem" tabindex="0" aria-haspopup="true">View</li>
<li role="menuitem" tabindex="0" aria-haspopup="true">Sort by<ul role="menu">
<li role="menuitem"><a href="#menu">Name</a></li>
<li role="menuitem"><a href="#menu">Size</a></li>
<li role="menuitem"><a href="#menu">Item type</a></li>
<li role="menuitem"><a href="#menu">Date modified</a></li>
</ul></li>
<li role="menuitem"><a href="#menu">Refresh</a></li>
<li role="menuitem"><a href="#menu">Paste</a></li>
<li role="menuitem"><a href="#menu">Paste shortcut</a></li>
<li role="menuitem"><a href="#menu">Screen resolution</a></li>
<li role="menuitem"><a href="#menu">Gadgets</a></li>
<li role="menuitem"><a href="#menu">Personalize</a></li>
</ul>
By default, the submenu is only shown when the linked item is focused/clicked. To add the hovering/mouse-over trigger, you can add a can-hover class to the root container. Use a has-divider class to make a horizontal line after the menu item. Disable a menu item by placing an aria-disabled attribute on it. You may associate a menu item with an icon by using the img element. (Icons provided by Icons8)
<
Generate your own 90s page here!