mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-19 04:01:18 +02:00
Code Issues Releases Wiki Activity

Minor bug fixes and documentation updates

Browse Source 
Fixed a bug in header, added some more specificity to select selectors and updated documentation to include more links and other things.
This commit is contained in:
Angelos Chalaris
2017-08-16 14:50:16 +03:00
parent e8cb973bde
commit 099e6da216
26 changed files with 72 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
docs/index.html
View File

@@ -120,7 +120,7 @@
<br/>
<p style="text-align:justify">Alternatively, you can use either <strong>GitCDN</strong> or <strong>RawGit</strong> to import the default flavor of <strong>mini.css</strong>. Simply add one of the following references inside your HTML page's <code>&lt;head&gt;</code> tag:</p>
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css&quot;</span>&gt;</pre>
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.3/dist/mini-default.min.css&quot;</span>&gt;</pre><br/>
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.4/dist/mini-default.min.css&quot;</span>&gt;</pre><br/>
<p style="text-align:justify">Finally, you can find <strong>mini.css</strong> on <a href="https://cdnjs.com/libraries/mini.css">cdnjs</a>, which you can use to include it in your projects.</p><br/>
<hr>
</div>
@@ -143,9 +143,10 @@
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
<h2>Quick overview</h2>
<p>Take a couple of minutes to explore what makes <strong>mini.css</strong> different from all those other CSS frameworks and UI toolkits.</p>
<figure style="margin: 0;" class="hidden-sm"><div style="position: relative; padding: 0.5rem; padding-bottom: 42%; margin-bottom: 0.25rem; margin-right: 1rem;"><iframe style="display: none; border: 0; position: absolute; width: 100%; height: 100%;" onload="this.style.display='block';" src="https://scrimba.com/cast/cast-1949.embed"></iframe></div><figcaption style="padding: 0.5rem;">Intro to mini.css by <a href="https://scrimba.com/casts/cast-1949" style="font-size: 0.8125rem; text-decoration: none;">Per Harald Borgen</a></figcaption></figure><br/>
<br/>
<h3>Why should I use mini.css?</h3>
<p style="text-align: justify;"><strong>mini.css</strong> is a lot lighter than a lot of other full-featured CSS frameworks (e.g. Bootstrap, Semantic UI), but it is not a micro framework (e.g. Milligram, Pure.CSS). Instead, <strong>mini.css</strong> blurs the line between full-featured and micro frameworks by providing lots of modules and components in a very small file. All the things you expect to find in a CSS framework, such as grids, styling for common elements and typography, along with some more complex components such as tabs or cards are all present in <strong>mini.css</strong>.</p>
<p>Not convinced yet? Maybe you should read these <a href="https://hackernoon.com/5-reasons-to-try-out-mini-css-62ddb47b9370">5 reasons</a> to try out <strong>mini.css</strong>.</p>
<br/>
<h3>What exactly does mini.css provide?</h3>
<p style="text-align: justify;">Many CSS frameworks utilize modules to deliver more components and features, without making it necessary for all developers to include them. <strong>mini.css</strong> provides a handful of very powerful <a href="modules">modules</a> that can do many different things. This way, developers only have to learn a few different HTML structures and patterns, while having the ability to build a lot of interesting things with them. You can see an overview of the modules below:</p>
@@ -170,7 +171,7 @@
<div class="card fluid" style=" width: 100%;">
<h3 class="section double-padded" style="text-align: center;">Support mini.css!</h3>
<p class="section double-padded" style="text-align: center;">If you like <strong>mini.css</strong>, remember that you can show your support by starring it on Github.<br/> It means a lot to us and it only takes a couple of seconds!</p>
<a href="https://github.com/Chalarangelo/mini.css" target="_blank" class="section button primary large" style="text-align: center;">Star mini.css</a>
<a href="https://github.com/Chalarangelo/mini.css" target="_blank" class="section button primary large" style="text-align: center;"><i class="fa fa-star-o fa-fw" aria-hidden="true"></i>&nbsp;Star mini.css</a>
</div>
</div>
</div>
@@ -181,6 +182,13 @@
<ul>
<li>For a quick guide on getting started, you might want to take a look at the available <a href="modules">modules</a> list and the tutorials provided for each one!</li>
<li>To get you started even faster, we have created a handful of <a href="templates">templates</a> that might fit your needs!</li>
<li>If you want a step-by-step guide on how to utilize the most commonly used modules, be sure to check out these articles on Medium:
<ol>
<li><a href="https://hackernoon.com/designing-a-simple-web-page-with-mini-css-f455e9f6403b">Designing a simple web page with <strong>mini.css</strong></a></li>
<li><a href="https://hackernoon.com/using-the-mini-css-card-module-and-media-object-3c5b5829d19c">Using the <strong>mini.css</strong> card module and media object</a></li>
<li><a href="https://hackernoon.com/creating-a-mobile-friendly-navigation-using-mini-css-8cea580c51ed">Creating a mobile-friendly navigation using <strong>mini.css</strong></a></li>
</ol>
</li>
<li>If you are familiar with <strong>mini.css</strong> and want a cheat sheet or quick reference guide, check the <a href="quick_reference">quick reference</a> page!</li>
<li>If you want to develop a progressive web app or just utilize a virtual DOM, you should check out our <a href="https://github.com/Chalarangelo/react-mini.css">React &amp; Preact Libraries</a>, which will help you get started creating all kinds of custom components based on <strong>mini.css</strong>.
<li><strong>mini.css</strong> comes with a few nice pre-built customizable <a href="flavors">flavors</a>. See which one of them better suits your needs!</li>