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

Documentation update

Browse Source 
Added certain helpful indicators as to the existence of the React/Preact libraries, updated docs just slightly.
This commit is contained in:
Angelos Chalaris
2017-06-14 12:23:29 +03:00
parent e9aec22ea7
commit bb5a16805b
29 changed files with 1071 additions and 1071 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
docs/index.html
View File

@@ -62,17 +62,17 @@
<small id="codename">Fermion</small>
</div>
<header class="sticky">
<a href="index.html" class="logo"><span id="header-logo">m</span></a> <label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="index" class="logo"><span id="header-logo">m</span></a> <label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="index" class="button hidden-sm">Introduction</a> <a href="modules" class="button hidden-sm">Modules</a>
<a href="flavors" class="button hidden-sm">Flavors</a> <a href="templates" class="button hidden-sm">Templates</a>
<a href="customization" class="button hidden-sm">Customization</a> <a href="quick_reference" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<input type="checkbox" id="navigation-toggle"> <nav class="drawer hidden-md hidden-lg">
<label class="close" for="navigation-toggle"></label>
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a> <a href="modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a> <a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a> <a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
<a href="index"><h4 style="margin-left: 0;">Introduction</h4></a> <a href="modules"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="flavors"><h4 style="margin-left: 0;">Flavors</h4></a> <a href="templates"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization"><h4 style="margin-left: 0;">Customization</h4></a> <a href="quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<!-- Insert your page content here-->
<main><div class="container responsive-padding">
@@ -116,7 +116,7 @@
<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>
<div class="col-sm-12 col-md-6 col-lg-4"><pre><span class="fore-tertiary">bower install</span> <span class="fore-primary">mini.css</span></pre></div>
</div>
<p>After downloading <strong>mini.css</strong>, pick a <a href="flavors.html">Flavor</a> and use it for your project.</p>
<p>After downloading <strong>mini.css</strong>, pick a <a href="flavors">Flavor</a> and use it for your project.</p>
<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>
@@ -148,21 +148,23 @@
<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 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>
<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>
<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>
<li><a href="navigation.html">Navigation</a> - Common navigational elements such as headers, footers and navigation bars</li>
<li><a href="input_control.html">Input Control</a> - Form, input element, checkbox, radio button and button styling</li>
<li><a href="table.html">Table</a> - Modern table styling, horizontal and preset tables, table responsiveness for mobile devices</li>
<li><a href="card.html">Card</a> - Sleek, modern general-purpose content containers, media embedding</li>
<li><a href="tab.html">Tab</a> - Modern, responsive tabs, accordions and collapses</li>
<li><a href="contextual.html">Contextual</a> - Content highlight element styling, elegant alerts and accessible tooltips</li>
<li><a href="progress.html">Progress</a> - Modern progress bar styling and spinning progress indicators</li>
<li><a href="utility.html">Utility</a> - Utilities, visibility helper classes, responsive sizing and breadcrumbs</li>
</ul><br/>
<li><a href="core">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">Grid</a> - Powerful, responsive grid system based on the Flexible Layout Module (commonly known as <em>flexbox</em>)</li>
<li><a href="navigation">Navigation</a> - Common navigational elements such as headers, footers and navigation bars</li>
<li><a href="input_control">Input Control</a> - Form, input element, checkbox, radio button and button styling</li>
<li><a href="table">Table</a> - Modern table styling, horizontal and preset tables, table responsiveness for mobile devices</li>
<li><a href="card">Card</a> - Sleek, modern general-purpose content containers, media embedding</li>
<li><a href="tab">Tab</a> - Modern, responsive tabs, accordions and collapses</li>
<li><a href="contextual">Contextual</a> - Content highlight element styling, elegant alerts and accessible tooltips</li>
<li><a href="progress">Progress</a> - Modern progress bar styling and spinning progress indicators</li>
<li><a href="utility">Utility</a> - Utilities, visibility helper classes, responsive sizing and breadcrumbs</li>
</ul>
<p style="text-align: justify;">While not strictly part of the framework, we have also created component libraries for React and Preact, which will make your development faster and easier, especially if you are developing progressive web apps. You can get started with one of our Javascript libraries <a href="https://chalarangelo.github.io/react-mini.css/">here</a>!</p>
<br/>
<h3>How do I customize mini.css?</h3>
<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/>
<p style="text-align: justify;"><strong>mini.css</strong> allows you to easily customize your designs, using <a href="flavors">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">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%;">
@@ -177,11 +179,12 @@
<h2>Getting started</h2>
<p>If you are still here after reading this far, we will assume you are interested or at least curious. Based on that assumption, here are a few links to help get you started:</p>
<ul>
<li>For a quick guide on getting started, you might wanna take a look at the available <a href="modules.html">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.html">templates</a> that might fit your needs!</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.html">quick reference</a> page!</li>
<li><strong>mini.css</strong> comes with a few nice pre-built customizable <a href="flavors.html">flavors</a>. See which one of them better suits your needs!</li>
<li>If you are more experienced or demanding, you can always take a look at the <a href="customization.html">customization</a> section to cook up a flavor of your own custom-tailored to your needs!</li>
<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 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>
<li>If you are more experienced or demanding, you can always take a look at the <a href="customization">customization</a> section to cook up a flavor of your own custom-tailored to your needs!</li>
<li>Finally, if you want to contribute to the framework's development in any way or have an interest in what happens behind the scenes, visit the <a href="https://github.com/Chalarangelo/mini.css">Github repository</a> to find out more.</li>
</ul>
</div>