https://khang-nd.github.io/7.css/

X logo Share Facebook logo Share LinkedIn logo Share GitHub logo Fork

  * Intro
  * Installation
      + Scoping
      + Tree-shaking
  * Components
      + Balloon
      + Button
      + CheckBox
      + Collapse
      + ComboBox
      + Dropdown
      + GroupBox
      + ListBox
      + ListView (table)
      + Navigation
          o Menu
          o MenuBar
      + OptionButton
      + ProgressBar
      + Scrollbar
      + SearchBox
      + Slider
      + Spinner
      + Tabs
      + TextBox
      + TreeView
      + Window
          o Title Bar
          o Window body
          o Status Bar
          o Glass frame & Color
          o Dialog Box
  * Issues, Contributing, etc.

7.css

---------------------------------------------------------------------

A design system for building faithful recreations of old UIs.

npm npm bundle size

Intro

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.

Installation / Usage

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.css

or npm:

import "7.css/dist/7.scoped.css"

Then in your code, wrap the component with .win7:

A Win7-styled button
Show code

<div class="win7">
  <button>A Win7-styled button</button>
</div>

Copy Code

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.css

or npm:

import "7.css/dist/gui/buttons.css"
import "7.css/dist/gui/tabs.css"

For more components, see the published gui folder.

Components

Balloon

    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.
Show code

<div role="tooltip">A balloon is better known as tooltip in web development.</div>

Copy Code

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
Show code

<input type="text" placeholder="Press Enter" aria-describedby="balloon-password" />
<div role="tooltip" id="balloon-password" hidden>Press Backspace to dismiss</div>

Copy Code

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.
Show code

<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>

Copy Code

Button

    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.

Click me
Show code

<button>Click me</button>

Copy Code

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.

I am being pressed
Show code

<button>I am being pressed</button>

Copy Code

Disabled buttons have solid background and lighter border.

I cannot be clicked
Show code

<button disabled>I cannot be clicked</button>

Copy Code

Button focus is communicated with a dotted border, set 4px within the
contents of the button. The following example is simulated to be
focused.

I am focused
Show code

<button>I am focused</button>

Copy Code

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.

I am the one!
Show code

<button class="default">I am the one!</button>

Copy Code

The button styles are also applied to the file input element. Due to
the complex setup, the styles of the standard button's states (hover,
active, focus etc.) cannot be applied to the file input button.

[                    ]
Show code

<input type="file" />

Copy Code

You can use the below workaround to apply the complete button styles
to a file input element. In this setup, the file input is hidden and
a label with the role="button" attribute is used to trigger the file
selection dialog. The tabindex="0" attribute ensures the button is
keyboard accessible. Some JavaScript is required if you want the
label to trigger when it is focused and activated with the keyboard.

[                    ] Choose file [                    ] Browse...
Show code

<label role="button" tabindex="0"><input type="file" /> Choose file</label>
<label role="button" tabindex="0" class="default"><input type="file" /> Browse...</label>

Copy Code

CheckBox

    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).

[ ] This is a checkbox
Show code

<input type="checkbox" id="example1">
<label for="example1">This is a checkbox</label>

Copy Code

Checkboxes can be selected and disabled with the standard checked and
disabled attributes.

[*] I am checked
[ ] I am inactive
[*] I am inactive but still checked
Show code

<div class="group">
  <div>
    <input checked type="checkbox" id="example2">
    <label for="example2">I am checked</label>
  </div>
  <div>
    <input disabled type="checkbox" id="example3">
    <label for="example3">I am inactive</label>
  </div>
  <div>
    <input checked disabled type="checkbox" id="example4">
    <label for="example4">I am inactive but still checked</label>
  </div>
</div>

Copy Code

Collapse

    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.

Expand me to see something interesting

 Tadah!

Show code

<details>
  <summary>Expand me to see something interesting</summary>
  <p> Tadah!</p>
</details>

Copy Code

Add an open attribute to expand the content by default.

I open myself willingly

  * This is my family
  * This is my house
  * This is my car

Show code

<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>

Copy Code

Combobox

    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

[                    ]

  * Facebook
  * Amazon
  * Apple
  * Netflix
  * Google

Show code

<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>

Copy Code

For more options of the list box, see the ListBox section.

Dropdown

    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.

[5 - Incredible! ]
Show code

<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>

Copy Code

By default, the first option will be selected. You can change this by
giving one of your option elements the selected attribute.

[3 - Pretty good ]
Show code

<select>
  <option>5 - Incredible!</option>
  <option>4 - Great!</option>
  <option selected>3 - Pretty good</option>
  <option>2 - Not so great</option>
  <option>1 - Unfortunate</option>
</select>

Copy Code

Disabled dropdown.

[0 - Dropdown disabled]
Show code

<select disabled>
  <option>0 - Dropdown disabled</option>
</select>

Copy Code

GroupBox

    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.

Select one:
( ) Diners
( ) Drive-Ins
( ) Dives
Show code

<fieldset>
  <div>Select one:</div>
  <div>
    <input id="radio5" type="radio" name="fieldset-example">
    <label for="radio5">Diners</label>
  </div>
  <div>
    <input id="radio6" type="radio" name="fieldset-example">
    <label for="radio6">Drive-Ins</label>
  </div>
  <div>
    <input id="radio7" type="radio" name="fieldset-example">
    <label for="radio7">Dives</label>
  </div>
</fieldset>

Copy Code

You can provide your group with a label by placing a legend element
within the fieldset.

Today's mood
( ) Claire Saffitz
( ) Brad Leone
( ) Chris Morocco
( ) Carla Lalli Music
Show code

<fieldset>
  <legend>Today's mood</legend>
  <div>
    <input id="radio8" type="radio" name="fieldset-example2">
    <label for="radio8">Claire Saffitz</label>
  </div>
  <div>
    <input id="radio9" type="radio" name="fieldset-example2">
    <label for="radio9">Brad Leone</label>
  </div>
  <div>
    <input id="radio10" type="radio" name="fieldset-example2">
    <label for="radio10">Chris Morocco</label>
  </div>
  <div>
    <input id="radio11" type="radio" name="fieldset-example2">
    <label for="radio11">Carla Lalli Music</label>
  </div>
</fieldset>

Copy Code

There is a handy group utility class provided out of the box which
can be used to group elements without the need for a fieldset, and
ensure a consistent spacing between them.

[*] I am checked
[ ] I am inactive
[*] I am inactive but still checked
Show code

<div class="group">
  <div>
    <input checked type="checkbox" id="example12">
    <label for="example12">I am checked</label>
  </div>
  <div>
    <input disabled type="checkbox" id="example13">
    <label for="example13">I am inactive</label>
  </div>
  <div>
    <input checked disabled type="checkbox" id="example14">
    <label for="example14">I am inactive but still checked</label>
  </div>
</div>

Copy Code

ListBox

    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.


[ ]5 - Incredible!
[*]4 - Great!
[ ]3 - Pretty good
[ ]2 - Not so great
[ ]1 - Unfortunate
Show code

<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>

Copy Code

The complex one is using a combination of the ul/li elements with the
role attributes.

  * Facebook
  * Amazon
  * Apple
  * Netflix
  * Google

Show code

<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>

Copy Code

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.

  * Facebook
  * Amazon
  * Apple
  * Netflix
  * Google

Show code

<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>

Copy Code

ListView (table)

    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.

    Name          Date Taken           Tags         Size   Rating
Toco Toucan   6/24/2005 12:22 PM Sample; Wildlife  113 KB * * * * *
Dock          6/22/2005 8:17 PM  Sample; Ocean     310 KB * * * * *
Autumn Leaves 11/4/2005 6:12 PM  Sample; Landscape 270 KB * * * * *

Show code

<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>

Copy Code

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)

      Name             Original Location         Date   Size   Type
                                               deleted
                  D:\Users\user\Documents\     3/29/         File
contents_files    contents_files               2007     4 KB Folder
                                               12:00 AM
Windows Vista     D:\Users\user\Documents\     3/29/         File
User Experience   Windows Vista User           2007     0 KB Folder
Guidelines        Experience Guidelines        12:00 AM
AutoRecovery save D:\Users\user\Documents\     3/23/    27
of Document.asd   AutoRecovery save of         2007     KB   ASD File
                  Document.asd                 12:00 AM
AutoRecovery save D:\Users\user\Documents\     3/13/    693
of Tree Views.asd AutoRecovery save of Tree    2007     KB   ASD File
                  Views.asd                    12:00 AM
                  D:\Users\user\Documents\     3/29/         HTML
contents          contents                     2007     2 KB Document
                                               12:00 AM

Show code

<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>

Copy Code

Navigation

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.

  * View
  * Sort by
      + Name
      + Size
      + Item type
      + Date modified
  * Refresh
  * Paste
  * Paste shortcut
  * Screen resolution
  * Gadgets
  * Personalize

Show code

<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>

Copy Code

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)

  * View
  * Sort by
      + Name
      + Size
      + Item type
      + Date modified
  * Refresh
  * Paste
  * Paste shortcut
  * [monitor--v] Screen resolution
  * [virtual-ma] Gadgets
  * [remote-des] Personalize

Show code

<ul role="menu" class="can-hover" 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" class="has-divider"><a href="#menu">Refresh</a></li>
  <li role="menuitem" aria-disabled="true"><a href="#menu">Paste</a></li>
  <li role="menuitem" aria-disabled="true" class="has-divider">
    <a href="#menu">Paste shortcut</a>
  </li>
  <li role="menuitem">
    <img src="https://img.icons8.com/color/18/000000/monitor--v1.png"/>
    <a href="#menu">Screen resolution</a>
  </li>
  <li role="menuitem">
    <img src="https://img.icons8.com/color/18/000000/virtual-machine2.png"/>
    <a href="#menu">Gadgets</a>
  </li>
  <li role="menuitem">
    <img src="https://img.icons8.com/color/18/000000/remote-desktop.png"/>
    <a href="#menu">Personalize</a>
  </li>
</ul>

Copy Code

To render menu items that are options with bullets and checkmarks,
use the corresponding input type (radio or checkbox).

  * ( ) Large icons
  * (*) Medium icons
  * ( ) Small icons
  * [ ] Auto arrange icons
  * [*] Align icons to grid

Show code

<ul role="menu" style="width: 200px">
  <li role="menuitem">
    <input type="radio" name="icon-size" id="example15">
    <label for="example15">Large icons</label>
  </li>
  <li role="menuitem">
    <input type="radio" name="icon-size" id="example16" checked>
    <label for="example16">Medium icons</label>
  </li>
  <li role="menuitem" class="has-divider">
    <input type="radio" name="icon-size" id="example17">
    <label for="example17">Small icons</label>
  </li>
  <li role="menuitem">
    <input type="checkbox" id="example18">
    <label for="example18">Auto arrange icons</label>
  </li>
  <li role="menuitem">
    <input type="checkbox" id="example19" checked>
    <label for="example19">Align icons to grid</label>
  </li>
</ul>

Copy Code

MenuBar

    A menu bar is a list of labeled menu categories typically located
    near the top of a window. -- Microsoft Windows User Experience -
    Menus

A menu bar can be created in a similar manner to the menu, however,
use a role="menubar" attribute in place of role="menu".

  * File
  * Edit
  * View
  * Help

Show code

<ul role="menubar">
  <li role="menuitem" tabindex="0">File</li>
  <li role="menuitem" tabindex="0">Edit</li>
  <li role="menuitem" tabindex="0">View</li>
  <li role="menuitem" tabindex="0">Help</li>
</ul>

Copy Code

Combining it with the Menu component, we will have a complete menu
bar with the associated menu dropdowns.

To accommodate an extra piece of info for a menu item (like a
shortcut mnemonic) on the right side, nest it with an span element.

  * File
      + Open Ctrl+O
      + Save Ctrl+S
      + Save As... Ctrl+Shift+S
      + Exit
  * Edit
      + Undo
      + Copy
      + Cut
      + Paste
      + Delete
      + Find...
      + Replace...
      + Go to...
  * View
      + Zoom
          o Zoom In
          o Zoom Out
      + Status Bar
  * Help
      + View Help
      + About

Show code

<ul role="menubar" class="can-hover">
  <li role="menuitem" tabindex="0" aria-haspopup="true">
    File
    <ul role="menu">
      <li role="menuitem">
        <a href="#menubar">
          Open <span>Ctrl+O</span>
        </a>
      </li>
      <li role="menuitem">
        <a href="#menubar">
          Save <span>Ctrl+S</span>
        </a>
      </li>
      <li role="menuitem" class="has-divider">
        <a href="#menubar">
          Save As... <span>Ctrl+Shift+S</span>
        </a>
      </li>
      <li role="menuitem"><a href="#menubar">Exit</a></li>
    </ul>
  </li>
  <li role="menuitem" tabindex="0" aria-haspopup="true">
    Edit
    <ul role="menu">
      <li role="menuitem"><a href="#menubar">Undo</a></li>
      <li role="menuitem"><a href="#menubar">Copy</a></li>
      <li role="menuitem"><a href="#menubar">Cut</a></li>
      <li role="menuitem" class="has-divider"><a href="#menubar">Paste</a></li>
      <li role="menuitem"><a href="#menubar">Delete</a></li>
      <li role="menuitem"><a href="#menubar">Find...</a></li>
      <li role="menuitem"><a href="#menubar">Replace...</a></li>
      <li role="menuitem"><a href="#menubar">Go to...</a></li>
    </ul>
  </li>
  <li role="menuitem" tabindex="0" aria-haspopup="true">
    View
    <ul role="menu">
      <li role="menuitem" tabindex="0" aria-haspopup="true">
        Zoom
        <ul role="menu">
          <li role="menuitem"><button>Zoom In</button></li>
          <li role="menuitem"><button>Zoom Out</button></li>
        </ul>
      </li>
      <li role="menuitem"><a href="#menubar">Status Bar</a></li>
    </ul>
  </li>
  <li role="menuitem" tabindex="0" aria-haspopup="true">
    Help
    <ul role="menu">
      <li role="menuitem"><a href="#menubar">View Help</a></li>
      <li role="menuitem"><a href="#menubar">About</a></li>
    </ul>
  </li>
</ul>

Copy Code

OptionButton

    An option button, also referred to as a radio button, represents
    a single choice within a limited set of mutually exclusive
    choices. That is, the user can choose only one set of options. --
    Microsoft Windows User Experience p. 164

Option buttons can be used via the radio type on an input element.

Option buttons can be grouped by specifying a shared name attribute
on each input.

( ) Yes
( ) No
Show code

<div style="display: flex; flex-direction: column; gap: 6px">
  <div>
    <input id="radio20" type="radio" name="first-example">
    <label for="radio20">Yes</label>
  </div>
  <div>
    <input id="radio21" type="radio" name="first-example">
    <label for="radio21">No</label>
  </div>
</div>

Copy Code

Option buttons can also be checked and disabled with their
corresponding HTML attributes.

( ) Peanut butter should be smooth
(*) I understand why people like crunchy peanut butter
( ) Crunchy peanut butter is good
Show code

<div style="display: flex; flex-direction: column; gap: 6px">
  <div>
    <input id="radio22" type="radio" name="second-example">
    <label for="radio22">Peanut butter should be smooth</label>
  </div>
  <div>
    <input checked disabled id="radio23" type="radio" name="second-example">
    <label for="radio23">I understand why people like crunchy peanut butter</label>
  </div>
  <div>
    <input disabled id="radio24" type="radio" name="second-example">
    <label for="radio24">Crunchy peanut butter is good</label>
  </div>
</div>

Copy Code

ProgressBar

    A common control that displays the progress of a particular
    operation as a graphical bar. -- Microsoft Windows User Experience
    Glossary

Progress bars can be created with a div using role="progressbar", and
another nested div is required to make the inner bar.

Specify the width of the inner bar to indicate the progress.

For accessibility, you might want to specify the respective aria-*
attributes. Refer to MDN for more information.

Show code

<div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="80">
  <div style="width: 80%"></div>
</div>

Copy Code

To indicate the progress bar in paused state, add a paused class.

Show code

<div role="progressbar" class="paused">
  <div style="width: 50%"></div>
</div>

Copy Code

To indicate the progress bar in error state, add an error class.

Show code

<div role="progressbar" class="error">
  <div style="width: 30%"></div>
</div>

Copy Code

To animate the progress bar, add an animate class.

Show code

<div role="progressbar" class="animate">
  <div style="width: 60%"></div>
</div>

Copy Code

To create an indeterminate progress bar, add a marquee class and
remove the nested div.

Show code

<div role="progressbar" class="marquee"></div>

Copy Code

Scrollbar

    A control that allows users to scroll the content of a window,
    either vertically or horizontally. -- Microsoft Windows User
    Experience Glossary

To override the browser scrollbar's system styling for a particular
section, add a has-scrollbar class to the container element.

Note that this only works with WebKit-based browsers.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nibh
massa, viverra non velit vitae, scelerisque venenatis risus. Sed
posuere risus tellus, sit amet vehicula nunc venenatis ut. Nunc
convallis augue eget odio imperdiet, eu consequat massa fringilla
consectetur eleifend. Curabitur in egestas justo, vel fermentum ante.
Lorem ipsum dolor sit amet, consectetur elit. Cras ullamcorper non
nibh et placerat. Nullam ornare lectus eget consequat dignissim.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nibh
massa, viverra non velit vitae, scelerisque venenatis risus. Sed
posuere risus tellus, sit amet vehicula nunc venenatis ut. Nunc
convallis augue eget odio imperdiet, eu consequat massa fringilla
consectetur eleifend. Curabitur in egestas justo, vel fermentum ante.
Lorem ipsum dolor sit amet, consectetur elit. Cras ullamcorper non
nibh et placerat. Nullam ornare lectus eget consequat dignissim.
Show code

<div class="has-scrollbar" style="width: 300px; height: 150px; overflow: auto">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nibh massa, viverra non velit vitae,
  scelerisque venenatis risus. Sed posuere risus tellus, sit amet vehicula nunc venenatis ut.
  Nunc convallis augue eget odio imperdiet, eu consequat massa fringilla consectetur eleifend.
  Curabitur in egestas justo, vel fermentum ante. Lorem ipsum dolor sit amet, consectetur elit.
  Cras ullamcorper non nibh et placerat. Nullam ornare lectus eget consequat dignissim.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nibh massa, viverra non velit vitae,
  scelerisque venenatis risus. Sed posuere risus tellus, sit amet vehicula nunc venenatis ut.
  Nunc convallis augue eget odio imperdiet, eu consequat massa fringilla consectetur eleifend.
  Curabitur in egestas justo, vel fermentum ante. Lorem ipsum dolor sit amet, consectetur elit.
  Cras ullamcorper non nibh et placerat. Nullam ornare lectus eget consequat dignissim.
</div>

Copy Code

SearchBox

    With a Search box, users can quickly locate specific objects or
    text within a large set of data by filtering or highlighting
    matches. -- Microsoft Windows User Experience - Search Boxes

There are 2 variants of the search box available.

An instant search, where the results are displayed immediately as the
user types, can be rendered just by specifying a type="search"
attribute on an input element:

[                    ]
Show code

<input type="search" placeholder="Search" />

Copy Code

A regular search, where a search is performed when the user clicks
the search button, requires a search input and a button wrapped
inside a container a container element with the class searchbox.

[                    ]
Show code

<div class="searchbox">
  <input type="search" placeholder="Search" />
  <button aria-label="search"></button>
</div>

Copy Code

Slider

    A slider, sometimes called a trackbar control, consists of a bar
    that defines the extent or range of the adjustment and an
    indicator that shows the current value for the control... --
    Microsoft Windows User Experience p. 146

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

Volume: Low [5                   ] High
Show code

<div style="max-width: 300px; display: flex; align-items: center; gap: 0.5rem">
  <label>Volume:</label>
  <label>Low</label>
  <input type="range" min="1" max="11" value="5" />
  <label>High</label>
</div>

Copy Code

You can make use of the has-box-indicator class replace the default
indicator with a box indicator, furthermore the slider can be wrapped
with a div using is-vertical to display the input vertically.

Note: To change the length of a vertical slider, the input width and
div height.

Cowbell
[2                   ]
Show code

<div style="display: flex; align-items: center; gap: 0.5rem">
  <label>Cowbell</label>
  <div class="is-vertical">
    <input class="has-box-indicator" type="range" min="1" max="3" step="1" value="2" />
  </div>
</div>

Copy Code

Spinner

    A spinner or loader, also referred as ProgressRing, is a type of
    progress control to indicate that an operation is underway and
    its completion time is unknown.

To render a spinner element, use either a spinner or a loader class.
To animate the spinner, add an animate class.

For accessibility, we use an aria-label attribute with a desired text
to inform assistive technologies about the presence of the spinner.

Show code

<span class="spinner" aria-label="Spinning"></span>
<span class="loader" aria-label="Loading"></span>
<span class="loader animate" aria-label="Processing your request"></span>

Copy Code

Tabs

    Tabs provide a way to present related information on separate
    labeled pages. -- Microsoft Windows User Experience - Tabs

    Instruction Example More instruction Disabled Tab

Creating tabs

To create a tab, use a menu element with role="tablist". Then for the
tab titles, use a button with role="tab", and set the aria-controls
attribute to the corresponding id of the element with role=
"tabpanel".

Read more at MDN Web docs - ARIA: tab role

More...

This tab contains a GroupBox

Today's mood
( ) Claire Saffitz
( ) Brad Leone
( ) Chris Morocco
( ) Carla Lalli Music

Disabling tabs

Simply add a disabled attribute on the tab.

Justified tabs

Add the justified class to the tablist menu to make the tabs, well,
justified.

Disabled Tab

This tab is disabled, so you should not be able to read this.

Show code

<section class="tabs" style="max-width: 500px">
  <menu role="tablist" aria-label="Sample Tabs">
    <button role="tab" aria-controls="tab-A" aria-selected="true">Instruction</button>
    <button role="tab" aria-controls="tab-B">Example</button>
    <button role="tab" aria-controls="tab-C">More instruction</button>
    <button role="tab" aria-controls="tab-D" disabled>Disabled Tab</button>
  </menu>
  <!-- the tab content -->
  <article role="tabpanel" id="tab-A">
    <h3>Creating tabs</h3>
    <p>
      To create a tab, use a <code>menu</code> element with <code>role="tablist"</code>.
      Then for the tab titles, use a <code>button</code> with <code>role="tab"</code>, and set the <code>aria-controls</code> attribute to
      the corresponding id of the element with <code>role="tabpanel"</code>.
    </p>
    <p>
      Read more at <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role"
        target="_blank">MDN Web docs - ARIA: tab role</a>
    </p>
  </article>
  <article role="tabpanel" id="tab-B" hidden>
    <h3>More...</h3>
    <p>This tab contains a GroupBox</p>
    <fieldset>
      <legend>Today's mood</legend>
      <div>
        <input id="radio25" type="radio" name="fieldset-example2">
        <label for="radio25">Claire Saffitz</label>
      </div>
      <div>
        <input id="radio26" type="radio" name="fieldset-example2">
        <label for="radio26">Brad Leone</label>
      </div>
      <div>
        <input id="radio27" type="radio" name="fieldset-example2">
        <label for="radio27">Chris Morocco</label>
      </div>
      <div>
        <input id="radio28" type="radio" name="fieldset-example2">
        <label for="radio28">Carla Lalli Music</label>
      </div>
    </fieldset>
  </article>
  <article role="tabpanel" id="tab-C" hidden>
    <h3>Disabling tabs</h3>
    <p>Simply add a <code>disabled</code> attribute on the tab.</p>
    <h3>Justified tabs</h3>
    <p>Add the <code>justified</code> class to the <code>tablist</code> menu to make the tabs, well, justified.</p>
  </article>
  <article role="tabpanel" id="tab-D" hidden>
    <h3>Disabled Tab</h3>
    <p>This tab is disabled, so you should not be able to read this.</p>
  </article>
</section>

Copy Code

A simplified template is as below:

    Tab A Tab B Tab C Tab D

Tab A is active Tab B is active Tab C is active Tab D is inactive
Show code

<section class="tabs">
  <menu role="tablist" aria-label="Tabs Template">
    <button role="tab" aria-controls="tab-A" aria-selected="true">Tab A</button>
    <button role="tab" aria-controls="tab-B">Tab B</button>
    <button role="tab" aria-controls="tab-C">Tab C</button>
    <button role="tab" aria-controls="tab-D" disabled>Tab D</button>
  </menu>
  <article role="tabpanel" id="tab-A">Tab A is active</article>
  <article role="tabpanel" id="tab-B" hidden>Tab B is active</article>
  <article role="tabpanel" id="tab-C" hidden>Tab C is active</article>
  <article role="tabpanel" id="tab-D" hidden>Tab D is inactive</article>
</section>

Copy Code

TextBox

    A text box (also referred to as an edit control) is a rectangular
    control where the user enters or edits text. It can be defined to
    support a single line or multiple lines of text. -- Microsoft
    Windows User Experience p. 181

Text boxes can be rendered by specifying a text type on an input
element. As with checkboxes and radio buttons, you should provide a
corresponding label with a properly set for attribute.

Occupation [                    ]
Show code

<label for="text29">Occupation</label>
<input id="text29" type="text" />

Copy Code

Additionally, you can make use of the group class to position your
label above the input instead of beside it.

Address (Line 1) [                    ]
Address (Line 2) [                    ]
Show code

<div class="group" style="width: 200px">
  <label for="text30">Address (Line 1)</label>
  <input id="text30" type="text" />
</div>
<div class="group" style="width: 200px">
  <label for="text31">Address (Line 2)</label>
  <input id="text31" type="text" />
</div>

Copy Code

To support multiple lines in the user's input, use the textarea
element instead.

                 [                    ]
                 [                    ]
                 [                    ]
                 [                    ]
                 [                    ]
                 [                    ]
                 [                    ]
Additional notes [                    ]
Show code

<div class="group" style="width: 200px">
  <label for="text32">Additional notes</label>
  <textarea id="text32" rows="8"></textarea>
</div>

Copy Code

TreeView

    A tree view control is a special list box control that displays a
    set of objects as an indented outline based on their logical
    hierarchical relationship. -- Microsoft Windows User Experience p.
    178

To render a tree view, use an ul element with the tree-view class.
The children of this list (li elements), can contain whatever you'd
like.

  * We can put
  *  Whatever 
  * We want in here

Show code

<ul class="tree-view has-container">
  <li>We can put</li>
  <li><strong style="color: purple"> Whatever </strong></li>
  <li>We want in here</li>
</ul>

Copy Code

To make this a tree, we can nest further ul elements (no class needed
on these). This will provide them with indentation to illustrate the
hierarchical relations of the tree.

To create collapsible sections, wrap child lists inside details
elements.

  * Table of Contents
  * What is web development?
  * CSS
      + Selectors
      + Specificity
      + Properties
  * JavaScript
      + Avoid at all costs
      + Unless
          o Avoid
          o At
              # Avoid
              # At
              # All
              # Cost
          o All
          o Cost
  * HTML
  * Special Thanks

Show code

<ul class="tree-view has-container">
  <li>Table of Contents</li>
  <li>What is web development?</li>
  <li>
    CSS
    <ul>
      <li>Selectors</li>
      <li>Specificity</li>
      <li>Properties</li>
    </ul>
  </li>
  <li>
    <details open>
      <summary>JavaScript</summary>
      <ul>
        <li>Avoid at all costs</li>
        <li>
          <details>
            <summary>Unless</summary>
            <ul>
              <li>Avoid</li>
              <li>
                <details>
                  <summary>At</summary>
                  <ul>
                    <li>Avoid</li>
                    <li>At</li>
                    <li>All</li>
                    <li>Cost</li>
                  </ul>
                </details>
              </li>
              <li>All</li>
              <li>Cost</li>
            </ul>
          </details>
        </li>
      </ul>
    </details>
  </li>
  <li>HTML</li>
  <li>Special Thanks</li>
</ul>

Copy Code

The has-connector class may be used to render a dotted border to
illustrate the structure more clearly, and the has-collapse-button
class to change the expand/collapse carets to buttons.

    JavaScript
      + Avoid at all costs
      + Unless
          o Avoid
          o At
              # Avoid
              # At
              # All
              # Cost
          o All
          o Cost

Show code

<ul class="tree-view has-collapse-button has-connector has-container">
  <details open>
    <summary>JavaScript</summary>
    <ul>
      <li>Avoid at all costs</li>
      <li>
        <details>
          <summary>Unless</summary>
          <ul>
            <li>Avoid</li>
            <li>
              <details>
                <summary>At</summary>
                <ul>
                  <li>Avoid</li>
                  <li>At</li>
                  <li>All</li>
                  <li>Cost</li>
                </ul>
              </details>
            </li>
            <li>All</li>
            <li>Cost</li>
          </ul>
        </details>
      </li>
    </ul>
  </details>
</ul>

Copy Code

Window

The following components illustrate how to build complete windows
using 7.css.

Title Bar

    At the top edge of the window, inside its border, is the title
    bar (also reffered to as the caption or caption bar), which
    extends across the width of the window. The title bar identifies
    the contents of the window. -- Microsoft Windows User Experience
    p. 118

    Include command buttons associated with the common commands of
    the primary window in the title bar. These buttons act as
    shortcuts to specific window commands. -- Microsoft Windows User
    Experience p. 122

You can build a complete title bar by making use of three classes,
title-bar, title-bar-text, and title-bar-controls.

A Title Bar
Show code

<div class="title-bar">
  <div class="title-bar-text">A Title Bar</div>
  <div class="title-bar-controls">
    <button aria-label="Close"></button>
  </div>
</div>

Copy Code

We make use of aria-label to render the Close button, to let
assistive technologies know the intent of this button. You may also
use "Minimize", "Maximize", "Restore" and "Help" like so:

A Title Bar

A maximized Title Bar

A help Title Bar
Show code

<div class="title-bar">
  <div class="title-bar-text">A Title Bar</div>
  <div class="title-bar-controls">
    <button aria-label="Minimize"></button>
    <button aria-label="Maximize"></button>
    <button aria-label="Close"></button>
  </div>
</div>

<br>

<div class="title-bar">
  <div class="title-bar-text">A maximized Title Bar</div>
  <div class="title-bar-controls">
    <button aria-label="Minimize"></button>
    <button aria-label="Restore"></button>
    <button aria-label="Close"></button>
  </div>
</div>

<br>

<div class="title-bar">
  <div class="title-bar-text">A help Title Bar</div>
  <div class="title-bar-controls">
    <button aria-label="Help"></button>
    <button aria-label="Close"></button>
  </div>
</div>

Copy Code

Alternatively, you can use the is-close, is-minimize, is-maximize,
is-restore, is-help classes to target the respective controls for
your styling preference.

To give our title bar a home, we wrap it in a window container. This
provides a drop shadow to it. We can freely resize the window by
specifying a width in the container style.

A complete window
Show code

<div class="window" style="max-width: 300px">
  <div class="title-bar">
    <div class="title-bar-text">A complete window</div>
    <div class="title-bar-controls">
      <button aria-label="Help"></button>
      <button aria-label="Minimize"></button>
      <button aria-label="Maximize"></button>
      <button aria-label="Close"></button>
    </div>
  </div>
</div>

Copy Code

Place an active class either on the window container or the title bar
itself to enable the active styles for the controls.

A complete window
Show code

<div class="window active" style="max-width: 300px">
  <div class="title-bar">
    <div class="title-bar-text">A complete window</div>
    <div class="title-bar-controls">
      <button aria-label="Help"></button>
      <button aria-label="Minimize"></button>
      <button aria-label="Maximize" disabled></button>
      <button aria-label="Close"></button>
    </div>
  </div>
</div>

Copy Code

Window body

    Every window has a boundary that defines its shape. -- Microsoft
    Windows User Experience p. 118

To draw the contents of the window, we use the window-body class
under the title bar. You may use the has-space class to add some
padding to the window body.

A window with contents

There's so much room for activities!

Show code

<div class="window active" style="max-width: 300px">
  <div class="title-bar">
    <div class="title-bar-text">A window with contents</div>
    <div class="title-bar-controls">
      <button aria-label="Minimize"></button>
      <button aria-label="Maximize"></button>
      <button aria-label="Close"></button>
    </div>
  </div>
  <div class="window-body has-space">
    <p>There's so much room for activities!</p>
  </div>
</div>

Copy Code
Another window with contents

    Music Dogs Food

Set your listening preferences

Today's mood
( ) Nicki Minaj
( ) Bell Towers
( ) The Glamorous Monique
( ) EN. V
Reset Alarm... Try this to get some attention [2Q]

You create the content for each tab by using an article tag.

OK Cancel
Show code

<div class="window active" style="max-width: 400px">
  <div class="title-bar">
    <div class="title-bar-text">Another window with contents</div>
    <div class="title-bar-controls">
      <button aria-label="Minimize"></button>
      <button aria-label="Maximize"></button>
      <button aria-label="Close"></button>
    </div>
  </div>
  <div class="window-body has-space">
    <menu role="tablist" aria-label="Window with Tabs">
      <button role="tab" aria-controls="music" aria-selected="true">Music</button>
      <button role="tab" aria-controls="dogs">Dogs</button>
      <button role="tab" aria-controls="food">Food</button>
    </menu>
    <article role="tabpanel" id="music">
      <p>Set your listening preferences</p>
      <fieldset>
        <legend>Today's mood</legend>
        <div>
          <input id="radio33" type="radio" name="fieldset-example2">
          <label for="radio33">Nicki Minaj</label>
        </div>
        <div>
          <input id="radio34" type="radio" name="fieldset-example2">
          <label for="radio34">Bell Towers</label>
        </div>
        <div>
          <input id="radio35" type="radio" name="fieldset-example2">
          <label for="radio35">The Glamorous Monique</label>
        </div>
        <div>
          <input id="radio36" type="radio" name="fieldset-example2">
          <label for="radio36">EN. V</label>
        </div>
      </fieldset>
      <section style="display: flex; gap: 6px; align-items: center">
        <button>Reset Alarm...</button>
        <label>Try this to get some attention</label>
      </section>
    </article>

    <article role="tabpanel" hidden id="dogs">
      <img style="width: 100%"
        src="data:image/jpeg;base64,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" />
    </article>

    <article role="tabpanel" hidden id="food">
      <p>
        You create the content for each tab by using an <code>article</code> tag.
      </p>
      <iframe width="100%" height="200" src="https://www.youtube.com/embed/TODJBQ0tnow" frameborder="0"
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen></iframe>
    </article>
    <section style="display: flex; justify-content: flex-end; gap: 6px">
      <button class="default">OK</button>
      <button>Cancel</button>
    </section>
  </div>
</div>

Copy Code

Status Bar

    A status bar is a special area within a window, typically the
    bottom, that displays information about the current state of what
    is being viewed in the window or any other contextual
    information, such as keyboard state. -- Microsoft Windows User
    Experience p. 146

You can render a status bar with the status-bar class, and
status-bar-field for every child text element.

A Window With A Status Bar

There are just so many possibilities:

  * A Task Manager
  * A Notepad
  * Or even a File Explorer!

Press F1 for help

Slide 1

CPU Usage: 14%

Show code

<div class="window" style="max-width: 320px">
  <div class="title-bar">
    <div class="title-bar-text">A Window With A Status Bar</div>
  </div>
  <div class="window-body has-space">
    <p> There are just so many possibilities:</p>
    <ul>
      <li>A Task Manager</li>
      <li>A Notepad</li>
      <li>Or even a File Explorer!</li>
    </ul>
  </div>
  <div class="status-bar">
    <p class="status-bar-field">Press F1 for help</p>
    <p class="status-bar-field">Slide 1</p>
    <p class="status-bar-field">CPU Usage: 14%</p>
  </div>
</div>

Copy Code

Glass frame & Color

    The glass window frames are a striking new aspect of the
    Microsoft Windows aesthetic, aiming to be both attractive and
    lightweight. These translucent frames give windows an open, less
    intrusive appearance, helping users focus on content and
    functionality rather than the interface surrounding it. --
    Microsoft Windows User Experience - Glass window frames

You can produce this "striking aspect" of the window with a glass
class. The window frame then becomes translucent, the background is
blurred behind the window.

A glass window frame

The background behind is blurred.

Show code

<div class="background">
  <div class="window glass active" style="max-width: 100%">
    <div class="title-bar">
      <div class="title-bar-text">A glass window frame</div>
      <div class="title-bar-controls">
        <button aria-label="Minimize"></button>
        <button aria-label="Close"></button>
      </div>
    </div>
    <div class="window-body has-space">
      <p>The background behind is blurred.</p>
    </div>
  </div>
</div>

Copy Code

If you want to override the default color of the window, you can
redefine the --w7-w-bg variable as an inline value of the style
attribute.

A violet window frame

You can change the window color just as simple.

A glass violet window frame

And even the glass window frame as well.

Show code

<div class="window active" style="max-width: 100%; margin: 0 1.5em; --w7-w-bg: #805ba5;">
  <div class="title-bar">
    <div class="title-bar-text">A violet window frame</div>
    <div class="title-bar-controls">
      <button aria-label="Minimize"></button>
      <button aria-label="Close"></button>
    </div>
  </div>
  <div class="window-body has-space">
    <p>You can change the window color just as simple.</p>
  </div>
</div>

<div class="background">
  <div class="window glass active" style="max-width: 100%; --w7-w-bg: #805ba5;">
    <div class="title-bar">
      <div class="title-bar-text">A glass violet window frame</div>
      <div class="title-bar-controls">
        <button aria-label="Minimize"></button>
        <button aria-label="Close"></button>
      </div>
    </div>
    <div class="window-body has-space">
      <p>And even the glass window frame as well.</p>
    </div>
  </div>
</div>

Copy Code

To make the aero effect stick to the window when scrolling, or
changing the viewport size, change the background-attachment property
of the .title-bar to local or scroll (default is fixed), depending on
your requirements.

A glass window frame with local background-attachment

The aero effect is now staying in place with the scroll position.

Show code

<div class="background">
  <div class="window glass active" style="max-width: 100%">
    <div class="title-bar" style="background-attachment: local;">
      <div class="title-bar-text">A glass window frame with local background-attachment</div>
      <div class="title-bar-controls">
        <button aria-label="Minimize"></button>
        <button aria-label="Close"></button>
      </div>
    </div>
    <div class="window-body has-space">
      <p>The aero effect is now staying in place with the scroll position.</p>
    </div>
  </div>
</div>

Copy Code

Dialog Box

    A dialog box is a secondary window that allows users to perform a
    command, asks users a question, or provides users with
    information or progress feedback. -- Microsoft Windows User
    Experience - Dialog Boxes

Without JavaScript, a dialog box can be triggered by utilizing the
URL fragment of an a element (denoted by the # sign), targeting a
corresponding dialog box element with the matching id.

For accessibility, define the role="dialog" attribute on the element.
Additionally, label the dialog using the aria-labelledby attribute,
with the value pointing to the id of the title bar's text element.

Open Dialog
Problem Diagnostics

Identifying your problem...

Cancel
Show code

<a href="#dialog-demo">Open Dialog</a>

<div class="window active is-bright" id="dialog-demo" role="dialog" aria-labelledby="dialog-title">
  <div class="title-bar">
    <div class="title-bar-text" id="dialog-title">Problem Diagnostics</div>
    <div class="title-bar-controls">
      <button aria-label="Close" onclick="history.back()"></button>
    </div>
  </div>
  <div class="window-body has-space">
    <h2 class="instruction instruction-primary">Identifying your problem...</h2>
    <div role="progressbar" class="marquee"></div>
  </div>
  <footer style="text-align: right">
    <button onclick="history.back()">Cancel</button>
  </footer>
</div>

Copy Code

Issues, Contributing, etc.

7.css is MIT licensed. Refer to the GitHub issues page to report any
issue in the code.

Started as a clone of XP.css, 7.css is a fun project I worked on in
my free time to enhance my tech skills.

Consider starring this project if it is useful to you in some way or
if you also share the love for Windows 7 with me ;)