mirror of
https://github.com/jdan/98.css.git
synced 2025-09-02 18:33:01 +02:00
window documentation
This commit is contained in:
Jordan Scales
@@ -133,7 +133,7 @@ button:focus {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title-bar-title {
|
.title-bar-text {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: white;
|
color: white;
|
||||||
letter-spacing: 0;
|
letter-spacing: 0;
|
||||||
|
|||||||
@@ -133,7 +133,7 @@ button:focus {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title-bar-title {
|
.title-bar-text {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: white;
|
color: white;
|
||||||
letter-spacing: 0;
|
letter-spacing: 0;
|
||||||
|
|||||||
137
docs/index.html
137
docs/index.html
@@ -24,8 +24,7 @@
|
|||||||
<a href="#window">Window</a>
|
<a href="#window">Window</a>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="#title-bar">Title Bar</a></li>
|
<li><a href="#title-bar">Title Bar</a></li>
|
||||||
<li><a href="#title-bar-buttons">Title Bar Buttons</a></li>
|
<li><a href="#window-contents">Window contents</a></li>
|
||||||
<li><a href="#all-together">All together</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li><a href="#tree-view">TreeView</a></li>
|
<li><a href="#tree-view">TreeView</a></li>
|
||||||
@@ -47,7 +46,7 @@
|
|||||||
|
|
||||||
<div class="window" style="margin: 32px; width: 250px">
|
<div class="window" style="margin: 32px; width: 250px">
|
||||||
<div class="title-bar">
|
<div class="title-bar">
|
||||||
<div class="title-bar-title">
|
<div class="title-bar-text">
|
||||||
My First VB4 Program
|
My First VB4 Program
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -577,12 +576,7 @@
|
|||||||
— Microsoft Windows User Experience p. 118
|
— Microsoft Windows User Experience p. 118
|
||||||
</footer>
|
</footer>
|
||||||
</blockquote>
|
</blockquote>
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="component">
|
|
||||||
<h4 id="title-bar-buttons">Title Bar Buttons</h4>
|
|
||||||
<div>
|
|
||||||
<blockquote>
|
<blockquote>
|
||||||
Include command buttons associated with the common commands of the
|
Include command buttons associated with the common commands of the
|
||||||
primary window in the title bar. These buttons act as shortcuts to specific
|
primary window in the title bar. These buttons act as shortcuts to specific
|
||||||
@@ -592,6 +586,57 @@
|
|||||||
— Microsoft Windows User Experience p. 122
|
— Microsoft Windows User Experience p. 122
|
||||||
</footer>
|
</footer>
|
||||||
</blockquote>
|
</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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@@ -599,14 +644,82 @@
|
|||||||
<h4 id="window-contents">Window contents</h4>
|
<h4 id="window-contents">Window contents</h4>
|
||||||
<div>
|
<div>
|
||||||
<blockquote>
|
<blockquote>
|
||||||
Include command buttons associated with the common commands of the
|
Every window has a boundary that defines its shape.
|
||||||
primary window in the title bar. These buttons act as shortcuts to specific
|
|
||||||
window commands.
|
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
— Microsoft Windows User Experience p. 122
|
— Microsoft Windows User Experience p. 118
|
||||||
</footer>
|
</footer>
|
||||||
</blockquote>
|
</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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|||||||
@@ -24,8 +24,7 @@
|
|||||||
<a href="#window">Window</a>
|
<a href="#window">Window</a>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="#title-bar">Title Bar</a></li>
|
<li><a href="#title-bar">Title Bar</a></li>
|
||||||
<li><a href="#title-bar-buttons">Title Bar Buttons</a></li>
|
<li><a href="#window-contents">Window contents</a></li>
|
||||||
<li><a href="#all-together">All together</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li><a href="#tree-view">TreeView</a></li>
|
<li><a href="#tree-view">TreeView</a></li>
|
||||||
@@ -47,7 +46,7 @@
|
|||||||
|
|
||||||
<div class="window" style="margin: 32px; width: 250px">
|
<div class="window" style="margin: 32px; width: 250px">
|
||||||
<div class="title-bar">
|
<div class="title-bar">
|
||||||
<div class="title-bar-title">
|
<div class="title-bar-text">
|
||||||
My First VB4 Program
|
My First VB4 Program
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -424,12 +423,7 @@
|
|||||||
— Microsoft Windows User Experience p. 118
|
— Microsoft Windows User Experience p. 118
|
||||||
</footer>
|
</footer>
|
||||||
</blockquote>
|
</blockquote>
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="component">
|
|
||||||
<h4 id="title-bar-buttons">Title Bar Buttons</h4>
|
|
||||||
<div>
|
|
||||||
<blockquote>
|
<blockquote>
|
||||||
Include command buttons associated with the common commands of the
|
Include command buttons associated with the common commands of the
|
||||||
primary window in the title bar. These buttons act as shortcuts to specific
|
primary window in the title bar. These buttons act as shortcuts to specific
|
||||||
@@ -439,6 +433,37 @@
|
|||||||
— Microsoft Windows User Experience p. 122
|
— Microsoft Windows User Experience p. 122
|
||||||
</footer>
|
</footer>
|
||||||
</blockquote>
|
</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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@@ -446,14 +471,53 @@
|
|||||||
<h4 id="window-contents">Window contents</h4>
|
<h4 id="window-contents">Window contents</h4>
|
||||||
<div>
|
<div>
|
||||||
<blockquote>
|
<blockquote>
|
||||||
Include command buttons associated with the common commands of the
|
Every window has a boundary that defines its shape.
|
||||||
primary window in the title bar. These buttons act as shortcuts to specific
|
|
||||||
window commands.
|
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
— Microsoft Windows User Experience p. 122
|
— Microsoft Windows User Experience p. 118
|
||||||
</footer>
|
</footer>
|
||||||
</blockquote>
|
</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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user