beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Updated navigation documentation

Browse source 
Added documentation for the drawer component in certain pages.
This commit is contained in:
Angelos Chalaris 2017-05-12 01:03:38 +03:00
parent a4a1e84a7c
commit 7b3bea996e
9 changed files with 96 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
dist/mini-default.css vendored
View file

@ -1167,7 +1167,7 @@ footer.sticky {
.drawer {
display: block;
box-sizing: border-box;
position: absolute;
position: fixed;
top: 0;
width: 320px;
height: 100vh;
@ -1191,7 +1191,7 @@ footer.sticky {
.drawer .close {
position: absolute;
top: 0.25rem;
top: 0.75rem;
right: 0.25rem;
z-index: 1111;
padding: 0;
@ -1206,7 +1206,8 @@ footer.sticky {
@media screen and (min-width: 768px) {
.drawer:not(.persistent) {
position: static;
height: calc(100vh - 3rem);
height: 100%;
z-index: 1100;
}
.drawer-toggle:not(.persistent) {
display: none;

2
dist/mini-default.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
docs/customization/navigation.html
View file

@ -81,7 +81,7 @@
<div class="card fluid">
<div class="section">
<h2>Quick overview</h2>
<p>Menus and navigation are some of the most important elements for any website or web app and their design and ease-of-use are key factors that can determine a page's bounce rates. The <strong>navigation</strong> module takes a step back from all the complicated menu and navigation design paradigms of the modern web, like dropdown menus and hamburger buttons, and tries to reinvent the basics for page navigation using HTML5 elements (i.e. <code>header</code>, <code>nav</code> and <code>footer</code>) and make navigation fully accessible for screen readers. Instead of sticking to either horizontal navigation menus (headers) or vertical menus (sidebars), we opted to allow the use of both for different things. Header menus are designed to stand out and contain links to help users find new content, whereas vertical navigation aims to provide a more traditional navigation menu that maps out your website's structure. Finally, footers are also part of the <strong>navigation</strong> module, as they can often provide the user with useful information and/or links that are very important to enhancing their experience.</p><br>
<p>Menus and navigation are some of the most important elements for any website or web app and their design and ease-of-use are key factors that can determine a page's bounce rates. The <strong>navigation</strong> module takes a step back from the complicated menu and navigation design paradigms of the modern web, using HTML5 elements (i.e. <code>header</code>, <code>nav</code> and <code>footer</code>) for basic navigation, while providing fully accessibility for screen readers. Apart from the simple horizontal navigation (headers) and vertical menus (sidebars), we opted to add a responsive slide-in drawer menu that works well with any page layout. Finally, footers are also part of the <strong>navigation</strong> module, as they can often provide the user with useful information and/or links that are very important to enhancing their experience.</p><br>
</div>
<div class="section">
<h2>Quick start</h2>

2
docs/mini-default.min.css vendored
View file

File diff suppressed because one or more lines are too long

13
docs/modules.html
View file

@ -18,18 +18,21 @@
#header-logo { background: -webkit-linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); background: linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); line-height:1; font-size: 39px; width: 48px; height: 48px; padding: 8px; margin-left: -9px; }
.box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;} .box-colored.red { background: #e53935; }
.box-centered .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto; } [class^='col-'] .box-left { text-align: left; } li a { text-decoration: none; } h2.section + div.section.box-left { height: 100%; }
@media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
</style>
</head>
<body>
<header class="sticky">
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
<a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="templates.html" class="button">Templates</a> <a href="customization/index.html" class="button">Customization</a>
<a href="quick_reference.html" class="button">Quick Reference</a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <div class="col-sm-12 col-md-4 col-lg-2 hidden-sm" style="padding: 0;"> <nav>
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<h4 style="text-align: center">Modules</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
@ -63,7 +66,7 @@
<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a> <br/>
</nav> </div>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;">
<div class="col-sm-12">

68
docs/navigation.html
View file

@ -86,7 +86,7 @@
<div class="card fluid">
<div class="section">
<h2>Quick overview</h2>
<p>Menus and navigation are some of the most important elements for any website or web app and their design and ease-of-use are key factors that can determine a page's bounce rates. The <strong>navigation</strong> module takes a step back from all the complicated menu and navigation design paradigms of the modern web, like dropdown menus and hamburger buttons, and tries to reinvent the basics for page navigation using HTML5 elements (i.e. <code>header</code>, <code>nav</code> and <code>footer</code>) and make navigation fully accessible for screen readers. Instead of sticking to either horizontal navigation menus (headers) or vertical menus (sidebars), we opted to allow the use of both for different things. Header menus are designed to stand out and contain links to help users find new content, whereas vertical navigation aims to provide a more traditional navigation menu that maps out your website's structure. Finally, footers are also part of the <strong>navigation</strong> module, as they can often provide the user with useful information and/or links that are very important to enhancing their experience.</p><br>
<p>Menus and navigation are some of the most important elements for any website or web app and their design and ease-of-use are key factors that can determine a page's bounce rates. The <strong>navigation</strong> module takes a step back from the complicated menu and navigation design paradigms of the modern web, using HTML5 elements (i.e. <code>header</code>, <code>nav</code> and <code>footer</code>) for basic navigation, while providing fully accessibility for screen readers. Apart from the simple horizontal navigation (headers) and vertical menus (sidebars), we opted to add a responsive slide-in drawer menu that works well with any page layout. Finally, footers are also part of the <strong>navigation</strong> module, as they can often provide the user with useful information and/or links that are very important to enhancing their experience.</p><br>
</div>
<div class="section">
<h2>Quick start</h2>
@ -207,6 +207,72 @@
</div>
</div>
</div>
</div>
<div class="row" id="drawer">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Drawer</h2></div>
<div class="section row">
<div class="col-sm-12 col-sm-last col-md-12 col-md-normal">
<div style="height: 15rem;"><br>
<style>.drawer.demo { position: absolute; height: 15rem; z-index: 0; top: 6.625rem; height: 12.5rem;} [type="checkbox"]:checked + .drawer.demo { z-index: 1001; margin-left: 0.75rem;}</style>
<header><label for="demo-toggle" class="button drawer-toggle persistent"></label></header> <br>
<input type="checkbox" id="demo-toggle"> <nav class="drawer demo persistent">
<label for="demo-toggle" class="close"></label><a href="#">Home</a> <span>News</span>
<a href="#" class="sublink-1">New Courses</a> <a href="#" class="sublink-1">Certifications</a>
<span class="sublink-1">Events</span> <a href="#" class="sublink-2">Course Showcase - 12th, Dec</a>
<a href="#" class="sublink-2">Staff AMA - 16th, Dec</a> <a href="#" class="sublink-1">Policy Update</a>
<a href="#">About</a> <a href="#">Contact</a><br/></nav>
</div>
</div>
<div class="col-sm-12 col-sm-first col-md-12 col-md-normal">
<p>The drawer component is used to create responsive and collapsible navigation menus. To create the drawer system, follow the steps presented below:</p>
<ul>
<li>Inside your <code>&lt;header&gt;</code> element, add a <code>&lt;label&gt;</code> element with the <code>.drawer-toggle</code> class (remember to add the <code>.button</code> class to apply the necessary styles).</li>
<li>Create an <code>&lt;input <span class="fore-secondary">type</span>="<span class="fore-primary">checkbox</span>"&gt;</code> element. Give it an <code class="fore-secondary">id</code> to be able to link it to the necessary interactive elements.</li>
<li>Immediately after the previous <code>&lt;input <span class="fore-secondary">type</span>="<span class="fore-primary">checkbox</span>"&gt;</code>, create a <code>&lt;div&gt;</code> element with the <code>.drawer</code> class. This is where you will put your menu's contents.</li>
<li>Add an empty <code>&lt;label&gt;</code> element inside your <code>.drawer</code>, adding the <code>.close</code> class to it.</li>
<li>Finally, link the <code>.drawer-toggle</code> and <code>.close</code> elements to the <code class="fore-secondary">id</code> of your <code>&lt;input <span class="fore-secondary">type</span>="<span class="fore-primary">checkbox</span>"&gt;</code>.</li>
</ul>
<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;/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>
<div class="section">
<h3>Notes</h3>
<ul>
<li>The <code>.drawer</code> component can be easily and effectively combined with the <a href="grid.html"><strong>grid</strong></a> module's system and classes to create fully responsive navigation menus.</li>
<li>It's best to use the <code>.drawer</code> component in combination with a <code>&lt;header&gt;</code> element that has the <code>.sticky</code> class (check the last section of this page).</li>
</ul><hr>
<div class="row">
<div class="col-sm-12 col-md-6">
<pre>&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>
<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">
<pre>&lt;input type=&quot;checkbox&quot; id=&quot;drawer-checkbox&quot;&gt;
<span class="fore-secondary">&lt;!-- Other stuff here --&gt;</span>
&lt;div class=&quot;drawer&quot;&gt;
&lt;h3&gt;Bad drawer&lt;/h3&gt;
&lt;/div&gt;</pre>
<p class="dont"><mark class="secondary">Don't:</mark>&nbsp;The syntax and structure of the drawer container is very strict. Try to follow it exactly as described in this section.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" id="footer">
<div class="col-sm-12">

10
docs/v2/DEVLOG.md
View file

@ -1143,3 +1143,13 @@
- Fixed the `header` element bug that didn't allow them to work well with the `.row` class for responsive layouts. They should now display as expected.
- Disabled fluid typography by default, it needs more testing and the `14px` font in smaller screens doesn't sit well with me. The feature is still there for those who want it.
- Implemented `.drawer` component along with everything that it needs. Documentation pending.
- 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.

2
src/flavors/mini-default.scss
View file

@ -299,7 +299,7 @@ $drawer-toggle-font-size: 2.5rem; // Font size for the drawer component
$drawer-toggle-line-height:0.125; // Line height for the drawer component's toggle icon.
$drawer-toggle-top: 0.4375rem; // Top position for the drawer component's toggle icon.
$drawer-close-name: 'close'; // Class name of the close element for the drawer component.
$drawer-close-top: 0.25rem; // Top position of the drawer component's close icon.
$drawer-close-top: 0.75rem; // Top position of the drawer component's close icon.
$drawer-close-right: 0.25rem; // Right position of the drawer component's close icon.
// Notes:
// [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning

7
src/mini/_navigation.scss
View file

@ -233,7 +233,7 @@ footer {
.#{$drawer-name} {
display: block;
box-sizing: border-box;
position: absolute;
position: fixed;
top: 0;
width: $drawer-width;
height: 100vh;
@ -270,9 +270,8 @@ footer {
@media screen and (min-width: #{$drawer-mobile-breakpoint}){
.#{$drawer-name}:not(.#{$drawer-persistent}) {
position: static;
@if $drawer-normal-height != 100vh {
height: $drawer-normal-height;
}
height: 100%;
z-index: 1100;
}
.#{$drawer-toggle-name}:not(.#{$drawer-persistent}) {
display: none;