mirror of
https://github.com/jdan/98.css.git
synced 2025-09-01 09:53:12 +02:00
window documentation
This commit is contained in:
Jordan Scales
@@ -133,7 +133,7 @@ button:focus {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title-bar-title {
|
||||
.title-bar-text {
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
letter-spacing: 0;
|
||||
|
||||
@@ -133,7 +133,7 @@ button:focus {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title-bar-title {
|
||||
.title-bar-text {
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
letter-spacing: 0;
|
||||
|
||||
137
docs/index.html
137
docs/index.html
@@ -24,8 +24,7 @@
|
||||
<a href="#window">Window</a>
|
||||
<ul>
|
||||
<li><a href="#title-bar">Title Bar</a></li>
|
||||
<li><a href="#title-bar-buttons">Title Bar Buttons</a></li>
|
||||
<li><a href="#all-together">All together</a></li>
|
||||
<li><a href="#window-contents">Window contents</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#tree-view">TreeView</a></li>
|
||||
@@ -47,7 +46,7 @@
|
||||
|
||||
<div class="window" style="margin: 32px; width: 250px">
|
||||
<div class="title-bar">
|
||||
<div class="title-bar-title">
|
||||
<div class="title-bar-text">
|
||||
My First VB4 Program
|
||||
</div>
|
||||
|
||||
@@ -577,12 +576,7 @@
|
||||
— Microsoft Windows User Experience p. 118
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="component">
|
||||
<h4 id="title-bar-buttons">Title Bar Buttons</h4>
|
||||
<div>
|
||||
<blockquote>
|
||||
Include command buttons associated with the common commands of the
|
||||
primary window in the title bar. These buttons act as shortcuts to specific
|
||||
@@ -592,6 +586,57 @@
|
||||
— Microsoft Windows User Experience p. 122
|
||||
</footer>
|
||||
</blockquote>
|
||||
|
||||
<p>
|
||||
You can build a complete title bar by making use of three classes,
|
||||
<code>title-bar</code>, <code>title-bar-text</code>, and <code>title-bar-controls</code>.
|
||||
</p>
|
||||
|
||||
<div class="example">
|
||||
<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>
|
||||
<details>
|
||||
<summary>Show code</summary>
|
||||
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-text"</span>></span>A Title Bar<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-controls"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
We make use of <code>aria-label</code> to render the Close button, to let
|
||||
assistive technologies know the intent of this button. You may also use
|
||||
"Minimize" and "Maximize" like so:
|
||||
</p>
|
||||
|
||||
<div class="example">
|
||||
<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>
|
||||
<details>
|
||||
<summary>Show code</summary>
|
||||
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-text"</span>></span>A Title Bar<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-controls"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Minimize"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Maximize"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -599,14 +644,82 @@
|
||||
<h4 id="window-contents">Window contents</h4>
|
||||
<div>
|
||||
<blockquote>
|
||||
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.
|
||||
Every window has a boundary that defines its shape.
|
||||
|
||||
<footer>
|
||||
— Microsoft Windows User Experience p. 122
|
||||
— Microsoft Windows User Experience p. 118
|
||||
</footer>
|
||||
</blockquote>
|
||||
|
||||
<p>
|
||||
To give our title bar a home, we make use of the <code>window</code>
|
||||
class. This provides a raised outer and inner border, as well as some
|
||||
padding. We can freely resize the window by specifying a width in the
|
||||
container style.
|
||||
</p>
|
||||
|
||||
<div class="example">
|
||||
<div class="window" style="width: 350px">
|
||||
<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>
|
||||
<details>
|
||||
<summary>Show code</summary>
|
||||
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"window"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 350px"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-text"</span>></span>A Complete Window<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-controls"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Minimize"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Maximize"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
To draw the contents of the window, we use the <code>window-body</code>
|
||||
class under the title bar.
|
||||
</p>
|
||||
|
||||
<div class="example">
|
||||
<div class="window" style="width: 350px">
|
||||
<div class="title-bar">
|
||||
<div class="title-bar-text">A Window With Stuff In It</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>
|
||||
<details>
|
||||
<summary>Show code</summary>
|
||||
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"window"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 350px"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-text"</span>></span>A Window With Stuff In It<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-controls"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Minimize"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Maximize"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"window-body"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>There's so much room for activities!<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -24,8 +24,7 @@
|
||||
<a href="#window">Window</a>
|
||||
<ul>
|
||||
<li><a href="#title-bar">Title Bar</a></li>
|
||||
<li><a href="#title-bar-buttons">Title Bar Buttons</a></li>
|
||||
<li><a href="#all-together">All together</a></li>
|
||||
<li><a href="#window-contents">Window contents</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#tree-view">TreeView</a></li>
|
||||
@@ -47,7 +46,7 @@
|
||||
|
||||
<div class="window" style="margin: 32px; width: 250px">
|
||||
<div class="title-bar">
|
||||
<div class="title-bar-title">
|
||||
<div class="title-bar-text">
|
||||
My First VB4 Program
|
||||
</div>
|
||||
|
||||
@@ -424,12 +423,7 @@
|
||||
— Microsoft Windows User Experience p. 118
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="component">
|
||||
<h4 id="title-bar-buttons">Title Bar Buttons</h4>
|
||||
<div>
|
||||
<blockquote>
|
||||
Include command buttons associated with the common commands of the
|
||||
primary window in the title bar. These buttons act as shortcuts to specific
|
||||
@@ -439,6 +433,37 @@
|
||||
— Microsoft Windows User Experience p. 122
|
||||
</footer>
|
||||
</blockquote>
|
||||
|
||||
<p>
|
||||
You can build a complete title bar by making use of three classes,
|
||||
<code>title-bar</code>, <code>title-bar-text</code>, and <code>title-bar-controls</code>.
|
||||
</p>
|
||||
|
||||
<%- example(`
|
||||
<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>
|
||||
`) %>
|
||||
|
||||
<p>
|
||||
We make use of <code>aria-label</code> to render the Close button, to let
|
||||
assistive technologies know the intent of this button. You may also use
|
||||
"Minimize" and "Maximize" like so:
|
||||
</p>
|
||||
|
||||
<%- example(`
|
||||
<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>
|
||||
`) %>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -446,14 +471,53 @@
|
||||
<h4 id="window-contents">Window contents</h4>
|
||||
<div>
|
||||
<blockquote>
|
||||
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.
|
||||
Every window has a boundary that defines its shape.
|
||||
|
||||
<footer>
|
||||
— Microsoft Windows User Experience p. 122
|
||||
— Microsoft Windows User Experience p. 118
|
||||
</footer>
|
||||
</blockquote>
|
||||
|
||||
<p>
|
||||
To give our title bar a home, we make use of the <code>window</code>
|
||||
class. This provides a raised outer and inner border, as well as some
|
||||
padding. We can freely resize the window by specifying a width in the
|
||||
container style.
|
||||
</p>
|
||||
|
||||
<%- example(`
|
||||
<div class="window" style="width: 350px">
|
||||
<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>
|
||||
`) %>
|
||||
|
||||
<p>
|
||||
To draw the contents of the window, we use the <code>window-body</code>
|
||||
class under the title bar.
|
||||
</p>
|
||||
|
||||
<%- example(`
|
||||
<div class="window" style="width: 350px">
|
||||
<div class="title-bar">
|
||||
<div class="title-bar-text">A Window With Stuff In It</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>
|
||||
`) %>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user