From 2a1b3ece2131b95025749ef8a23a384dc09e6c57 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Sun, 19 Nov 2017 12:11:11 +0200 Subject: [PATCH] Documented drawer --- docs/doc-fragments/drawer.js | 93 +++++++++++++++++++++++++++--------- docs/v3/DEVLOG.md | 1 + docs/v3/docs.html | 49 ++++++++++++++++--- 3 files changed, 114 insertions(+), 29 deletions(-) diff --git a/docs/doc-fragments/drawer.js b/docs/doc-fragments/drawer.js index 4552809..af00a98 100644 --- a/docs/doc-fragments/drawer.js +++ b/docs/doc-fragments/drawer.js @@ -1,28 +1,75 @@ module.exports = { id: 'drawer', title: 'Menu drawer', - keywords: [], - description: '', - example: '', - samples: [], - notes: [], + keywords: [`drawer`, `checkbox`, `toggle`, `close`, `drawer-toggle`, `drawer-close`, `menu`, `navigation`, `hamburger`], + description: `

The drawer component of mini.css is used to create responsive navigation menus for your web apps. It is composed of three components - the drawer, the toggle button and the close button:

+ `, + example: `

+ + +
+ Home
News
+ About
Contact
+
`, + samples: [ + `
<label for="drawer-control" class="drawer-toggle"></label>
+
+<input type="checkbox" id="drawer-control" class="drawer">
+<div>
+  <label for="drawer-control" class="drawer-close"></label>
+  <a href="#">Home</a>
+</div>
` + ], + notes: [ + `Drawer menus are responsive by default and will expand into normal containers on screens larger or equal to 768px wide.`, + `It is highly recommended to place your drawer's toggle button inside your web app's header element.`, + `You can combine the navigation bar element with the drawer menu for better results.`, + `Remember to apply the appropriate classes to any and all elements, as indicated in the examples. Failing to do so will result in the drawer menu not rendering or behaving properly.` + ], customization: [], - modifiers: [], - dos: [], - donts: [] + modifiers: [ + { + title : `Persistent drawer`, + description: `

If you want your drawer menus to not expand into normal containers on larger screens, simply add the appropriate modifier (.persistent) on the checkbox controlling the drawer and its toggle button.

`, + example: ``, + samples: [ + `
<label for="drawer-control" class="drawer-toggle persistent"></label>
+
+<input type="checkbox" id="drawer-control" class="drawer persistent">
+<div>
+  <label for="drawer-control" class="drawer-close"></label>
+  <a href="#">Home</a>
+</div>
` + ] + } + ], + dos: [ + { + description: `You can combine the drawer menu with the grid system to create responsive menus that are part of the layout of your web app.`, + sample: `
<div class="row">
+  <input type="checkbox" id="drawer-control" class="drawer">
+  <div class="col-md-4">
+    <label for="drawer-control" class="drawer-close"></label>
+    <a href="#">Home</a>
+  </div>
+  <div class="col-sm-12 col-md-8">
+    <p>Page content</p>
+  </div>
+</div>
` + } + ], + donts: [ + { + description: `You should not place anything between the checkbox controlling the drawer and the container.`, + sample: `
<input type="checkbox" id="drawer-control" class="drawer">
+<!-- Do not place other stuff between these -->
+<div>
+  <label for="drawer-control" class="drawer-close"></label>
+  <a href="#">Home</a>
+</div>
` + } + ] } - -/* - Modifiers: - { - title : '', - description: '', - example: '', - samples: [] - } - Dos/Donts: - { - description: '', - sample: '' - } -*/ diff --git a/docs/v3/DEVLOG.md b/docs/v3/DEVLOG.md index c5db124..d7c5219 100644 --- a/docs/v3/DEVLOG.md +++ b/docs/v3/DEVLOG.md @@ -179,3 +179,4 @@ - Cleaned up certain parts of the docs just a little bit. - Documented `button` elements and input grouping. - Documented `header`, `footer` and `nav`. +- Documented `drawer`. diff --git a/docs/v3/docs.html b/docs/v3/docs.html index 4393931..7990491 100644 --- a/docs/v3/docs.html +++ b/docs/v3/docs.html @@ -557,12 +557,49 @@

Customization


Menu drawer

-
- - - - - +

The drawer component of mini.css is used to create responsive navigation menus for your web apps. It is composed of three components - the drawer, the toggle button and the close button:

+
  • To create a drawer, simply create a checkbox input, applying the appropriate class to it (.drawer), immediately followed by a container of your liking (e.g. a <div> or <nav>). The former serves as your drawer's control, while the latter is the actual drawer container.
    • +
  • Create a label anywhere outside your drawer's container for the checkbox controlling your drawer, applying the appropriate class (.drawer-toggle). This will serve as the toggle button for your drawer menu.
    • +
  • Finally, inside your drawer's container, add another label for the checkbox controlling your drawer, applying the appropriate class (.drawer-close). This will serve as the close button for your drawer menu.
    • +
+

Example


+ + +
+ Home
News
+ About
Contact
+
+

Sample code

<label for="drawer-control" class="drawer-toggle"></label>
+
+<input type="checkbox" id="drawer-control" class="drawer">
+<div>
+  <label for="drawer-control" class="drawer-close"></label>
+  <a href="#">Home</a>
+</div>
+

Modifiers

+

Persistent drawer

If you want your drawer menus to not expand into normal containers on larger screens, simply add the appropriate modifier (.persistent) on the checkbox controlling the drawer and its toggle button.

Sample code
<label for="drawer-control" class="drawer-toggle persistent"></label>
+
+<input type="checkbox" id="drawer-control" class="drawer persistent">
+<div>
+  <label for="drawer-control" class="drawer-close"></label>
+  <a href="#">Home</a>
+</div>
+

Best practices

<div class="row">
+  <input type="checkbox" id="drawer-control" class="drawer">
+  <div class="col-md-4">
+    <label for="drawer-control" class="drawer-close"></label>
+    <a href="#">Home</a>
+  </div>
+  <div class="col-sm-12 col-md-8">
+    <p>Page content</p>
+  </div>
+</div>

Do: You can combine the drawer menu with the grid system to create responsive menus that are part of the layout of your web app.

<input type="checkbox" id="drawer-control" class="drawer">
+<!-- Do not place other stuff between these -->
+<div>
+  <label for="drawer-control" class="drawer-close"></label>
+  <a href="#">Home</a>
+</div>

Don't: You should not place anything between the checkbox controlling the drawer and the container.

+

Notes

  • Drawer menus are responsive by default and will expand into normal containers on screens larger or equal to 768px wide.
  • It is highly recommended to place your drawer's toggle button inside your web app's header element.
  • You can combine the navigation bar element with the drawer menu for better results.
  • Remember to apply the appropriate classes to any and all elements, as indicated in the examples. Failing to do so will result in the drawer menu not rendering or behaving properly.
\ No newline at end of file