diff --git a/README.md b/README.md index 119ca56..f8a1ef4 100644 --- a/README.md +++ b/README.md @@ -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"> diff --git a/docs/index.html b/docs/index.html index 53ca823..182cc44 100644 --- a/docs/index.html +++ b/docs/index.html @@ -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><head></code> tag:</p> - <pre style="overflow: auto;"><link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/1.0.0/flavors/mini-default.min.css"></pre> - <br> + <pre style="overflow: auto;"><link rel=<span class="txt-green">"stylesheet"</span> href=<span class="txt-blue">"https://cdn.rawgit.com/Chalarangelo/mini.css/1.0.0/flavors/mini-default.min.css"</span>></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> diff --git a/docs/modules-niteowl.html b/docs/modules-niteowl.html index a3d7dd2..be9fec5 100644 --- a/docs/modules-niteowl.html +++ b/docs/modules-niteowl.html @@ -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><input type="checkbox"></code> along with the <code>top</code> or <code>bottom</code> suffix. Add a <code><label></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> <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> <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> diff --git a/docs/modules.html b/docs/modules.html index 95395bc..ff604f5 100644 --- a/docs/modules.html +++ b/docs/modules.html @@ -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><input type="checkbox"></code> along with the <code>top</code> or <code>bottom</code> suffix. Add a <code><label></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> <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> <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>