Classic stylesheets for web applications 2.0
Buttons
Show Code
<button>OK</button>
Show Code
<button disabled="">Disabled</button>
Show Code
<div class="flex-row gap">
<div class="button">Default</div>
<div class="button disabled">Disabled</div>
<div class="button focus">Focus</div>
<div class="button active">Active</div>
</div>
Inputs
Show Code
<input type="text" value="This is a text input">
Show Code
<input type="text" value="This input is read-only" readonly="">
Show Code
<input type="text" value="This input is disabled" disabled="">
Show Code
<textarea>This is a textarea</textarea>
Default
Disabled
Readonly
Focus
Show Code
<div class="flex-row gap">
<div class="input">Default</div>
<div class="input disabled">Disabled</div>
<div class="input readonly">Readonly</div>
<div class="input focus">Focus</div>
</div>
Selects
Show Code
<div class="dropdown">
<select size="1">
<option>Foo</option>
<option>Bar</option>
<option>Baz</option>
</select>
<div class="dropdown-button"></div>
</div>
Show Code
<div class="dropdown">
<select size="1" disabled="">
<option>Foo</option>
<option>Bar</option>
<option>Baz</option>
</select>
<div class="dropdown-button"></div>
</div>
Show Code
<select size="4">
<option>Foo</option>
<option>Bar</option>
<option>Baz</option>
</select>
Show Code
<select size="4" disabled="">
<option>Foo</option>
<option>Bar</option>
<option>Baz</option>
</select>
Checkboxes
Show Code
<div class="flex-column gap">
<div class="checkbox-row">
<input type="checkbox" id="checkbox1" checked="">
<label for="checkbox1">Checkbox 1</label>
</div>
<div class="checkbox-row">
<input type="checkbox" id="checkbox2">
<label for="checkbox2">Checkbox 2</label>
</div>
<div class="checkbox-row">
<input type="checkbox" id="checkbox3" disabled="">
<label for="checkbox3">Disabled checkbox</label>
</div>
<div class="checkbox-row">
<input type="checkbox" id="checkbox4" disabled="" checked="">
<label for="checkbox4">Disabled checked checkbox</label>
</div>
</div>
Radio buttons
Show Code
<div class="flex-column gap">
<div class="radio-row">
<input type="radio" id="radio1" name="radio1" checked="">
<label for="radio1">Radio button 1</label>
</div>
<div class="radio-row">
<input type="radio" id="radio2" name="radio1">
<label for="radio2">Radio button 2</label>
</div>
<div class="radio-row">
<input type="radio" id="radio3" name="radio1">
<label for="radio3">Radio button 3</label>
</div>
</div>
Show Code
<div class="flex-column gap">
<div class="radio-row">
<input type="radio" id="radio4" disabled="">
<label for="radio4">Disabled radio button</label>
</div>
<div class="radio-row">
<input type="radio" id="radio5" disabled="" checked="">
<label for="radio5">Disabled selected radio button</label>
</div>
</div>
Sliders
Show Code
<input type="range">
Progress bars
Show Code
<div class="flex-row gap">
<progress value="40" max="100" style="width: 140px;">40 %</progress>
<progress style="width: 140px;">Indeterminate</progress>
</div>
Show Code
<div class="flex-row gap">
<div class="progress-bar" style="width: 140px;" aria-valuemin="0" aria-valuemax="100" aria-valuenow="40">
<div class="progress-bar-value" style="width: 40%;"></div>
</div>
<div class="progress-bar" style="width: 140px;"></div>
</div>
Flex layouts
Show Code
<div class="flex-row gap align-center">
<label for="flex-input-1">Some text</label>
<input id="flex-input-1" type="text" value="An input">
</div>
Show Code
<div class="flex-column gap">
<label for="flex-input-2">Some text</label>
<input id="flex-input-2" type="text" value="An input">
</div>
Grid layouts
Show Code
<form class="grid gap align-center" style="grid-template-columns: max-content auto;" onsubmit="return false">
<label for="grid-input-1">Some text</label>
<input id="grid-input-1" type="text" value="An input">
<label for="grid-input-2">Some other text</label>
<input id="grid-input-2" type="password" value="Another input">
<div class="flex-row gap justify-end" style="grid-column-end: span 2;">
<button type="submit">Save</button>
<button>Cancel</button>
</div>
</form>
Panels
Raised
Show Code
<div class="raised padding">
Raised
</div>
Lowered
Show Code
<div class="lowered padding">
Lowered
</div>
Panel
Panel
Panel
Show Code
<div class="raised flex-row">
<div class="lowered padding grow">
Panel
</div>
<div class="lowered padding grow">
Panel
</div>
<div class="lowered padding grow">
Panel
</div>
</div>
Field sets
Show Code
<fieldset class="padding">
Field set
</fieldset>
Show Code
<fieldset class="padding">
<legend>Legend</legend>
<form class="flex-row gap align-center" onsubmit="return false">
<label for="fieldset-input">Save</label>
<input type="text" id="fieldset-input">
<button type="submit">Save</button>
</form>
</fieldset>
Tabs
First tab panel
Second tab panel
Third tab panel
Show Code
<div class="tabs">
<menu role="tablist">
<button role="tab" aria-selected="true" aria-controls="tab1">First tab</button>
<button role="tab" aria-controls="tab2">Second tab</button>
<button role="tab" aria-controls="tab3">Third tab</button>
</menu>
<div role="tabpanel" id="tab1" class="padding">
First tab panel
</div>
<div role="tabpanel" id="tab2" hidden="" class="padding">
Second tab panel
</div>
<div role="tabpanel" id="tab3" hidden="" class="padding">
Third tab panel
</div>
</div>
Scrollbars
Show Code
<div class="horizontal-scrollbar">
<button>
</button>
<div class="scrollbar-track">
<div class="scrollbar-thumb" style="left: 30%; width: 30%;">
</div>
</div>
<button>
</button>
</div>
Show Code
<div class="vertical-scrollbar" style="height: 100px">
<button>
</button>
<div class="scrollbar-track">
<div class="scrollbar-thumb" style="top: 30%; height: 30%;">
</div>
</div>
<button>
</button>
</div>
Webkit scrollbars
Show Code
<div class="lowered" style="overflow: scroll; width: 150px; height: 100px;">
<div style="width: 400px; height: 400px;">
Webkit scrollbars
</div>
</div>
Lists
Green
Orange
Yellow
Blue
Violet
Show Code
<div class="list" role="listbox">
<div role="option">Green</div>
<div role="option">Orange</div>
<div role="option">Yellow</div>
<div role="option">Blue</div>
<div role="option">Violet</div>
</div>
Detailed lists
My Documents
|
File Folder | 2020-07-14 20:28 | |
Program Files
|
File Folder | 2020-07-14 20:28 | |
autoexec.bat
|
0KB | MS-DOS Batch File | 2020-07-14 20:28 |
Command.com
|
92KB | MS-DOS Application | 1999-04-23 22:22 |
Show Code
<div class="list" role="listbox">
<table class="detailed">
<tbody>
<tr role="option">
<td class="icon">
<img src="icons/folder16.png">
<div class="icon-label">My Documents</div>
</td>
<td></td>
<td>File Folder</td>
<td>2020-07-14 20:28</td>
</tr>
<tr role="option">
<td class="icon">
<img src="icons/folder16.png">
<div class="icon-label">Program Files</div>
</td>
<td></td>
<td>File Folder</td>
<td>2020-07-14 20:28</td>
</tr>
<tr role="option">
<td class="icon">
<img src="icons/file16.png">
<div class="icon-label">autoexec.bat</div>
</td>
<td>0KB</td>
<td>MS-DOS Batch File</td>
<td>2020-07-14 20:28</td>
</tr>
<tr role="option">
<td class="icon">
<img src="icons/file16.png">
<div class="icon-label">Command.com</div>
</td>
<td>92KB</td>
<td>MS-DOS Application</td>
<td>1999-04-23 22:22</td>
</tr>
</tbody>
</table>
</div>
Name | Size | Type | Modified |
---|---|---|---|
My Documents
|
File Folder | 2020-07-14 20:28 | |
Program Files
|
File Folder | 2020-07-14 20:28 | |
autoexec.bat
|
0KB | MS-DOS Batch File | 2020-07-14 20:28 |
Command.com
|
92KB | MS-DOS Application | 1999-04-23 22:22 |
Show Code
<div class="list" role="listbox" aria-multiselectable="true">
<table class="detailed">
<thead>
<tr>
<th>Name</th>
<th>Size</th>
<th>Type</th>
<th>Modified</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="icon" role="option">
<img src="icons/folder16.png">
<div class="icon-label">My Documents</div>
</div>
</td>
<td></td>
<td>File Folder</td>
<td>2020-07-14 20:28</td>
</tr>
<tr>
<td>
<div class="icon" role="option">
<img src="icons/folder16.png">
<div class="icon-label">Program Files</div>
</div>
</td>
<td></td>
<td>File Folder</td>
<td>2020-07-14 20:28</td>
</tr>
<tr>
<td>
<div class="icon" role="option">
<img src="icons/file16.png">
<div class="icon-label">autoexec.bat</div>
</div>
</td>
<td>0KB</td>
<td>MS-DOS Batch File</td>
<td>2020-07-14 20:28</td>
</tr>
<tr>
<td>
<div class="icon" role="option">
<img src="icons/file16.png">
<div class="icon-label">Command.com</div>
</div>
</td>
<td>92KB</td>
<td>MS-DOS Application</td>
<td>1999-04-23 22:22</td>
</tr>
</tbody>
</table>
</div>
Icon grids
Network Neighborhood
My Documents
New Text Document.txt
New Text Document (2).txt
New Text Document (3).txt
New Bitmap Image.bmp
New Bitmap Image (2).bmp
New Bitmap Image (3).bmp
Recycle Bin
Show Code
<div class="list" style="max-height: 200px;" role="listbox" aria-multiselectable="true">
<div class="icon-grid">
<div class="icon" role="option">
<img src="icons/network.png">
<div class="icon-label">Network Neighborhood</div>
</div>
<div class="icon" role="option">
<img src="icons/home.png">
<div class="icon-label">My Documents</div>
</div>
<div class="icon" role="option">
<img src="icons/text.png">
<div class="icon-label">New Text Document.txt</div>
</div>
<div class="icon" role="option">
<img src="icons/text.png">
<div class="icon-label">New Text Document (2).txt</div>
</div>
<div class="icon" role="option">
<img src="icons/text.png">
<div class="icon-label">New Text Document (3).txt</div>
</div>
<div class="icon" role="option">
<img src="icons/image.png">
<div class="icon-label">New Bitmap Image.bmp</div>
</div>
<div class="icon" role="option">
<img src="icons/image.png">
<div class="icon-label">New Bitmap Image (2).bmp</div>
</div>
<div class="icon" role="option">
<img src="icons/image.png">
<div class="icon-label">New Bitmap Image (3).bmp</div>
</div>
<div class="icon" role="option">
<img src="icons/trash-full.png">
<div class="icon-label">Recycle Bin</div>
</div>
</div>
</div>
Menus
Show Code
<div class="menu" style="width: 200px;">
<div class="title-bar">
<div class="title-bar-text">
Main Menu
</div>
</div>
<ul role="menu">
<li tabindex="0" data-shortcut="Ctrl+S"><u>S</u>ave</li>
<li tabindex="0">Save <u>A</u>s…</li>
<li tabindex="0" aria-haspopup="true">
<u>E</u>dit
<ul role="menu">
<li tabindex="0" data-shortcut="Ctrl+Z" aria-disabled="true"><u>U</u>ndo</li>
<li role="separator"></li>
<li tabindex="0" data-shortcut="Ctrl+X">Cu<u>t</u></li>
<li tabindex="0" data-shortcut="Ctrl+C"><u>C</u>opy</li>
<li tabindex="0" data-shortcut="Ctrl+V" aria-disabled="true"><u>P</u>aste</li>
<li role="separator"></li>
<li tabindex="0" aria-haspopup="true">
<u>A</u>nother Submenu
<ul role="menu">
<li tabindex="0"><u>F</u>oo</li>
<li tabindex="0"><u>B</u>az</li>
</ul>
</li>
</ul>
</li>
<li role="separator"></li>
<li tabindex="0">A<u>b</u>out</li>
<li tabindex="0"><u>Q</u>uit</li>
</ul>
</div>
- Open
- Edit
-
Send To
- Compressed Folder
- Desktop
- Properties
Show Code
<ul role="menu" style="width: 200px;">
<li tabindex="0">Open</li>
<li tabindex="0">Edit</li>
<li tabindex="0">Print</li>
<li role="separator"></li>
<li tabindex="0" aria-haspopup="true">
Send To
<ul role="menu">
<li tabindex="0">Compressed Folder</li>
<li tabindex="0">Desktop</li>
</ul>
</li>
<li role="separator"></li>
<li tabindex="0">Properties</li>
</ul>
-
File
- Save
- Save As…
-
Another Submenu
- Foo
- Baz
- Quit
-
Edit
- Undo
- Cut
- Copy
- Paste
-
View
- Status Bar
- Icons
- List
- Details
- Refresh
Show Code
<ul role="menubar">
<li tabindex="0" aria-haspopup="true">
<u>F</u>ile
<ul role="menu">
<li tabindex="0">Save</li>
<li tabindex="0">Save As…</li>
<li role="separator"></li>
<li tabindex="0" aria-haspopup="true">
Another Submenu
<ul role="menu">
<li tabindex="0">Foo</li>
<li tabindex="0">Baz</li>
</ul>
</li>
<li role="separator"></li>
<li tabindex="0">Quit</li>
</ul>
</li>
<li tabindex="0" aria-haspopup="true">
<u>E</u>dit
<ul role="menu">
<li tabindex="0" data-shortcut="Ctrl+Z">Undo</li>
<li role="separator"></li>
<li tabindex="0" data-shortcut="Ctrl+X">Cut</li>
<li tabindex="0" data-shortcut="Ctrl+C">Copy</li>
<li tabindex="0" data-shortcut="Ctrl+V">Paste</li>
</ul>
</li>
<li tabindex="0" aria-haspopup="true">
<u>V</u>iew
<ul role="menu">
<li tabindex="0" role="checkbox" aria-checked="true">Status <u>B</u>ar</li>
<li role="separator"></li>
<li tabindex="0" role="radio" aria-checked="false">Ico<u>n</u>s</li>
<li tabindex="0" role="radio" aria-checked="true"><u>L</u>ist</li>
<li tabindex="0" role="radio" aria-checked="false"><u>D</u>etails</li>
<li role="separator"></li>
<li tabindex="0"><u>R</u>efresh</li>
</ul>
</li>
<li tabindex="0" class="help-menu" aria-haspopup="true">
Help
<ul role="menu">
<li tabindex="0">Overview</li>
<li role="separator"></li>
<li tabindex="0">About</li>
</ul>
</li>
</ul>
Windows
Show Code
<div class="title-bar active">
<div class="title-bar-text">
Title Bar
</div>
</div>
Show Code
<div class="title-bar active">
<div class="title-bar-buttons">
<button data-minimize=""></button>
</div>
<div class="title-bar-text">
Title Bar
</div>
<div class="title-bar-buttons">
<button data-close=""></button>
</div>
</div>
Show Code
<div class="title-bar">
<div class="title-bar-text">
Inactive Title Bar
</div>
<div class="title-bar-buttons">
<button data-close=""></button>
</div>
</div>
-
File
- Save
- Save As…
-
Another Submenu
- Foo
- Baz
- Quit
-
Edit
- Undo
- Cut
- Copy
- Paste
Window body
Window body
Window body
Footer
Show Code
<div class="window active" style="max-width: 400px;">
<div class="title-bar">
<div class="title-bar-text">
Window Title
</div>
<div class="title-bar-buttons">
<button data-minimize=""></button>
<button data-maximize=""></button>
<button data-close=""></button>
</div>
</div>
<div class="window-body">
<ul role="menubar">
<li tabindex="0" aria-haspopup="true">
<u>F</u>ile
<ul role="menu">
<li tabindex="0">Save</li>
<li tabindex="0">Save As…</li>
<li role="separator"></li>
<li tabindex="0" aria-haspopup="true">
Another Submenu
<ul role="menu">
<li tabindex="0">Foo</li>
<li tabindex="0">Baz</li>
</ul>
</li>
<li role="separator"></li>
<li tabindex="0">Quit</li>
</ul>
</li>
<li tabindex="0" aria-haspopup="true">
<u>E</u>dit
<ul role="menu">
<li data-shortcut="Ctrl+Z" aria-disabled="true">Undo</li>
<li role="separator"></li>
<li data-shortcut="Ctrl+X" aria-disabled="true">Cut</li>
<li tabindex="0" data-shortcut="Ctrl+C">Copy</li>
<li tabindex="0" data-shortcut="Ctrl+V">Paste</li>
</ul>
</li>
<li tabindex="0" class="help-menu" aria-haspopup="true">
Help
<ul role="menu">
<li tabindex="0">Overview</li>
<li role="separator"></li>
<li tabindex="0">About</li>
</ul>
</li>
</ul>
<div class="padding">
Window body
<hr class="margin-vertical">
Window body
</div>
<div class="padding">
Footer
</div>
</div>
</div>
Inactive window body
Show Code
<div class="window" style="max-width: 400px;" tabindex="0">
<div class="title-bar">
<div class="title-bar-text">
Inactive Window Title
</div>
<div class="title-bar-buttons">
<button data-close=""></button>
</div>
</div>
<div class="window-body">
<div class="padding">
Inactive window body
</div>
</div>
</div>
Dialogs
Do you want to delete everything?
Show Code
<div class="dialog active" style="max-width: 400px;">
<div class="title-bar">
<div class="title-bar-text">
Dialog Title
</div>
</div>
<div class="dialog-body">
<div class="padding">Do you want to delete everything?</div>
<div class="flex-row gap padding justify-end">
<button>Yes</button>
<button>No</button>
</div>
</div>
</div>
Do you want to delete everything?
Show Code
<div class="dialog" style="max-width: 400px;" tabindex="0">
<div class="title-bar">
<div class="title-bar-text">
Inactive Dialog Title
</div>
</div>
<div class="dialog-body">
<div class="padding">Do you want to delete everything?</div>
<div class="flex-row gap padding justify-end">
<button>Yes</button>
<button>No</button>
</div>
</div>
</div>