A design system for building faithful recreations of old UIs.
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.
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
<divrole="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
Show code
<inputtype="text"placeholder="Press Enter"aria-describedby="balloon-password" /><divrole="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.
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
<buttondisabled>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.
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
<inputtype="checkbox"id="example1"><labelfor="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
<divclass="field-row"><inputcheckedtype="checkbox"id="example2"><labelfor="example2">I am checked</label></div><divclass="field-row"><inputdisabledtype="checkbox"id="example3"><labelfor="example3">I am inactive</label></div><divclass="field-row"><inputcheckeddisabledtype="checkbox"id="example4"><labelfor="example4">I am inactive but still checked</label></div>
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.
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><optionselected>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.
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.
To create a marquee progress bar, add a marquee class
and remove the nested div.
Show code
<divrole="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.
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.
Option buttons can also be checked and disabled with their corresponding
HTML attributes.
Show code
<divclass="field-row"><inputid="radio14"type="radio"name="second-example"><labelfor="radio14">Peanut butter should be smooth</label></div><divclass="field-row"><inputcheckeddisabledid="radio15"type="radio"name="second-example"><labelfor="radio15">I understand why people like crunchy peanut butter</label></div><divclass="field-row"><inputdisabledid="radio16"type="radio"name="second-example"><labelfor="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...
Sliders can rendered by specifying a range type on an
input element.
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.
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".
This tab is disabled, so you should not be able to read this.
Show code
<sectionclass="tabs"style="max-width: 500px"><menurole="tablist"aria-label="Sample Tabs"><buttonrole="tab"aria-controls="tab-A"aria-selected="true">Instruction</button><buttonrole="tab"aria-controls="tab-B">Example</button><buttonrole="tab"aria-controls="tab-C">More instruction</button><buttonrole="tab"aria-controls="tab-D"disabled>Disabled Tab</button></menu><!-- the tab content --><articlerole="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 <ahref="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role"target="_blank">MDN Web docs - ARIA: tab role</a></p></article><articlerole="tabpanel"id="tab-B"hidden><h3>More...</h3><p>This tab contains a GroupBox</p><fieldset><legend>Today's mood</legend><divclass="field-row"><inputid="radio17"type="radio"name="fieldset-example2"><labelfor="radio17">Claire Saffitz</label></div><divclass="field-row"><inputid="radio18"type="radio"name="fieldset-example2"><labelfor="radio18">Brad Leone</label></div><divclass="field-row"><inputid="radio19"type="radio"name="fieldset-example2"><labelfor="radio19">Chris Morocco</label></div><divclass="field-row"><inputid="radio20"type="radio"name="fieldset-example2"><labelfor="radio20">Carla Lalli Music</label></div></fieldset></article><articlerole="tabpanel"id="tab-C"hidden><h3>Disabling tabs</h3><p>Simply add a <code>disabled</code> attribute on the tab.</p></article><articlerole="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.
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.
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.
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
<ulclass="tree-view"><li>We can put</li><li><strongstyle="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
<ulclass="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><detailsopen><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.
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.
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
<divclass="title-bar"><divclass="title-bar-text">A Title Bar</div><divclass="title-bar-controls"><buttonaria-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
<divclass="title-bar"><divclass="title-bar-text">A Title Bar</div><divclass="title-bar-controls"><buttonaria-label="Minimize"></button><buttonaria-label="Maximize"></button><buttonaria-label="Close"></button></div></div><br><divclass="title-bar"><divclass="title-bar-text">A maximized Title Bar</div><divclass="title-bar-controls"><buttonaria-label="Minimize"></button><buttonaria-label="Restore"></button><buttonaria-label="Close"></button></div></div>
Window contents
Every window has a boundary that defines its shape.
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.
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
<divclass="window"style="max-width: 300px"><divclass="title-bar"><divclass="title-bar-text">A window with contents</div><divclass="title-bar-controls"><buttonaria-label="Minimize"></button><buttonaria-label="Maximize"></button><buttonaria-label="Close"></button></div></div><divclass="window-body"><p>There's so much room for activities!</p></div></div>
Another window with contents
Set your listening preferences
You create the content for each tab by using an article tag.
Show code
<divclass="window"style="max-width: 400px"><divclass="title-bar"><divclass="title-bar-text">Another window with contents</div><divclass="title-bar-controls"><buttonaria-label="Minimize"></button><buttonaria-label="Maximize"></button><buttonaria-label="Close"></button></div></div><divclass="window-body"><menurole="tablist"><buttonrole="tab"aria-controls="music"aria-selected="true">Music</button><buttonrole="tab"aria-controls="dogs">Dogs</button><buttonrole="tab"aria-controls="food">Food</button></menu><articlerole="tabpanel"id="music"><p>Set your listening preferences</p><fieldset><legend>Today's mood</legend><divclass="field-row"><inputid="radio25"type="radio"name="fieldset-example2"><labelfor="radio25">Nicki Minaj</label></div><divclass="field-row"><inputid="radio26"type="radio"name="fieldset-example2"><labelfor="radio26">Bell Towers</label></div><divclass="field-row"><inputid="radio27"type="radio"name="fieldset-example2"><labelfor="radio27">The Glamorous Monique</label></div><divclass="field-row"><inputid="radio28"type="radio"name="fieldset-example2"><labelfor="radio28">EN. V</label></div></fieldset><sectionclass="field-row"><button>Reset Alarm...</button><label>Try this to get some attention</label></section></article><articlerole="tabpanel"hiddenid="dogs"><imgstyle="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><articlerole="tabpanel"hiddenid="food"><p>
You create the content for each tab by using an <code>article</code> tag.
</p><iframewidth="100%"height="200"src="https://www.youtube.com/embed/TODJBQ0tnow"frameborder="0"allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"allowfullscreen></iframe></article><sectionclass="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.
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
<divclass="window"style="max-width: 320px"><divclass="title-bar"><divclass="title-bar-text">A Window With A Status Bar</div></div><divclass="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><divclass="status-bar"><pclass="status-bar-field">Press F1 for help</p><pclass="status-bar-field">Slide 1</p><pclass="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
<divclass="background"><divclass="window glass"style="max-width: 320px"><divclass="title-bar"><divclass="title-bar-text">A glass window frame</div><divclass="title-bar-controls"><buttonaria-label="Minimize"></button><buttonaria-label="Close"></button></div></div><divclass="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><divclass="window violet"style="max-width: 320px"><divclass="title-bar"><divclass="title-bar-text">A violet window frame</div><divclass="title-bar-controls"><buttonaria-label="Minimize"></button><buttonaria-label="Close"></button></div></div><divclass="window-body"><p>You can change the window color just as simple.</p></div></div><divclass="background"><divclass="window violet glass"style="max-width: 320px"><divclass="title-bar"><divclass="title-bar-text">A glass violet window frame</div><divclass="title-bar-controls"><buttonaria-label="Minimize"></button><buttonaria-label="Close"></button></div></div><divclass="window-body"><p>And even the glass window frame as well.</p></div></div></div>