mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-30 00:59:58 +02:00
Code Issues Releases Wiki Activity

Complete documentation for table module

Browse Source
This commit is contained in:
Angelos Chalaris
2016-11-29 11:29:09 +02:00
parent c73922c24a
commit 594653e9e0
7 changed files with 340 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
docs/v2/navigation.html
View File

@@ -173,7 +173,7 @@
<span class="fore-secondary">&lt;!-- or --&gt;</span>
&lt;header&gt;
&lt;a href=&quot;#&quot; class=&quot;logo&quot;&gt;Logo&lt;/a&gt;
&lt;a href=&quot;#&quot;&gt;Link&lt;/a&gt;
&lt;a href=&quot;#&quot;&gt;Link&lt;/a&gt;
&lt;/header&gt;</pre>
<p class="dont"><mark class="secondary">Don't:</mark>&nbsp;The <code>.logo</code> element should not be a <code>&lt;button&gt;</code> or a <code>.button</code> element. On the other hand, links and labels in the <code>&lt;header&gt;</code> should not be without a <code>.button</code> class. Ignoring this rule might cause unexpected behavior.</p>
</div>
@@ -211,16 +211,16 @@
<p>To add vertical navigation to your websites, use the <code>&lt;nav&gt;</code> HTML element. Adding links is pretty simple, just use <code>&lt;a&gt;</code> elements, no lists or anything else required. In order to add subcategories to your vertical navigation, use any normal textual element as the title of the subcategory and follow it with its links as normal, adding the <code>.sublink-1</code> class to them. Similarly, you can create a subcategory with a depth of 2, using a similar structure and the <code>.sublink-2</code> class.</p>
<h3>Sample code</h3>
<pre>&lt;nav&gt;
&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;
&lt;span&gt;News&lt;/span&gt;
&lt;a href=&quot;#&quot; class=&quot;sublink-1&quot;&gt;New Courses&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;sublink-1&quot;&gt;Certifications&lt;/a&gt;
&lt;span class=&quot;sublink-1&quot;&gt;Events&lt;/span&gt;
&lt;a href=&quot;#&quot; class=&quot;sublink-2&quot;&gt;Course Showcase - 12th, Dec&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;sublink-2&quot;&gt;Staff AMA - 16th, Dec&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;sublink-1&quot;&gt;Policy Update&lt;/a&gt;
&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;
&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;
&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;
&lt;span&gt;News&lt;/span&gt;
&lt;a href=&quot;#&quot; class=&quot;sublink-1&quot;&gt;New Courses&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;sublink-1&quot;&gt;Certifications&lt;/a&gt;
&lt;span class=&quot;sublink-1&quot;&gt;Events&lt;/span&gt;
&lt;a href=&quot;#&quot; class=&quot;sublink-2&quot;&gt;Course Showcase - 12th, Dec&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;sublink-2&quot;&gt;Staff AMA - 16th, Dec&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;sublink-1&quot;&gt;Policy Update&lt;/a&gt;
&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;
&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;
&lt;/nav&gt;</pre>
</div>
</div>
@@ -234,9 +234,9 @@
<div class="row">
<div class="col-sm-12">
<pre>&lt;div class=&quot;col-sm-12 col-sm-last col-md-3 col-md-first&quot;&gt;
&lt;nav&gt;
<span class="fore-tertiary">&lt;!-- navigation content --&gt;</span>
&lt;/nav&gt;
&lt;nav&gt;
<span class="fore-tertiary">&lt;!-- navigation content --&gt;</span>
&lt;/nav&gt;
&lt;/div&gt;</pre>
<p class="do"><mark class="tertiary">Do:</mark>&nbsp;We strongly recommend using the <code>&lt;nav&gt;</code> element in combination with the <a href="grid.html"><strong>grid</strong> module</a> to make your layouts more responsive. For example, you could make your sidebar appear on the left side of your content in medium-sized and larger screens, but move to the very bottom of your content on smaller screens.</p>
</div>
@@ -265,7 +265,7 @@
<p>The <code>&lt;footer&gt;</code> element is used to create your page's footer. As normal, add the <code>&lt;footer&gt;</code> at or near the end of your <code>&lt;body&gt;</code> element and add content to it like you would otherwise.</p>
<h3>Sample code</h3>
<pre>&lt;footer&gt;
&lt;p&gt;&amp;copy; 2001-2016 Web Corporation | &lt;a href=&quot;#&quot;&gt;About&lt;/a&gt; | &lt;a href=&quot;#&quot;&gt;Terms of use&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&amp;copy; 2001-2016 Web Corporation | &lt;a href=&quot;#&quot;&gt;About&lt;/a&gt; | &lt;a href=&quot;#&quot;&gt;Terms of use&lt;/a&gt;&lt;/p&gt;
&lt;/footer&gt;</pre>
</div>
</div>