Tweet Share Share Fork

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!

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

Components

Balloon

A balloon is a small pop-up window that informs users of a non-critical problem or special condition in a control.

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>

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.

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

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.

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

Show code
<button>I am being pressed</button>

Disabled buttons maintain the same style, but have a "washed out" appearance in their label.

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

Show code
<button>I am focused</button>

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

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

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

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>

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

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>

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

Today's mood
Show code
<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>

ProgressBar

A common control that displays the progress of a particular operation as a graphical bar.

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>

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>

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>

To animate the progress bar, add an animate class.

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

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

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

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. Just as before: when grouping inputs, wrap each input in a container with the field-row class to ensure a consistent spacing between inputs.

Show code
<div class="field-row">
  <input id="radio12" type="radio" name="first-example">
  <label for="radio12">Yes</label>
</div>
<div class="field-row">
  <input id="radio13" type="radio" name="first-example">
  <label for="radio13">No</label>
</div>

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

Show code
<div class="field-row">
  <input id="radio14" type="radio" name="second-example">
  <label for="radio14">Peanut butter should be smooth</label>
</div>
<div class="field-row">
  <input checked disabled id="radio15" type="radio" name="second-example">
  <label for="radio15">I understand why people like crunchy peanut butter</label>
</div>
<div class="field-row">
  <input disabled id="radio16" type="radio" name="second-example">
  <label for="radio16">Crunchy peanut butter is good</label>
</div>

Scrollbar

A control that allows users to scroll the content of a window, either vertically or horizontally.

Upon importing this CSS, the browser's system scrollbar is overridden by the Windows 7 custom scrollbar (WebKit-based browsers only).

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.

Show code
<div class="field-row" style="max-width: 300px">
  <label>Volume:</label>
  <label>Low</label>
  <input type="range" min="1" max="11" value="5" />
  <label>High</label>
</div>

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.

Show code
<div class="field-row">
  <label>Cowbell</label>
  <div class="is-vertical">
    <input class="has-box-indicator" type="range" min="1" max="3" step="1" value="2" />
  </div>
</div>

Tabs

Tabs provide a way to present related information on separate labeled pages.

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

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 class="field-row">
        <input id="radio17" type="radio" name="fieldset-example2">
        <label for="radio17">Claire Saffitz</label>
      </div>
      <div class="field-row">
        <input id="radio18" type="radio" name="fieldset-example2">
        <label for="radio18">Brad Leone</label>
      </div>
      <div class="field-row">
        <input id="radio19" type="radio" name="fieldset-example2">
        <label for="radio19">Chris Morocco</label>
      </div>
      <div class="field-row">
        <input id="radio20" type="radio" name="fieldset-example2">
        <label for="radio20">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>
  </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>

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 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, and wrap both in a container with the field-row class.

Show code
<div class="field-row">
  <label for="text21">Occupation</label>
  <input id="text21" type="text" />
</div>

Additionally, you can make use of the field-row-stacked class to position your label above the input instead of beside it.

Show code
<div class="field-row-stacked" style="width: 200px">
  <label for="text22">Address (Line 1)</label>
  <input id="text22" type="text" />
</div>
<div class="field-row-stacked" style="width: 200px">
  <label for="text23">Address (Line 2)</label>
  <input id="text23" type="text" />
</div>

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

Show code
<div class="field-row-stacked" style="width: 200px">
  <label for="text24">Additional notes</label>
  <textarea id="text24" rows="8"></textarea>
</div>

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">
  <li>We can put</li>
  <li><strong style="color: purple">✨ Whatever ✨</strong></li>
  <li>We want in here</li>
</ul>

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

To create expandable sections, wrap child lists inside of details elements.

  • Table of Contents
  • What is web development?
  • CSS
    • Selectors
    • Specificity
    • Properties
  • JavaScript
    • Avoid at all costs
    • Unless
      • Avoid
      • At
        • Avoid
        • At
        • All
        • Cost
      • All
      • Cost
  • HTML
  • Special Thanks
Show code
<ul class="tree-view">
  <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>

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>

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" and "Maximize" like so:

A Title Bar

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

Window contents

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

To give our title bar a home, we make use of the window class. 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="Minimize"></button>
      <button aria-label="Maximize"></button>
      <button aria-label="Close"></button>
    </div>
  </div>
</div>

To draw the contents of the window, we use the window-body class under the title bar.

A window with contents

There's so much room for activities!

Show code
<div class="window" 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">
    <p>There's so much room for activities!</p>
  </div>
</div>
Another window with contents

Set your listening preferences

Today's mood
Show code
<div class="window" 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">
    <menu role="tablist">
      <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 class="field-row">
          <input id="radio25" type="radio" name="fieldset-example2">
          <label for="radio25">Nicki Minaj</label>
        </div>
        <div class="field-row">
          <input id="radio26" type="radio" name="fieldset-example2">
          <label for="radio26">Bell Towers</label>
        </div>
        <div class="field-row">
          <input id="radio27" type="radio" name="fieldset-example2">
          <label for="radio27">The Glamorous Monique</label>
        </div>
        <div class="field-row">
          <input id="radio28" type="radio" name="fieldset-example2">
          <label for="radio28">EN. V</label>
        </div>
      </fieldset>
      <section class="field-row">
        <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,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxMSEhUTExMWFhMVFxgYGBgYGBgYFRcdGxgYFhYdGBoYHiggGBslGxoXIjEiJSkrLi4uFx8zODMtNygtLisBCgoKDg0OGhAQGislHyUtLS0tLS0uLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLTctN//AABEIAKUBMgMBIgACEQEDEQH/xAAcAAEAAwEBAQEBAAAAAAAAAAAABQYHBAMCAQj/xAA2EAABAwIEBAMIAgEEAwAAAAABAAIRAyEEBTFBBhJRcSJhkQcTMoGhscHw0eFCFCNS8RVygv/EABkBAQADAQEAAAAAAAAAAAAAAAACAwQBBf/EAB8RAQEAAgMBAAMBAAAAAAAAAAABAhEDITESMkFRBP/aAAwDAQACEQMRAD8Aw1ERAREQEREBERAREQERSfD2VnE1204dB+LliQJA38yEHNluDdWqNY0ElxAW15TwJSpAEMvF/Pr5eYPVTfDfBNDDhpaHc1p5oP4sOytrcOJVWWScij5twu2qwtLBe3cDYnvp81lOfcHPpVOUbuhp2IOnSCv6TGHB2UVnuSio2w8QMg/dJk7p/Nj+GcQ14Y5oExcEOF+karmzHJK1H42ROlwT6Bf0ZSyBjL8oNoGm2nZR+N4covPM9rSRpOy79ufL+cyI1X4tF9oeTYWn42SHx8LAIO0k/uizpTl2jZoREXXBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQFffZRgXHFgyRLTsCIkjxTuCFUsjwJrVmNAOokjbp2kr+huCsg9x4nQXQBOpHlMbaKGd60njFtoMgD8roaxfK534wfJZss9LccduqoQAuSvjA34tFz1MU4iWsLvsuWu+Z5p54kACw6qu8v8WTj/AKkjTDrhcuJoxtZfuV1SWCRBuPTTVdrzKuxu4qymqqeaZPSqjxNafOAsn484cp0GlzaZDuoNra2W34ujOipPFdMmm4P0g/t5lTxukbNsGRe+NphtRzWyQDAnX6LwV6oRFN8PcN1cU5nKP9tzw0ukW6x2F0EPTplxAaCSdABJPyC+jhngElrgBE2Np0lbvwtwbSwjg6mLlsFzvE4m+g0bYx8lPVshpPAaYB0mLnrfqq7nE/h/MqLXOPeA6RHvKIFOoBZjR4XQTrHwmI9FktRhaSCIIMEHUHeVOXaNmnyiIuuCIiAiIgIiICIiAiIgIiICIiAiIgIiIC6stwpqVGtAm4np8+65VePZZgPfYggkBrRJH+R6X6Lluo7JutD4MwFMhobhx4YvygCe5M+q0PCUiNV4YGgGi0AKSA5RO6otXSPDFPIB6/gr4w+FBhztBsvEnmgk6xbyC7mEabKnGfV2svU0rPEnGNDBEc5EmzW/fsuPB8WCtL2C29pjudhdeXF/BBxL3Fjy3nADo0Nw479Wt9FI8P8ADNLDUi14B08Tm9BA7aLmXFf6sxzxk8e1HOmnl6kgKTNaFk+c5u3DV3OY0+F3w3cHEui1wGiLyfqrzw/nIxWHp1+UsDwZab6EtkHcGJB6Fdxl12hySb6SuJfKovHmIaKLi4bfNWurWgwT/BWV+1jNmmKTTJkT5d/5VmHdVXqMzcbr8RFqUPXC0C97WDVxA9VvfCmUsw9JjWCwJMnc6T5WWIcP0+bEUxE3/C/oPJnHkAMWFlXyVPCJdoheGIqr15rLnrRCy2r5EFm7XczXDrczBB9Fm3tGyHlcMQwDlNnx12NtFpWa1+Vpt4db7LKuNs9NQim0kDfYEadbq3i3tHk1pT0RFpZxERAREQEREBERAREQEREBERAREQEREBal7I30mtcY/wB0u18gstWmeynDv5+QMME8xdHh0sPM/sbqvk/FPj9bhlbi65ELvxTJEdl4YKlygBe7qkC6z29aXxD5k8sIC9mYi1omP3RcuYVOaTFpXJzuANyCLT5bfhVYZaq647j6xOZ1Wmw7A6LizLOa4pEHD+8ndr2Bo+bivSvmZiH8rjtLQD9IKr2NxTnH/bZ6kx6Cfup3lRnGo3E2CrOfemIcb8rpA7SBPorzkOMZRw7KYgBjdNurvqSouvlNao/mdvsP7UxQyQRB03C592+Fx17ULnvEDj4G2ib6lZpxIXFwc687/wArW8ZkbB8LBKo/EmVASC2+1wrOO6qvObigovqoyCR0XytbKufs8yf3jzVc0kCzbiPOeh0+q2HK8OQ0Rttqs09lD+YPb0dp5G/3Wt4emABCz8uXa7CdPWbLkxFTWy7XGy4MQ8CSdLhURarPElaGOAbJj90WKZpXL6riYkGLaWstX48zBzMM6HN6AyQ6+3Q6BY8StPFP2p5L+n4iIrlQiIgIiICIiAiIgIiICIiAiIgIiICIiCx8J8P/AOoe0uBLZsP+Ufid+/Rb9wnkjaDNBOwGg/krOPZLjqLwWGA9gAiwnzHVbCx4gALLy5dtHHj07KR3XzX0QVbLmfidlRlVsjnrNkQuHGjlPcfZd5eI1XFinTrt6qKcrkZhGv1C7aOXNAiAmGpKQapYxHK1w1aQaNLBceJqAC0Luxg1XBVZI0Oi7cnJEVWqyqlxXgxVpkAwdj0/pWjEuAMecKHzOmBM7+i5jlqpXHpmlTg7FQS0Nf2cJ26x1UZislxFP46NQDrykj1FlrmWsnsrFhqIV0/0Xfaq8E/TL/ZHiQMRUYdXNBHWxM/dbOx0KOGUUXPD3MaKjZLXADnE2Nxde4p1Gu5YkO0M6dwo55fXcMMddPWriFAZzmopjxGxC8M+z+nh3uY/4htab3kLO+I+JBUOttmjqmGNrudkRfF2dOrv5f8AEf36KvL6qPkk9SvlbJNTTLbuiIi64IiICIiAiIgIiICIiAiIgIiICIiAiIg6MDjH0XtqU3FrmmQVsPCPtAOIZy1IFVu3XS4H48liykMgw5qYmiwEgue0W11vp5KvkwmU7WYZ3Gt4ocVS4zA+evZe7eIqbrA36HX0UbxHw9SLA4DlfoC2w0kBw/Ko1bB12H4jExP73Cw3j1fW2ZyzxpZzll/ELea8nZ6wG5n7LPKGEqk3JIU/gsqJABkjoVC7iUkqx4DiJnveQ2BNr6lWUY9p0OvT7qnUMmboSJ2+v1XJUdXoEkXHlHMY0HZdxyv7Ryxl8W/E1yNP+1A43MHM+E7aahVrEcWYho5fdHmPb9hV/GcQYhxPhAO86qXxvxyXXqbzTG1fi0Ciq+bufDSbNUNicbVqfG4x5aL8w7YgKfxpz72veRVZAkgT11Vpwbp1VSyPSI2Vnw0Hc230+yovq1Kl/KPsuDE5idBrr6L5q1iNXCFGY7GhokdTO56KWNu0MpNM746x5e0DlEucXOd/lrAE9I+6pSv/ABFh21XmGxLfoBaB3kqgL0OPxi5fRERWKxERAREQEREBERAREQEREBERAREQEREBERAXvgsU6lUbUYYcwhw7heCIP6CyrNW4zC06ouHNAeJ+Fw+Kel9F61QASGwQBcRM389/4Cx3gfiQ4OqeafdVAA4bA7OjykrS8TX5XNfB5XXEaHzlZs8NVowy3EiMMwnmbcaRuNtLLowYERMRY9frsuPCYtsSHTNiNxuJtK/Pfkus60GOb+e6oyi6VMNdy/CLev3XE6sCTzanroo1uaNJLXyNt489d91418WOaGgO8unWyr0m+sXQaZdzCe30BKrOIwgEkjXrqpyq4Hrr8MgQdel1GZkfDG5+itxQqt1S2bBe+EoS4fui8qxbTP7qpDJKZceYqV8cizZbTMWU4y1r/YKOwAspZoPIdOW09fkqNLdozMKsA3/fmq5jK7jqZHeI81KZ2bgNP7877KpZhiw0QdzMwCSNldhgryyfeZYpnM0tNwINrRqOvl9VQyrFiarix55YsddQq4teEZM6IiKaAiIgIiICIiAiIgIiICIiAiIgIiICIiAiIgIiIC2/gykMTl1EgFzqbC2BE+GQJ+ixBbD7GKp/0lcXtUsNrtb91Xyfinx+vHMa5okcoIkwb3kC9vRR1POXz4Z0sNb/ALsrXnOXcwJdEuJMekd/+1B5LkHNWbLgXahoEn5nQLLLtq1opDE4iAXco1iBrupLD5O9kHmkkHTW1yrjhcsFGXEa7QDNly4pji0+7DWkTrJD9df6UMr2lPFZbTbygNIJGokc3zB0vIUdmFQATeR5Kfr0BUHjaG1Lx5EbAqm8VF1ORo52rZsPMKeM2hldISvVbWqy3QffdWrLKENsqXkR9Zur/lFIkD9ClyTXTmF32lMFSMSphlHwkTcx21XzhMPa66sVoYCpkWWqFxbUsTflBAA/j5qjHGh1QHl+HSevVafnmC5wBAt6g91Qv/GgVi13Xt8/ur8bqK7Nudpc8QbgCPz9yo3NcjdSaHtkt3Gpb3jZX7CZKIkQepGny+QXfVwkCSByEwBsbaf9rs5dVHLj3GNIrbxZkIpj3rWwDsNP6VSWmWWbjPZoREXXBERAREQEREBERAREQEREBERAREQEREBERAWwew9o91XJJPjHhm3wi8dfPyWPrU/YhjfFXomIhrx1/wCJ+Wnqocn4pYerxmmFmSL+Ui2y9eEcL4yS2/b0E6+fyXTmGunaFI8OUOVpcZknfpEBY8fWq/i6ceNoEeWnZQ9dnIy0z9ZU1jHh23z8lE46QNdCNdNv7UbN13G9ITMGGo0NFjqDvP7Kp3FpDqR95aowa7+RHUK9Y7DujUc2v8KkcVVxUYWuADgCCNiFZgjkpnC8OJm5ladktKAFlXCuIDa0GLrXsreICnzTtDjvSewxAF1+V6wNhquR1RefvFStc+ZPHLBGosenUHyVVfTBeCRIBB7jX7KbzKpKgG1IeB5wpXxyRZcE0BpDSLttHUm4jay9K7ZY1ms7R6LxylliXW81INpcxmAQ3rbdV5LIgMza145SwiLEH9+/kqDn3DJbL6QMbt3HZajmjg958MFsAbnv2/lcx5CPEJCs4+SxDk45WIEL8V14v4faJq07eWoKpS245bm2OzQiIuuCIiAiIgIiICIiAiIgIiICIiAiIgIiIC1D2KUBzV37+Fo67k3+YWXrQ/Y5XIr1WzYsBjqQdfRRz/FLD1ruMp88CY0U7RbytHZV11eHt/8AYT9VOPqSFj202eOKrXIJnRRdarqXnQHsu/nBMfvX97rjzGg0tvOt436KGKVV3MMe7nJeS3TQaf0qBxzmPNBbY6EjdaXmGHABJdzWtN/rH0WS8Y1hJadT+Cr+Odqs70rNN5aQRqDK1rhrM+djepAn0WRLSfZ/Wa5gAN22PVW8s3FfHdVdzVsvqo0wjCOYDbVMViQO/wBlkaoicS6/r9FBZjSDSpXGB3KTsTt3v+FGVxzTI0XYV3ZBmUt5SbAyf30VpbUBi8CFj3/mP9PXe0XYSNP8Vccjz73vNUZ8LbAG0mPxb1U8+PU2hjnu6WbM6RID2G4IMdRvO65areWmSD8ILiNYXHSqVeVrwNZ67GNOm6/cyzBvKWP8NXTw/C7aCT1Cpnq6+IjF4xr2OBIgg6/n5rNcdR5HuaNAVbsyc2k13i1mJBm1jbcdiqXUfJJ6rbxTpj5fXyiIrVQiIgIiICIiAiIgIiICIiAiIgIiICIiApThvOH4Su2qwAn4SDuDr2RFyuz1t2CxJq1GSLFzbT2d+Fa8ZUgGOiIsN8a/3EM6s7msY0/fouTF1jyxO32CIq8VmStZtjnspCDJ1n/6hZbn2IL6pnUflEWzhZeVGqb4Sxz6dcBps7UbWBIRFbl5VWPrWMFWJBedY+y+qniI6nX9/dURYW18YxvKz5H8qu8RHkY0t1db8oinghkzbHVC6o4nWf6XrgszqUrNd4d27GdV+otmumXa6uzqryNfMTcj0sofPc4qObLrk7yQZ6+ZhEVGOM+l9yvyrVXEPd8Tie5leSItDOIiICIiAiIgIiICIiD/2Q==" />
    </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 class="field-row" style="justify-content: flex-end">
      <button>OK</button>
      <button>Cancel</button>
    </section>
  </div>
</div>

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

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.

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" style="max-width: 320px">
    <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">
      <p>The background behind is blurred.</p>
    </div>
  </div>
</div>

If you want to override the default color of the window, you can specify the background-color attribute in the before pseudo element and the title-bar under the same parent class as window.

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
<style>
  .violet::before,
  .violet > .title-bar {
    background-color: #805ba5;
  }
</style>

<div class="window violet" style="max-width: 320px">
  <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">
    <p>You can change the window color just as simple.</p>
  </div>
</div>

<div class="background">
  <div class="window violet glass" style="max-width: 320px">
    <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">
      <p>And even the glass window frame as well.</p>
    </div>
  </div>
</div>

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