From: Sarah White Date: Thu, 5 Apr 2018 18:31:06 +0000 (-0600) Subject: move ui macros to new page X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=63cf3a5e8076fd401c4d22897e238c5f77c3002e;p=working%2Feg-antora.git move ui macros to new page --- diff --git a/docs/modules/ROOT/pages/style-guide.adoc b/docs/modules/ROOT/pages/style-guide.adoc index 3c46973..0c0e72c 100644 --- a/docs/modules/ROOT/pages/style-guide.adoc +++ b/docs/modules/ROOT/pages/style-guide.adoc @@ -22,65 +22,4 @@ These elements include: * xref:admonition-styles.adoc[Admonitions] * xref:list-styles.adoc[Lists] * xref:sidebar-styles.adoc[Sidebars] - -=== UI Elements - -Asciidoctor supports three UI element representations out of the box, which are made from corresponding inline UI macros. - -* keybinding (kbd macro) -* button (btn macro) -* menu (menu macro) - -The UI elements are output using semantic HTML elements, so they inherit some default styling from the browser. -However, to look proper, they require some additional styling. - -==== Keybinding - -A keybinding can be a single key (`+kbd:[F11]+`) or a sequence of keys (`+kbd:[Ctrl+F]`). -Here's the HTML that's generated for these two forms. - -[source,html] ----- -F11 -Ctrl+F ----- - -Here's how these might appear: - -[%hardbreaks] -kbd:[F11] -kbd:[Ctrl+F] - -==== Button - -A button is meant to represent an on-screen button (`+btn:[Save]+`). -However, it should not appear like an actual button as that could confuse the reader into thinking it's interactive. -Therefore, a button is rendered as a bold text by default: - -[source,html] ----- -Save ----- - -Traditionally, a button reference is styled by surrounding the text with square brackets, as shown here: - -btn:[Save] - -==== Menu - -A menu can be a top-level menu reference (`+menu:File[]+`) or a nested selection (`+menu:File[Save]+`). -Here's the HTML that's generated for these two forms. - -[source,html] ----- -File -File › Save ----- - -This might be rendered as: - -[%hardbreaks] -menu:File[] -menu:File[Save] - -The default styling applied to a menu reference is usually sufficient. +* xref:ui-macro-styles.adoc[Button, Keybinding, and Menu UI Macros] diff --git a/docs/modules/ROOT/pages/ui-macro-styles.adoc b/docs/modules/ROOT/pages/ui-macro-styles.adoc new file mode 100644 index 0000000..7024165 --- /dev/null +++ b/docs/modules/ROOT/pages/ui-macro-styles.adoc @@ -0,0 +1,66 @@ += UI Macro Styles +ifndef::env-site,env-github[] +include::_attributes.adoc[] +endif::[] + +== UI macro elements + +Asciidoctor supports xref:antora:asciidoc:ui-macros.adoc[three UI element representations] out of the box, which are made from corresponding inline UI macros. + +* button (btn macro) +* keybinding (kbd macro) +* menu (menu macro) + +The UI elements are output using semantic HTML elements, so they inherit some default styling from the browser. +However, to look proper, they require some additional styling. + +=== Button + +A xref:antora:asciidoc:ui-macros.adoc#button[button] is meant to represent an on-screen button (`+btn:[Save]+`). +However, it should not appear like an actual button as that could confuse the reader into thinking it's interactive. +Therefore, a button is rendered as a bold text by default: + +[source,html] +---- +Save +---- + +Traditionally, a button reference is styled by surrounding the text with square brackets, as shown here: + +btn:[Save] + +=== Keybinding + +A xref:antora:asciidoc:ui-macros.adoc#keybinding[keybinding] can be a single key (`+kbd:[F11]+`) or a sequence of keys (`+kbd:[Ctrl+F]`). +Here's the HTML that's generated for these two forms. + +[source,html] +---- +F11 +Ctrl+F +---- + +Here's how these might appear: + +[%hardbreaks] +kbd:[F11] +kbd:[Ctrl+F] + +=== Menu + +A xref:antora:asciidoc:ui-macros.adoc#menu[menu] can be a top-level menu reference (`+menu:File[]+`) or a nested selection (`+menu:File[Save]+`). +Here's the HTML that's generated for these two forms. + +[source,html] +---- +File +File › Save +---- + +This might be rendered as: + +[%hardbreaks] +menu:File[] +menu:File[Save] + +The default styling applied to a menu reference is usually sufficient.