add style guide page to nav.adoc

- edit style guide

diff --git a/docs/modules/ROOT/nav.adoc b/docs/modules/ROOT/nav.adoc
index 543cbd5..f9fa8d9 100644 (file)
--- a/docs/modules/ROOT/nav.adoc
+++ b/docs/modules/ROOT/nav.adoc
@@ -4,4 +4,5 @@
 * xref:build-preview-ui.adoc[Build and Preview the UI]
 * xref:development-workflow.adoc[UI Development Workflow]
 * xref:templates.adoc[Work with the Handlebars Templates]
+* xref:style-guide.adoc[UI Element Styles]
 * xref:stylesheets.adoc[Work with the CSS Stylesheets]

diff --git a/docs/modules/ROOT/pages/style-guide.adoc b/docs/modules/ROOT/pages/style-guide.adoc
index 6eef7ea..607a3d7 100644 (file)
--- a/docs/modules/ROOT/pages/style-guide.adoc
+++ b/docs/modules/ROOT/pages/style-guide.adoc
@@ -1,4 +1,4 @@
-= Style Guide
+= UI Element Style Guide
 ifndef::env-site,env-github[]
 include::_attributes.adoc[]
 endif::[]
@@ -6,23 +6,23 @@ endif::[]
 :idprefix:
 :idseparator: -
 
-When creating a UI theme for Antora, there are certain elements in UI that require the support for CSS to work correctly.
+When creating a UI theme for Antora, there are certain elements in the UI that require support from the CSS to work correctly.
 This list includes elements in the shell (i.e., frame) and in the document content.
 This document identifies these UI elements.
 
-== UI Shell
+//== UI Shell
 
-TODO
+// TODO
 
 == Document Content
 
 The HTML in the main content area is generated from AsciiDoc using Asciidoctor.
 AsciiDoc has numerous content elements that require assistance from CSS to render properly.
 
-=== Checklists
+=== Task lists
 
-A checklist is an unordered list with items that are prefixed with a checkbox marker (checked or unchecked).
-Here's an example of AsciiDoc source that produces a checklist:
+A task list is an unordered list with items that are prefixed with a checkbox marker (checked or unchecked).
+Here's an AsciiDoc source example that produces a task list:
 
 [source,asciidoc]
 ----
@@ -30,7 +30,7 @@ Here's an example of AsciiDoc source that produces a checklist:
 * [x] done!
 ----
 
-If font-based icons are enabled (i.e., `icons=font`), the checkbox gets inserted as the first element of the paragraph element that contains the list item text.
+If font-based icons are enabled (`icons=font`), the checkbox gets inserted as the first element of the paragraph element that contains the list item text.
 
 [source,html]
 ----
@@ -46,7 +46,7 @@ If font-based icons are enabled (i.e., `icons=font`), the checkbox gets inserted
 </div>
 ----
 
-The recommended approach is to hide the list markers (i.e., `list-style: none`), then add a checkbox glyph on the icon element using either a background image or a before pseudo element.
+The recommended approach is to hide the list markers (`list-style: none`), then add a checkbox glyph on the icon element using either a background image or a `before` pseudo element.
 
 Here's how it might appear: