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

MInor doc changes

Browse source
This commit is contained in:
Angelos Chalaris 2016-09-21 15:57:26 +03:00
parent ebdc6478fd
commit 02d76895d9
4 changed files with 14 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
README.md
View file

@ -7,6 +7,13 @@ You can learn all about using it, its modules and components, as well as see a l
## Setup
**mini.css** is available in both Bowser and NPM:
bowser install mini.css
npm install mini.css
To give **mini.css** a try using the default flavor, paste the following code inside your HTML page's `<head>` tag:
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/1.0.0/flavors/mini-default.min.css">

7
docs/index.html
View file

@ -57,8 +57,11 @@
<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>If you want to create your own flavor, get involved or report an issue, head over to <strong>mini.css</strong>'s <a href="https://github.com/Chalarangelo/mini.css">Github repository</a> or the <a href="https://github.com/Chalarangelo/mini.css/wiki">wiki</a>. If you want to give <strong>mini.css</strong> a try using the default flavor, paste the following code inside your HTML page's <code>&lt;head&gt;</code> tag:</p>
<pre style="overflow: auto;">&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/1.0.0/flavors/mini-default.min.css&quot;&gt;</pre>
<br>
<pre style="overflow: auto;">&lt;link rel=<span class="txt-green">&quot;stylesheet&quot;</span> href=<span class="txt-blue">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/1.0.0/flavors/mini-default.min.css&quot;</span>&gt;</pre>
<p>If you'd rather use a package manager, <strong>mini.css</strong> is available in both Bowser and NPM:</p>
<pre style="margin-left: 1px; border-left: 5px solid #3f84b3; border-top-left-radius: 0; border-bottom-left-radius: 0;"> <span class="txt-blue">bowser install</span> mini.css</pre>
<pre style="margin-left: 1px; border-left: 5px solid #3f84b3; border-top-left-radius: 0; border-bottom-left-radius: 0;"> <span class="txt-blue">npm install</span> mini.css</pre><br>
<h2 id="why-mini-css">Why mini.css?</h2><hr>
<ul>

2
docs/modules-niteowl.html
View file

@ -792,7 +792,7 @@
<h3>Popovers</h3>
<p>You can show a small overlay of content when the user clicks on specific elements using the <code>.popover-</code> prefix on an <code>&lt;input type=&quot;checkbox&quot;&gt;</code> along with the <code>top</code> or <code>bottom</code> suffix. Add a <code>&lt;label&gt;</code> right after the checkbox linked to it and inside it add another element with the popover's class you are using. When you click the label, the popover will appear above or below the label. Click on the label again or the popover text itself to hide it.</p>
<div class="panel" style="margin-left: 10px; margin-right: 10px; padding:0"><h4 class="head">Example</h4><br>
<div class="panel"><h4 class="head">Example</h4><br>
&nbsp;&nbsp;<input type="checkbox" id="popover1" class="popover-top" autocomplete="off"><label for="popover1" class="btn green">Open top popover<span class="popover-top">This is the popover text.</span></label>
&nbsp;&nbsp;
<input type="checkbox" id="popover2" class="popover-bottom" autocomplete="off"><label for="popover2" class="btn red">Open bottom popover<span class="popover-bottom">This is the popover text.</span></label><br><br>

2
docs/modules.html
View file

@ -792,7 +792,7 @@
<h3>Popovers</h3>
<p>You can show a small overlay of content when the user clicks on specific elements using the <code>.popover-</code> prefix on an <code>&lt;input type=&quot;checkbox&quot;&gt;</code> along with the <code>top</code> or <code>bottom</code> suffix. Add a <code>&lt;label&gt;</code> right after the checkbox linked to it and inside it add another element with the popover's class you are using. When you click the label, the popover will appear above or below the label. Click on the label again or the popover text itself to hide it.</p>
<div class="panel" style="margin-left: 10px; margin-right: 10px; padding:0"><h4 class="head">Example</h4><br>
<div class="panel"><h4 class="head">Example</h4><br>
&nbsp;&nbsp;<input type="checkbox" id="popover1" class="popover-top" autocomplete="off"><label for="popover1" class="btn green">Open top popover<span class="popover-top">This is the popover text.</span></label>
&nbsp;&nbsp;
<input type="checkbox" id="popover2" class="popover-bottom" autocomplete="off"><label for="popover2" class="btn red">Open bottom popover<span class="popover-bottom">This is the popover text.</span></label><br><br>