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

Documentation update

Browse Source 
Pretty sizeable documentation update, improving layout, typos etc. Also added the Codepen Project to the templates page, a small note to star the project in the front page and two more examples in the drawer component documentation to make sure that everything is properly documented.
This commit is contained in:
Angelos Chalaris
2017-05-22 17:05:40 +03:00
parent a7fc3f827e
commit 0afb5277ad
29 changed files with 476 additions and 445 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
docs/index.html
View File

@@ -107,7 +107,7 @@
<div class="row">
<div class="col-sm col-lg-10 col-lg-offset-1">
<h2>Setup &amp; usage</h2>
<p><strong>mini.css</strong> is published in <strong>npm</strong>, <strong>yarn</strong> and <strong>bower</strong>, so you can easily download it, using your preferred package manager:</p>
<p style="text-align:justify"><strong>mini.css</strong> is published in <strong>npm</strong>, <strong>yarn</strong> and <strong>bower</strong>, so you can easily download it, using your preferred package manager:</p>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-4"><pre><span class="fore-tertiary">npm install</span> <span class="fore-primary">mini.css</span></pre></div>
<div class="col-sm-12 col-md-6 col-lg-4"><pre><span class="fore-tertiary">yarn add</span> <span class="fore-primary">mini.css</span></pre></div>
@@ -115,10 +115,10 @@
</div>
<p>After downloading <strong>mini.css</strong>, pick a <a href="flavors.html">Flavor</a> and use it for your project.</p>
<br/>
<p>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>
<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.2.0/dist/mini-default.min.css&quot;</span>&gt;</pre><br/>
<p>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/>
<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>
</div>
@@ -126,14 +126,14 @@
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
<h2>Browser support</h2>
<div class="row" style="padding: 0.5rem;">
<div class="col-sm" style="text-align:center; background: #35BCE6; padding: 1rem;"><img src="browser-logos/edge_128x128.png" alt="edge"><br/><h3><small>&nbsp;Edge</small>12</h3></div>
<div class="col-sm" style="text-align:center; background: #35BCE6; padding: 1rem;"><img src="browser-logos/edge_128x128.png" alt="edge"><br/><h3><small>&nbsp;&nbsp;Edge<sup style="-0.675em"><i class="fa fa-lg fa-exclamation" aria-hidden="true" style="font-size: 80%;"></i></sup></small>12</h3></div>
<div class="col-sm" style="text-align:center; background: #FF742E; padding: 1rem;"><img src="browser-logos/firefox_128x128.png" alt="firefox"><br/><h3><small>&nbsp;Firefox</small>28</h3></div>
<div class="col-sm" style="text-align:center; background: #FFE270; padding: 1rem;"><img src="browser-logos/chrome_128x128.png" alt="chrome"><br/><h3><small>&nbsp;Chrome</small>26</h3></div>
<div class="col-sm" style="text-align:center; background: #00D0FF; padding: 1rem;"><img src="browser-logos/safari_128x128.png" alt="safari"><br/><h3><small>&nbsp;Safari</small>7.1</h3></div>
<div class="col-sm" style="text-align:center; background: #FF6E6E; padding: 1rem;"><img src="browser-logos/opera_128x128.png" alt="opera"><br/><h3><small>&nbsp;Opera</small>17</h3></div>
<div class="col-sm" style="text-align:center; background: #0F98E0; padding: 1rem;"><img src="browser-logos/android_128x128.png" alt="android"><br/><h3><small>&nbsp;Android</small>4.4</h3></div>
</div></div> <div class="col-sm-12 col-lg-10 col-lg-offset-1">
<p style="padding-top: 1rem; padding-bottom: 1rem;"><mark class="secondary" style="padding: 3px 6px;"><i class="fa fa-lg fa-exclamation" aria-hidden="true"></i></mark>&nbsp;Due to the way <strong>mini.css</strong> is crafted, some legacy browsers are not supported anymore and some others are partially supported. This could be a dealbreaker for some developers, however most legacy browsers will display a less feature-rich and modern website. On a side note, remember that some mobile browsers like Opera Mini, IE Mobile and UC Browser for Android are officially supported, but some features may not be displayed properly or behave as expected due to the browsers themselves.</p><hr>
<p style="padding-top: 1rem; padding-bottom: 1rem; text-align: justify"><mark class="secondary" style="padding: 3px 6px;"><i class="fa fa-lg fa-exclamation" aria-hidden="true"></i></mark>&nbsp;Due to the way <strong>mini.css</strong> is designed, some legacy browsers are not supported anymore and some others are partially supported. This could be a dealbreaker for some developers, however most legacy browsers such as Internet Explorer will display a less feature-rich and modern website. On a side note, remember that some mobile browsers like Opera Mini, IE Mobile and UC Browser for Android are officially supported, but some features may not be displayed properly or behave as expected due to the browsers themselves.</p><hr>
</div>
</div>
<div class="row">
@@ -142,10 +142,10 @@
<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/>
<h3>Why should I use mini.css?</h3>
<p><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 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>
<br/>
<h3>What exactly does mini.css provide?</h3>
<p>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.html">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>
<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.html">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>
<ul>
<li><a href="core.html">Core</a> - Basic reset and fix rules, based on <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> v5.0.0, typography and common textual element styling</li>
<li><a href="grid.html">Grid</a> - Powerful, responsive grid system based on the Flexible Layout Module (commonly known as <em>flexbox</em>)</li>
@@ -159,7 +159,14 @@
<li><a href="utility.html">Utility</a> - Utilities, visibility helper classes, responsive sizing and breadcrumbs</li>
</ul><br/>
<h3>How do I customize mini.css?</h3>
<p><strong>mini.css</strong> allows you to easily customize your designs, using <a href="flavors.html">Flavors</a>, pre-built color and style variants of the framework. The functionality is the same, but many things like color palettes, spacing and fonts can be easily changed by the community. Apart from that, you can easily build your own flavor by tweaking variables and using mixins, as explained in depth in the <a href="customization/index.html">customization</a> section.</p><br/><hr/>
<p style="text-align: justify;"><strong>mini.css</strong> allows you to easily customize your designs, using <a href="flavors.html">Flavors</a>, pre-built color and style variants of the framework. The functionality is the same, but many things like color palettes, spacing and fonts can be easily changed by the community. Apart from that, you can easily build your own flavor by tweaking variables and using mixins, as explained in depth in the <a href="customization/index.html">customization</a> section.</p><br/>
</div>
<div class="col-sm col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 row">
<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>
</div>
</div>
</div>
<div class="row" style="padding-bottom: 60px;">
@@ -178,6 +185,6 @@
</div>
</div></main>
<!-- End of page content-->
<footer><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
<footer style="text-align: justify;"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
</body>
</html>