diff --git a/build/98.css b/build/98.css index 761c0e2..7b8efd7 100644 --- a/build/98.css +++ b/build/98.css @@ -133,7 +133,7 @@ button:focus { align-items: center; } -.title-bar-title { +.title-bar-text { font-weight: bold; color: white; letter-spacing: 0; diff --git a/docs/98.css b/docs/98.css index 761c0e2..7b8efd7 100644 --- a/docs/98.css +++ b/docs/98.css @@ -133,7 +133,7 @@ button:focus { align-items: center; } -.title-bar-title { +.title-bar-text { font-weight: bold; color: white; letter-spacing: 0; diff --git a/docs/index.html b/docs/index.html index 36b4769..a5c5cbc 100644 --- a/docs/index.html +++ b/docs/index.html @@ -24,8 +24,7 @@ Window
  • TreeView
    • @@ -47,7 +46,7 @@
    -
    +
    My First VB4 Program
    @@ -577,12 +576,7 @@ — Microsoft Windows User Experience p. 118 -
    - -
    -

    Title Bar Buttons

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

    + 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
    +
    + + + +
    +
    +
    + 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>
    +
    +
    @@ -599,14 +644,82 @@

    Window contents

    - 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.
    - — Microsoft Windows User Experience p. 122 + — Microsoft Windows User Experience p. 118
    + +

    + To give our title bar a home, we make use of the window + 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. +

    + +
    +
    +
    +
    A Complete Window
    +
    + + + +
    +
    +
    +
    + Show code + 
    <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>
    +
    +
    + +

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

    + +
    +
    +
    +
    A Window With Stuff In It
    +
    + + + +
    +
    +
    +

    There's so much room for activities!

    +
    +
    +
    + Show code + 
    <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>
    +
    +
    diff --git a/docs/index.html.ejs b/docs/index.html.ejs index 9aa973b..4f36f20 100644 --- a/docs/index.html.ejs +++ b/docs/index.html.ejs @@ -24,8 +24,7 @@ Window
  • TreeView
    • @@ -47,7 +46,7 @@
    -
    +
    My First VB4 Program
    @@ -424,12 +423,7 @@ — Microsoft Windows User Experience p. 118 -
    - -
    -

    Title Bar Buttons

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

    + You can build a complete title bar by making use of three classes, + title-bar, title-bar-text, and title-bar-controls. +

    + + <%- example(` +
    +
    A Title Bar
    +
    + +
    +
    + `) %> + +

    + 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: +

    + + <%- example(` +
    +
    A Title Bar
    +
    + + + +
    +
    + `) %>
    @@ -446,14 +471,53 @@

    Window contents

    - 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.
    - — Microsoft Windows User Experience p. 122 + — Microsoft Windows User Experience p. 118
    + +

    + To give our title bar a home, we make use of the window + 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. +

    + + <%- example(` +
    +
    +
    A Complete Window
    +
    + + + +
    +
    +
    + `) %> + +

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

    + + <%- example(` +
    +
    +
    A Window With Stuff In It
    +
    + + + +
    +
    +
    +

    There's so much room for activities!

    +
    +
    + `) %>
    diff --git a/style.css b/style.css index 73aef65..5df09d0 100644 --- a/style.css +++ b/style.css @@ -127,7 +127,7 @@ button:focus { align-items: center; } -.title-bar-title { +.title-bar-text { font-weight: bold; color: white; letter-spacing: 0;