mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-01-17 21:08:13 +01:00
Documented drawer
This commit is contained in:
Angelos Chalaris
parent
128cdae044
commit
87f5e6a3d2
@ -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: `<p>The drawer component of <strong>mini.css</strong> 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:</p>
|
||||
<ul><li>To create a drawer, simply create a checkbox input, applying the appropriate class to it (<code>.drawer</code>), immediately followed by a container of your liking (e.g. a <code><div></code> or <code><nav></code>). The former serves as your drawer's control, while the latter is the actual drawer container.</li>
|
||||
<li>Create a label anywhere outside your drawer's container for the checkbox controlling your drawer, applying the appropriate class (<code>.drawer-toggle</code>). This will serve as the toggle button for your drawer menu.</li>
|
||||
<li>Finally, inside your drawer's container, add another label for the checkbox controlling your drawer, applying the appropriate class (<code>.drawer-close</code>). This will serve as the close button for your drawer menu.</li>
|
||||
</ul>`,
|
||||
example: `<div style="height: 8rem; position: relative; text-align: center;"><br>
|
||||
<style>.drawer + .demo { position: absolute; height: 8rem; z-index: 0; top: 0; right: calc(0rem - 320px - 0.5rem); padding: 0.5rem; text-align: left;} [type="checkbox"]:checked.drawer + .demo { z-index: 1001; margin-right: 0.5rem;}</style>
|
||||
<label for="demo-toggle" class="button drawer-toggle persistent doc"></label>
|
||||
<input type="checkbox" id="demo-toggle" class="drawer persistent"> <div class="demo doc">
|
||||
<label for="demo-toggle" class="drawer-close doc"></label><a href="#" class="doc">Home</a><br/> <a href="#" class="doc">News</a><br/>
|
||||
<a href="#" class="doc">About</a><br/> <a href="#" class="doc">Contact</a><br/></div>
|
||||
</div>`,
|
||||
samples: [
|
||||
`<pre><span class="code-line"><span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"drawer-control"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"drawer-toggle"</span><span class="highlight-a">></label></span></span>
|
||||
<span class="code-line"></span>
|
||||
<span class="code-line"><span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"checkbox"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"drawer-control"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"drawer"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><div></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"drawer-control"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"drawer-close"</span><span class="highlight-a">></label></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><a</span> <span class="highlight-b">href</span>=<span class="highlight-c">"#"</span><span class="highlight-a">></span>Home<span class="highlight-a"></a></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></div></span></span></pre>`
|
||||
],
|
||||
notes: [
|
||||
`Drawer menus are responsive by default and will expand into normal containers on screens larger or equal to <code>768px</code> 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: `<p>If you want your drawer menus to not expand into normal containers on larger screens, simply add the appropriate modifier (<code>.persistent</code>) on the checkbox controlling the drawer and its toggle button.</p>`,
|
||||
example: ``,
|
||||
samples: [
|
||||
`<pre><span class="code-line"><span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"drawer-control"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"drawer-toggle persistent"</span><span class="highlight-a">></label></span></span>
|
||||
<span class="code-line"></span>
|
||||
<span class="code-line"><span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"checkbox"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"drawer-control"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"drawer persistent"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><div></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"drawer-control"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"drawer-close"</span><span class="highlight-a">></label></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><a</span> <span class="highlight-b">href</span>=<span class="highlight-c">"#"</span><span class="highlight-a">></span>Home<span class="highlight-a"></a></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></div></span></span></pre>`
|
||||
]
|
||||
}
|
||||
],
|
||||
dos: [
|
||||
{
|
||||
description: `You can combine the drawer menu with the <a href="#grid">grid system</a> to create responsive menus that are part of the layout of your web app.`,
|
||||
sample: `<pre><span class="code-line"><span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"row"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"checkbox"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"drawer-control"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"drawer"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"col-md-4"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"drawer-control"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"drawer-close"</span><span class="highlight-a">></label></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><a</span> <span class="highlight-b">href</span>=<span class="highlight-c">"#"</span><span class="highlight-a">></span>Home<span class="highlight-a"></a></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"></div></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"col-sm-12 col-md-8"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><p></span>Page content<span class="highlight-a"></p></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"></div></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></div></span></span></pre>`
|
||||
}
|
||||
],
|
||||
donts: [
|
||||
{
|
||||
description: `You should not place anything between the checkbox controlling the drawer and the container.`,
|
||||
sample: `<pre><span class="code-line"><span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"checkbox"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"drawer-control"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"drawer"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"><span class="highlight-c"><!-- Do not place other stuff between these --></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><div></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"drawer-control"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"drawer-close"</span><span class="highlight-a">></label></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><a</span> <span class="highlight-b">href</span>=<span class="highlight-c">"#"</span><span class="highlight-a">></span>Home<span class="highlight-a"></a></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></div></span></span></pre>`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
/*
|
||||
Modifiers:
|
||||
{
|
||||
title : '',
|
||||
description: '',
|
||||
example: '',
|
||||
samples: []
|
||||
}
|
||||
Dos/Donts:
|
||||
{
|
||||
description: '',
|
||||
sample: ''
|
||||
}
|
||||
*/
|
||||
|
||||
@ -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`.
|
||||
|
||||
@ -557,12 +557,49 @@
|
||||
<div class="section double-padded"><h3>Customization</h3><ul><li>Text color for the footer can be changed by changing the value of the <code>--footer-fore-color</code> variable.</li><li>Background color for the footer can be changed by changing the value of the <code>--footer-back-color</code> variable.</li><li>Border color for the footer can be changed by changing the value of the <code>--footer-border-color</code> variable.</li><li>Text color for links inside the footer can be changed by changing the value of the <code>--footer-link-color</code> variable.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li></ul></div>
|
||||
</div><br/><div id="drawer" class="card fluid">
|
||||
<h2 class="section double-padded">Menu drawer</h2>
|
||||
<div class="section"></div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="section"><p>The drawer component of <strong>mini.css</strong> 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:</p>
|
||||
<ul><li>To create a drawer, simply create a checkbox input, applying the appropriate class to it (<code>.drawer</code>), immediately followed by a container of your liking (e.g. a <code><div></code> or <code><nav></code>). The former serves as your drawer's control, while the latter is the actual drawer container.</li>
|
||||
<li>Create a label anywhere outside your drawer's container for the checkbox controlling your drawer, applying the appropriate class (<code>.drawer-toggle</code>). This will serve as the toggle button for your drawer menu.</li>
|
||||
<li>Finally, inside your drawer's container, add another label for the checkbox controlling your drawer, applying the appropriate class (<code>.drawer-close</code>). This will serve as the close button for your drawer menu.</li>
|
||||
</ul></div>
|
||||
<div class="section"><h3>Example</h3><div style="height: 8rem; position: relative; text-align: center;"><br>
|
||||
<style>.drawer + .demo { position: absolute; height: 8rem; z-index: 0; top: 0; right: calc(0rem - 320px - 0.5rem); padding: 0.5rem; text-align: left;} [type="checkbox"]:checked.drawer + .demo { z-index: 1001; margin-right: 0.5rem;}</style>
|
||||
<label for="demo-toggle" class="button drawer-toggle persistent doc"></label>
|
||||
<input type="checkbox" id="demo-toggle" class="drawer persistent"> <div class="demo doc">
|
||||
<label for="demo-toggle" class="drawer-close doc"></label><a href="#" class="doc">Home</a><br/> <a href="#" class="doc">News</a><br/>
|
||||
<a href="#" class="doc">About</a><br/> <a href="#" class="doc">Contact</a><br/></div>
|
||||
</div></div>
|
||||
<div class="section double-padded"><h3>Sample code</h3><pre><span class="code-line"><span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"drawer-control"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"drawer-toggle"</span><span class="highlight-a">></label></span></span>
|
||||
<span class="code-line"></span>
|
||||
<span class="code-line"><span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"checkbox"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"drawer-control"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"drawer"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><div></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"drawer-control"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"drawer-close"</span><span class="highlight-a">></label></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><a</span> <span class="highlight-b">href</span>=<span class="highlight-c">"#"</span><span class="highlight-a">></span>Home<span class="highlight-a"></a></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></div></span></span></pre></div>
|
||||
<div class="section double-padded"><h3>Modifiers</h3>
|
||||
<h4>Persistent drawer</h4><p>If you want your drawer menus to not expand into normal containers on larger screens, simply add the appropriate modifier (<code>.persistent</code>) on the checkbox controlling the drawer and its toggle button.</p><h5>Sample code</h5><pre><span class="code-line"><span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"drawer-control"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"drawer-toggle persistent"</span><span class="highlight-a">></label></span></span>
|
||||
<span class="code-line"></span>
|
||||
<span class="code-line"><span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"checkbox"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"drawer-control"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"drawer persistent"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><div></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"drawer-control"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"drawer-close"</span><span class="highlight-a">></label></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><a</span> <span class="highlight-b">href</span>=<span class="highlight-c">"#"</span><span class="highlight-a">></span>Home<span class="highlight-a"></a></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></div></span></span></pre></div>
|
||||
<div class="section double-padded"><h3>Best practices</h3><div class="row dodos"><div class="col-sm-12 col-md-6"><pre><span class="code-line"><span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"row"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"checkbox"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"drawer-control"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"drawer"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"col-md-4"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"drawer-control"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"drawer-close"</span><span class="highlight-a">></label></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><a</span> <span class="highlight-b">href</span>=<span class="highlight-c">"#"</span><span class="highlight-a">></span>Home<span class="highlight-a"></a></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"></div></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><div</span> <span class="highlight-b">class</span>=<span class="highlight-c">"col-sm-12 col-md-8"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><p></span>Page content<span class="highlight-a"></p></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"></div></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></div></span></span></pre></div><div class="col-sm-12 col-md-6"><p><mark class="do">Do:</mark> You can combine the drawer menu with the <a href="#grid">grid system</a> to create responsive menus that are part of the layout of your web app.</p></div></div><div class="row dodos"><div class="col-sm-12 col-md-6"><pre><span class="code-line"><span class="highlight-a"><input</span> <span class="highlight-b">type</span>=<span class="highlight-c">"checkbox"</span> <span class="highlight-b">id</span>=<span class="highlight-c">"drawer-control"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"drawer"</span><span class="highlight-a">></span></span>
|
||||
<span class="code-line"><span class="highlight-c"><!-- Do not place other stuff between these --></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><div></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><label</span> <span class="highlight-b">for</span>=<span class="highlight-c">"drawer-control"</span> <span class="highlight-b">class</span>=<span class="highlight-c">"drawer-close"</span><span class="highlight-a">></label></span></span>
|
||||
<span class="code-line"> <span class="highlight-a"><a</span> <span class="highlight-b">href</span>=<span class="highlight-c">"#"</span><span class="highlight-a">></span>Home<span class="highlight-a"></a></span></span>
|
||||
<span class="code-line"><span class="highlight-a"></div></span></span></pre></div><div class="col-sm-12 col-md-6"><p><mark class="dont">Don't:</mark> You should not place anything between the checkbox controlling the drawer and the container.</p></div></div></div>
|
||||
<div class="section double-padded"><h3>Notes</h3><ul><li>Drawer menus are responsive by default and will expand into normal containers on screens larger or equal to <code>768px</code> wide.</li><li>It is highly recommended to place your drawer's toggle button inside your web app's header element.</li><li>You can combine the navigation bar element with the drawer menu for better results.</li><li>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.</li></ul></div>
|
||||
|
||||
</div></main>
|
||||
</div></div></body></html>
|
||||
Loading…
x
Reference in New Issue
Block a user