mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-23 05:52:51 +02:00
Code Issues Releases Wiki Activity

Modules page updated, modules page for Nite Owl created, NiteOwl flavor built

Browse Source
This commit is contained in:
Angelos Chalaris
2016-09-21 14:33:35 +03:00
parent 2e43bfe76f
commit c793cb9652
5 changed files with 3080 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
docs/modules.html
View File

@@ -65,13 +65,15 @@
<div class="col xs-no md-1"></div>
<div class="col xs-12 md-10">
<h1>mini.css<small> a minimal Sass-y responsive mobile-first style-agnostic CSS framework</small></h1>
<p>Below you can see each module in action, along with certain suggestions on how to add functionality to the various components. Bear in mind that this demo is for the <strong>Default</strong> flavor. Naming conventions may vary between flavors, however the structure and functionality of the modules should be the same. Please refer to specific flavors for those differences. The <strong>NiteOwl</strong> flavor uses the same naming conventions for the module components, so you won't have any trouble. If you are migrating from Bootstrap and want to use the <strong>Bootstrap</strong> flavor, most naming conventions are based on the original naming conventions of Bootstrap 3.3.7.</p><br>
<p>Below you can see each module in action, along with certain suggestions on how to add functionality to the various components. Bear in mind that this demo is for the <strong>Default</strong> flavor. Naming conventions may vary between flavors, however the structure and functionality of the modules should be the same. Please refer to specific flavors for those differences. The <strong><a href="https://chalarangelo.github.io/mini.css/modules-niteowl">NiteOwl</a></strong> flavor uses the same naming conventions for the module components, so you won't have any trouble. If you are migrating from Bootstrap and want to use the <strong>Bootstrap</strong> flavor, most naming conventions are based on the original naming conventions of Bootstrap 3.3.7.</p>
<p><strong>To use the Default flavor, add the following code inside your HTML page's <code>&lt;head&gt;</code> tag:</strong></p>
<pre style="overflow: auto;">&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/master/flavors/mini-default.min.css&quot;&gt;</pre><br>
<h2 id="base">Base</h2>
<p>The Base module contains customized typography rules, colors and most of the functionality provided in <a href="https://necolas.github.io/normalize.css/">normalize.css</a>. Below we showcase some of the most important typography styles.</p>
<h3>Fonts, sizes and colors</h3>
<p>The default flavor uses the <strong>Helvetica</strong> font family and a font-size of <strong>1em</strong> with a line-height of <strong>1.5</strong>. Colors used are <strong>#f5f5f5</strong> for the background and <strong>#222</strong> for the text. Most of the things in this module are subjective to one's preferences and should be changed according to your liking. Heading, <code>&lt;sub&gt;</code>, <code>&lt;sup&gt;</code> and <code>&lt;small&gt;</code> elements use multipliers, so changing the base font-size should affect those too. Apart from that, colors and styles for links can easily be changed, as well as a lot of other parameters. Images are responsive by default, so they will shrink to fit smaller viewports without any additional work. Below we highlight some important things, like heading and code styling, but you can see most of the typograhpy rules in action in these pages.</p>
<p>The default flavor uses the <strong>Helvetica</strong> font family and a font-size of <strong>1em</strong> with a line-height of <strong>1.5</strong>. Colors used are <strong>#f5f5f5</strong> for the background and <strong>#222</strong> for the text. Most of the things in this module are subjective to one's preferences and should be changed according to your liking. Heading, <code>&lt;sub&gt;</code>, <code>&lt;sup&gt;</code> and <code>&lt;small&gt;</code> elements use multipliers, so changing the base font-size should affect those too. Apart from that, colors and styles for links can easily be changed, as well as a lot of other parameters. Images are responsive by default, so they will shrink to fit smaller viewports without any additional work. Below we highlight some important things, like heading and code styling, but you can see most of the typography rules in action in these pages.</p>
<h3>Headings</h3>
<div class="panel"><h4 class="head">Example</h4>
@@ -516,7 +518,7 @@
<li>Use the <code>.modal</code> class on an <code>&lt;input type=&quot;checkbox&quot;&gt;</code>. <strong>Place this checkbox along with any other elements specified below at the very start of your <code>&lt;body&gt;</code>.</strong></li>
<li>Add a <code>&lt;div&gt;</code> right after the checkbox. Inside it add a second <code>&lt;div&gt;</code> with your modal dialog's contents, as well as a <code>&lt;label&gt;</code> for the checkbox <strong>without any content inside it.</strong> This label will act as the overlay behind the modal. If you do not want clicking the background to close the modal dialog, add the label without linking it to the checkbox.</li>
<li>If you have enabled close button support, you can add a <code>&lt;span class=&quot;close&quot;&gt;</code> inside a label for the checkbox in the innermost <code>&lt;div&gt;</code> to add a close button to the top right corner of your modal dialog.</li>
<li>Finally, add a label lining to the modal dialog's checkbox anywhere in your page. You can also toggle the modal using Javascript, by setting the checkbox's state to <code>checked</code>.</li>
<li>Finally, add a label linking to the modal dialog's checkbox anywhere in your page. You can also toggle the modal using Javascript, by setting the checkbox's state to <code>checked</code>.</li>
</ul>
<h3>Modal dialog example</h3>
@@ -543,7 +545,7 @@
<ul>
<li>Single collapse components can be created by adding the <code>.clps</code> class on an <code>&lt;input type=&quot;checkbox&quot;&gt;</code> element, followed by a <code>&lt;div&gt;</code> with the content to be hidden/shown based on the collapse's state.</li>
<li>Similarly, accordion collapse components can be created by adding the <code>.acrd</code> class to as many <code>&lt;input type=&quot;radio&quot;&gt;</code> elements as you want. You should add a <code>&lt;label&gt;</code> linking to each radio immediately after it, followed by a <code>&lt;div&gt;</code> with the content to be hidden/shown based on the accordion's state. </li>
<li>You can the single collapse component's styling for a set of radio buttons or the accordion's styling for a single checkbox if you would like to use a different styling for your collapse components without adding new CSS definitions.</li>
<li>You can use the single collapse component's styling for a set of radio buttons or the accordion's styling for a single checkbox if you would like to use a different styling for your collapse components without adding new CSS definitions.</li>
</ul>
<h3>Single collapse style</h3>