mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-22 13:33:03 +02:00
Code Issues Releases Wiki Activity

Quick reference for drawer

Browse Source 
Updated quick reference with the requred documentation for the .drawer component.
This commit is contained in:
Angelos Chalaris
2017-05-12 12:50:05 +03:00
parent 6dd6194d77
commit 4a564505af
11 changed files with 145 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/navigation.html
View File

@@ -237,7 +237,7 @@
<p>Drawers are responsive and will expand into normal containers on larger screens. If you want to avoid this, add the <code>.persistent</code> class to both your <code>.drawer-toggle</code> and <code>.drawer</code> elements. You can also change the position of the drawer from the left side of the screen to the right by applying the <code>.right</code> class to your <code>.drawer</code> element.</p>
<h3>Sample code</h3>
<pre>&lt;header&gt;
&lt;label for=&quot;drawer-checkbox&quot; class=&quot;button&quot;&gt;&lt;/label&gt;
&lt;label for=&quot;drawer-checkbox&quot; class=&quot;button drawer-toggle&quot;&gt;&lt;/label&gt;
&lt;/header&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;drawer-checkbox&quot;&gt;
@@ -255,10 +255,10 @@
</ul><hr>
<div class="row">
<div class="col-sm-12 col-md-6">
<pre>&lt;div class=&quot;drawer&quot;&gt;
<pre>&lt;nav class=&quot;drawer&quot;&gt;
&lt;label for=&quot;drawer-checkbox&quot; class=&quot;close&quot;&gt;&lt;/label&gt;
&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;
&lt;/div&gt;</pre>
&lt;/nav&gt;</pre>
<p class="do"><mark class="tertiary">Do:</mark>&nbsp;You can apply the <code>.drawer</code> class to a <code>&lt;nav&gt;</code> element, effectively making your page's navigation menu collapse on smaller screen sizes.</p>
</div>
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">

29
docs/quick_reference.html
View File

@@ -535,6 +535,35 @@
<li>Combine the navigation bar with grid reordering to display aside from text on larger displays or at the bottom on smaller displays</li>
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Drawer <a href="https://codepen.io/chalarangelo/pen/JNvPrB" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre>&lt;header&gt;
&lt;label for=&quot;drawer-checkbox&quot; class=&quot;button drawer-toggle&quot;&gt;&lt;/label&gt;
&lt;/header&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;drawer-checkbox&quot;&gt;
&lt;div class=&quot;drawer&quot;&gt;
&lt;label for=&quot;drawer-checkbox&quot; class=&quot;close&quot;&gt;&lt;/label&gt;
&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;
&lt;/div&gt;</pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li>Structure as follows:<ol>
<li><code>&lt;label&gt;</code> element with the <code>.drawer-toggle</code> class in the <code>&lt;header&gt;</code> element, linked to the <code class="fore-secondary">id</code> of the <code>&lt;input <span class="fore-secondary">type</span>="<span class="fore-primary">checkbox</span>"&gt;</code> used to toggle the drawer component</li>
<li><code>&lt;input <span class="fore-secondary">type</span>="<span class="fore-primary">checkbox</span>"&gt;</code> element with a unique <code class="fore-secondary">id</code></li>
<li><code>&lt;div&gt;</code> element with the <code>.drawer</code> class immediately after the <code>&lt;input <span class="fore-secondary">type</span>="<span class="fore-primary">checkbox</span>"&gt;</code></li>
<li>Empty <code>&lt;label&gt;</code> element with the <code>.close</code> class inside the <code>.drawer</code>, linked to the <code class="fore-secondary">id</code> of the <code>&lt;input <span class="fore-secondary">type</span>="<span class="fore-primary">checkbox</span>"&gt;</code></li>
</ol></li>
<li>Drawers are left-aligned and expand on non-mobile screen sizes by default</li>
<li>Use <code>.right</code> to create right-aligned drawers or <code>.persistent</code> for non-responsive drawers.</li>
<li>Apply the <code>.drawer</code> class on a navigation bar and combine with grid classes for best results</li>
<li>Use the syntax exactly as presented in the examples, do not add elements between the checkbox and the container</li>
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">

4
docs/v2/DEVLOG.md
View File

@@ -1146,12 +1146,10 @@
- Tested `.drawer` on the `modules.html` page, it seems to work pretty well.
- Documented `.drawer` component, updated descriptions wherever possible, the customization documentation will be added in later.
- *TODO* list for tomorrow (before release):
- Update customization documentation for `.drawer`.
- Update flavors to use the new `.drawer` component, rebuild.
- Update all navigation menus on all pages to use both the `.drawer` and show the new menus.
- Update all flavors to work with new components etc.
- Update all flavor demos.
- Create codepen for `.drawer`, new section in `quick_reference`.
- Look into updating the templates.
## 20170512
@@ -1159,3 +1157,5 @@
- `$include-drawer` is now a *hidden* flag.
- Updated `.drawer` to include a `$drawer-box-shadow` just in case.
- Updated customization for the new `.drawer` component.
- Updated `mini-default`, `mini-lite` and `mini-dark` for the new `.drawer` component, the other two flavors will be updated later today.
- Updated `quick_reference` for `.drawer`, added a codepen for the component.