From 77b0d6b019b42f4e40cc14bc4ab987fee396dfbc Mon Sep 17 00:00:00 2001 From: Jordan Scales Date: Tue, 21 Apr 2020 18:34:21 -0400 Subject: [PATCH] add textbox examples --- build/98.css | 4 + docs/98.css | 4 + docs/docs.css | 6 +- docs/index.html | 185 +++++++++++++++++++++++++++++++++++++++++--- docs/index.html.ejs | 160 +++++++++++++++++++++++++++++++++++--- style.css | 4 + 6 files changed, 339 insertions(+), 24 deletions(-) diff --git a/build/98.css b/build/98.css index 58ccfb2..c0b9d97 100644 --- a/build/98.css +++ b/build/98.css @@ -70,6 +70,10 @@ h3 { font-size: 2rem; } +h4 { + font-size: 1.5rem; +} + u { text-decoration: none; border-bottom: 0.5px solid #222222; diff --git a/docs/98.css b/docs/98.css index 58ccfb2..c0b9d97 100644 --- a/docs/98.css +++ b/docs/98.css @@ -70,6 +70,10 @@ h3 { font-size: 2rem; } +h4 { + font-size: 1.5rem; +} + u { text-decoration: none; border-bottom: 0.5px solid #222222; diff --git a/docs/docs.css b/docs/docs.css index 2db9fc8..5e1484b 100644 --- a/docs/docs.css +++ b/docs/docs.css @@ -52,7 +52,8 @@ h2 { margin-bottom: 12px; } -h3 { +h3, +h4 { /* Swap the margin for a top-padding so linking to this section results in a better scroll position */ padding-top: 20px; @@ -130,7 +131,8 @@ button.active { width: 100%; } - h3 { + h3, + h4 { flex: 0; } diff --git a/docs/index.html b/docs/index.html index 8a2877a..a05a04d 100644 --- a/docs/index.html +++ b/docs/index.html @@ -19,17 +19,16 @@
  • OptionButton
  • GroupBox
  • TextBox
    • -
  • Multiline TextBox
  • Dropdown
  • - Dialog + Window
    • -
  • TreeView
    • +
  • TreeView
  • Extras
    • @@ -46,21 +45,21 @@ 98.css is a CSS library for building interfaces that look like Windows 98.

    -
    -
    -
    +
    +
    +
    My First VB4 Program
    -
    +
    -
    +

    Hello, world!

    -
    +
    @@ -410,6 +409,170 @@
    + + +
    +

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

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

    + +
    +
    + + +
    +
    + Show code + 
    <div class="field-row">
+  <label for="text17">Occuptation</label>
+  <input id="text17" type="text" />
+</div>
    +
    +
    + +

    + Additionally, you can make use of the field-row-stacked class + to position your label above the input instead of beside it. +

    + +
    +
    + + +
    +
    + + +
    +
    + Show code + 
    <div class="field-row-stacked" style="width: 200px">
+  <label for="text18">Address (Line 1)</label>
+  <input id="text18" type="text" />
+</div>
+<div class="field-row-stacked" style="width: 200px">
+  <label for="text19">Address (Line 2)</label>
+  <input id="text19" type="text" />
+</div>
    +
    +
    + +

    + To support multiple lines in the user's input, use the textarea + element instead. +

    + +
    +
    + + +
    +
    + Show code + 
    <div class="field-row-stacked" style="width: 200px">
+  <label for="text20">Additional notes</label>
+  <textarea id="text20" rows="8"></textarea>
+</div>
    +
    +
    +
    +
    + +
    + +
    +
    + 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. + +
    + — Microsoft Windows User Experience p. 175 +
    +
    +
    +
    + +

    Window

    +

    + The following components illustrate how to build complete windows using + 98.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. + +
    + — 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 + window commands. + +
    + — Microsoft Windows User Experience p. 122 +
    +
    +
    +
    + +
    +

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

    TreeView

    +
    +
    + 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. + +
    + — Microsoft Windows User Experience p. 178 +
    +
    +
    +
    diff --git a/docs/index.html.ejs b/docs/index.html.ejs index 4b04073..5d403d4 100644 --- a/docs/index.html.ejs +++ b/docs/index.html.ejs @@ -19,17 +19,16 @@
  • OptionButton
  • GroupBox
  • TextBox
    • -
  • Multiline TextBox
  • Dropdown
  • - Dialog + Window
    • -
  • TreeView
    • +
  • TreeView
  • Extras
    • @@ -46,21 +45,21 @@ 98.css is a CSS library for building interfaces that look like Windows 98.

    -
    -
    -
    +
    +
    +
    My First VB4 Program
    -
    +
    -
    +

    Hello, world!

    -
    +
    @@ -302,6 +301,145 @@ `) %>
    + + +
    +

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

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

    + + <%- example(` +
    + + +
    + `) %> + +

    + Additionally, you can make use of the field-row-stacked class + to position your label above the input instead of beside it. +

    + + <%- example(` +
    + + +
    +
    + + +
    + `) %> + +

    + To support multiple lines in the user's input, use the textarea + element instead. +

    + + <%- example(` +
    + + +
    + `) %> +
    +
    + +
    + +
    +
    + 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. + +
    + — Microsoft Windows User Experience p. 175 +
    +
    +
    +
    + +

    Window

    +

    + The following components illustrate how to build complete windows using + 98.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. + +
    + — 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 + window commands. + +
    + — Microsoft Windows User Experience p. 122 +
    +
    +
    +
    + +
    +

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

    TreeView

    +
    +
    + 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. + + +
    +
    +
    diff --git a/style.css b/style.css index 0e366e0..54f7073 100644 --- a/style.css +++ b/style.css @@ -74,6 +74,10 @@ h3 { font-size: 2rem; } +h4 { + font-size: 1.5rem; +} + u { text-decoration: none; border-bottom: 0.5px solid #222222;