diff --git a/_docs/components/navigation.md b/_docs/components/navigation.md index 800f83b0c..46e581296 100755 --- a/_docs/components/navigation.md +++ b/_docs/components/navigation.md @@ -9,8 +9,6 @@ lead: Allows users to orient themselves within the site and move between pages. {% include components/header.html %} -{% include components/primarynav.html %} - {% include components/sidenav.html %} {% include components/footers.html %} diff --git a/_includes/code-previews/components/accordions.html b/_includes/code-previews/components/accordions.html deleted file mode 100644 index e69de29bb..000000000 diff --git a/_includes/code/components/accordions-code.html b/_includes/code/components/accordions-code.html new file mode 100644 index 000000000..19b3c32c6 --- /dev/null +++ b/_includes/code/components/accordions-code.html @@ -0,0 +1,49 @@ +{% capture code_preview %} +
Borderless
+
+ +
+ +
Bordered
+
+ +
+{% endcapture %} diff --git a/_includes/code/components/alerts-code.html b/_includes/code/components/alerts-code.html new file mode 100644 index 000000000..7ebb3fd10 --- /dev/null +++ b/_includes/code/components/alerts-code.html @@ -0,0 +1,79 @@ +{% capture code_preview %} +
+
+

Success Status

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

+
+
+ +
+
+

Warning Status

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

+
+
+ + + +
+
+

Information Status

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

+
+
+ +
+
+

Information Status

+

Multi line. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui atione voluptatem sequi nesciunt. Neque porro quisquam est, qui doloremipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

+
+
+ +
+
+ +
+
+

Information Status

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

+
+
+{% endcapture %} + +{% capture uikit-php %} +// render unescaped HTML string +echo SAMUIKit\Other::alert($config); +{% endcapture %} + +{% capture uikit-js %} +// render unescaped HTML string +... + +{% endcapture %} + +{% capture uikit-docs %} +

Alerts

+
Required keys
+ + +
Optional keys
+ +{% endcapture %} diff --git a/_includes/code/components/footers-code.html b/_includes/code/components/footers-code.html new file mode 100644 index 000000000..07cddf50a --- /dev/null +++ b/_includes/code/components/footers-code.html @@ -0,0 +1,270 @@ +{% capture code_preview %} + + + + + + + + + + + + + ' +{% endcapture %} + +{% capture uikit-php %} +// render unescaped HTML string +echo SAMUIKit\Other::footer($config) +{% endcapture %} + +{% capture uikit-js %} +... +{% endcapture %} + +{% capture uikit-docs %} +

Footers

+
Required keys
+ +
Optional keys
+ +
Logo required keys
+ +
Social optional keys
+ +
Section required keys
+ +{% endcapture %} diff --git a/_includes/code/components/header-code.html b/_includes/code/components/header-code.html new file mode 100644 index 000000000..497817217 --- /dev/null +++ b/_includes/code/components/header-code.html @@ -0,0 +1,34 @@ +{% capture code_preview %} +
+
+
+
+
+
+ +
+ MENU +
+
+ +
+ +
+
+
+
+{% endcapture %} diff --git a/_includes/code/components/sidenav-code.html b/_includes/code/components/sidenav-code.html new file mode 100644 index 000000000..3a51aad09 --- /dev/null +++ b/_includes/code/components/sidenav-code.html @@ -0,0 +1,118 @@ +{% capture code_preview %} +
Single level
+ +
+ +
+ +
Two levels
+ +
+ +
+ +
Three levels
+ +
+ +
+{% endcapture %} + +{% capture uikit-docs %} +

Side navigation

+
Required keys
+ +
Menu required keys
+ +
Menu optional keys
+ +{% endcapture %} diff --git a/_includes/code/main.html b/_includes/code/main.html new file mode 100644 index 000000000..19f983f82 --- /dev/null +++ b/_includes/code/main.html @@ -0,0 +1,46 @@ +
+{{ code_preview }} +
+ +
+ +
diff --git a/_includes/code/template-code.html b/_includes/code/template-code.html new file mode 100644 index 000000000..1f40297e4 --- /dev/null +++ b/_includes/code/template-code.html @@ -0,0 +1,24 @@ +{% capture code_preview %} + +The HTML for the element and its variations. + +{% endcapture %} + +{% capture uikit-php %} + +The PHP UI kit function call and at least one fully configured example. + +{% endcapture %} + +{% capture uikit-js %} + +The JavaScript UI kit function call and at least one fully configured example. + +{% endcapture %} + +{% capture uikit-docs %} +

[[ element name ]]

+
Required keys
+ +
Optional keys
+{% endcapture %} diff --git a/_includes/components/accordions.html b/_includes/components/accordions.html index 1365f5e86..b78755601 100644 --- a/_includes/components/accordions.html +++ b/_includes/components/accordions.html @@ -1,100 +1,16 @@ -

See US Web Design Standards for details regarding when to use this element.

- -

Note: If the accordion content contains a list, at present, the list can only be one level deep for proper styling.

-
- -
Borderless
-
- -
- -
Bordered
-
- -
-
+{% include code/components/accordions-code.html %} +{% include code/main.html %} -
+
diff --git a/_includes/components/alerts.html b/_includes/components/alerts.html index b34e6e74c..abff76029 100644 --- a/_includes/components/alerts.html +++ b/_includes/components/alerts.html @@ -1,5 +1,3 @@ -

See US Web Design Standards for details regarding when to use this component.

-

Extension of the US Web Design Standards

@@ -7,95 +5,17 @@

Extension of the US Web Design Standards

-
- -
-
-

Success Status

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

-
-
- -
-
-

Warning Status

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

-
-
- - - -
-
-

Information Status

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

-
-
- -
-
-

Information Status

-

Multi line. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui atione voluptatem sequi nesciunt. Neque porro quisquam est, qui doloremipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

-
-
+{% include code/components/alerts-code.html %} +{% include code/main.html %} -
-
- -
-
-

Information Status

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

-
-
-
- - -
+
  • - - -
    • -
  • - - -
    • -
  • - -
diff --git a/_includes/components/footers.html b/_includes/components/footers.html index 0145ad7e1..9b68fff48 100644 --- a/_includes/components/footers.html +++ b/_includes/components/footers.html @@ -1,259 +1,14 @@

Footers

-

See US Web Design Standards for details regarding when to use this element.

- -
- - - - - - - - - - - - -
- -
-
    -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
+{% include code/components/footers-code.html %} +{% include code/main.html %} + +
+ +
+

See US Web Design Standards for details regarding when to use this element.

+
diff --git a/_includes/components/header.html b/_includes/components/header.html index 9c9b31386..e6566eb4e 100644 --- a/_includes/components/header.html +++ b/_includes/components/header.html @@ -9,42 +9,8 @@

Extension of the US Web Design Standards

-
-
- -
-
    -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
-
+{% include code/components/header-code.html %} +{% include code/main.html %}
- - -
  • - - -
    • -
  • - -
    • diff --git a/_includes/site-navigation/navside-components.html b/_includes/site-navigation/navside-components.html index 40818c763..1ade00ec8 100644 --- a/_includes/site-navigation/navside-components.html +++ b/_includes/site-navigation/navside-components.html @@ -16,9 +16,6 @@
  • Header
    • -
  • - Primary navigation -
  • Side navigation