Quick reference doc page initial commit

This commit is contained in:
Angelos Chalaris 2016-12-16 11:07:06 +02:00
parent aed32e13a5
commit 3d4303ec57
4 changed files with 258 additions and 6 deletions

View file

@ -74,12 +74,12 @@
<div class="col-sm">
<h1>Flavors</h1>
<p>One of the core ideas behind <strong>mini.css</strong> is its flavor system. A flavor is the final compiled stylesheet a website or web app uses. When you start using <strong>mini.css</strong>, you usually try out the default flavor, using the following reference 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://cdn.rawgit.com/Chalarangelo/mini.css/v2.0/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.0.0/dist/mini-default.min.css&quot;</span>&gt;</pre><br>
<p>There are, however a handful of other flavors included with <strong>mini.css</strong>. Below, you can see a full list of them:</p><br>
<ul style="margin-left:0px; padding-left: 10px">
<li class="card fluid">
<h2 class="section double-padded">Default <small>mini-default</small></h2>
<pre class="section double-padded" style="border-left:0; box-shadow: none;">&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.0/dist/mini-default.min.css&quot;</span>&gt;</pre>
<pre class="section double-padded" style="border-left:0; box-shadow: none;">&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.0.0/dist/mini-default.min.css&quot;</span>&gt;</pre>
<p class="section double-padded">The default flavor for <strong>mini.css</strong> uses a light gray background and gray-black foreground color. Certain containers, such as cards and tabs use white-gray backgrounds. The grid system has 12 columns and most of the components and modules use sharp corners with blurred shadows to give it a material-like design. All of the colors used in this flavor are based on <a href="https://material.google.com/style/color.html">Google's Material design color palette</a>.</p>
</li>

View file

@ -108,9 +108,9 @@
</div>
<div class="row">
<div class="col-sm">
<h2>Setup and usage</h2>
<p>You can import he default flavor of <strong>mini.css</strong> in your webpage by simply adding the following reference 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://cdn.rawgit.com/Chalarangelo/mini.css/v2.0/dist/mini-default.min.css&quot;</span>&gt;</pre><br>
<h2>Setup &amp; usage</h2>
<p>You can import the default flavor of <strong>mini.css</strong> in your webpage by simply adding the following reference 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://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css&quot;</span>&gt;</pre><br>
<p>If you want to download the package using your favorite package manager, you can use either <strong>Bower</strong> or <strong>NPM</strong>:</p>
<div class="row">
<div class="col-sm-12 col-md-6">
@ -264,6 +264,7 @@
<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>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>
</ul>

246
docs/quick_reference.html Normal file
View file

@ -0,0 +1,246 @@
<!DOCTYPE html>
<html>
<head>
<!-- Live demo styled as of 20161213 -->
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/0f7cd386b36094d9878c6b43bc8aa58d010c450d/dist/mini-default.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>mini.css - Quick Reference</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit">
<meta name="keywords" content="mini, mini.css, CSS, framework, toolkit, minimal, responsive, style-agnostic, Sass, reference, cheatsheet">
<meta name="author" content="Angelos Chalaris (chalarangelo)">
<link rel="icon" type="image/png" href="favicon.png">
<style>
/* Classes and ids used in multiple pages - page top and utilities */
#header-logo {
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px;
padding: 4px;
}
#top-logo {
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
#top-heading {
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
}
#top-version-tag {
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.box-centered { text-align: center; }
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
.box-colored.red { background: #b71c1c; }
.box-centered > .card.fluid {
-webkit-box-pack: start;
-webkit-box-align: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-self: auto;
align-self: auto;
}
[class^='col-'] .card.fluid { margin: 2px 0 20px; }
/* Local classes and ids for this page */
.box-left { text-align: left; }
.fore-primary { color: #0d47a1; font-family: monospace, monospace; }
.fore-secondary { color: #b71c1c; font-family: monospace, monospace; }
.fore-tertiary { color: #1b5e20; font-family: monospace, monospace; }
.col-sm-12.col-md-6.col-sm-first.col-md-first {
box-sizing: border-box;
border-right: 1px solid #bdbdbd;
}
@media (max-width: 767px){
.col-sm-12.col-md-6.col-sm-first.col-md-first {
border: 0;
border-top: 1px solid #bdbdbd;
}
}
h3 > a{
font-size: 1rem;
}
</style>
</head>
<body>
<header>
<img class="logo" src="mini-logo.svg" id="header-logo"><div style="display: inline; overflow: auto;">
<a href="index.html" class="button">Introduction</a>
<a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a>
<a href="customization.html" class="button">Customization</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button">Github</a>
</div>
</header>
<div class="container" style="height: 320px; background: -webkit-linear-gradient(#455a64,#263238); background: linear-gradient(#455a64,#263238); box-shadow: 0 3px 9px rgba(0,0,0,0.26), 0 3px 6px rgba(0,0,0,0.35);">
<div class="row">
<div class="col-sm">
<div class="box-centered">
<img src="mini-logo.svg" id="top-logo">
<h1 id="top-heading"><span style="font-size: 1.35em;">m</span>ini<span style="font-size:0.65em; color: #558b2f;">.css</span></h1>
<mark class="tertiary" id="top-version-tag">v2.0</mark>
</div>
</div>
</div>
</div>
<!-- Insert your page content here-->
<main><div class="container">
<div class="row" style="padding-top: 40px;">
<div class="col-sm">
<h1>Quick Reference</h1>
<p>If you are familiar with <strong>mini.css</strong> and want a cheat sheet, you've come to the right place. Below you will find a quick overview of the toolkit and examples to help you brush up on your website-building skills. For more detailed instructions on modules, check out the <a href="modules.html">modules</a> page.</p>
<p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p><br>
</div>
</div>
<div class="row">
<div class="col-sm">
<div class="card fluid">
<div class="section">
<h2>Setup and usage</h2>
</div>
<div class="section">
<p>You can import the default flavor of <strong>mini.css</strong> in your webpage by simply adding the following reference 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://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css&quot;</span>&gt;</pre><br>
<p>If you want to download the package using your favorite package manager, you can use either <strong>Bower</strong> or <strong>NPM</strong>:</p>
<div class="row">
<div class="col-sm-12 col-md-6">
<pre><span class="fore-tertiary">bower install</span> <span class="fore-primary">mini.css</span></pre>
</div>
<div class="col-sm-12 col-md-6">
<pre><span class="fore-tertiary">npm install</span> <span class="fore-primary">mini.css</span></pre>
</div>
</div>
<br>
<p>We strongly suggest you add the following line inside your HTML page's <code>&lt;head&gt;</code> to utilize the viewport meta tag:</p>
<pre>&lt;<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">&quot;viewport&quot;</span> <span class="fore-secondary">content</span>=<span class="fore-primary">&quot;width=device-width, initial-scale=1&quot;</span>&gt;</pre>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm">
<div class="card fluid">
<div class="section">
<h2>Core</h2>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Headings <a href="https://codepen.io/chalarangelo/pen/ZBVGMq" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre>&lt;h1&gt;Heading 1&lt;small&gt;Subheading&lt;/small&gt;&lt;/h1&gt;
&lt;h2&gt;Heading 2&lt;small&gt;Subheading&lt;/small&gt;&lt;/h2&gt;
&lt;h3&gt;Heading 3&lt;small&gt;Subheading&lt;/small&gt;&lt;/h3&gt;
&lt;h4&gt;Heading 4&lt;small&gt;Subheading&lt;/small&gt;&lt;/h4&gt;
&lt;h5&gt;Heading 5&lt;small&gt;Subheading&lt;/small&gt;&lt;/h5&gt;
&lt;h6&gt;Heading 6&lt;small&gt;Subheading&lt;/small&gt;&lt;/h6&gt;</pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Typography</h3>
<ul>
<li>Basic reset and fix rules applied, based on <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> v5.0.0</li>
<li>A <a href="https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/">native font stack</a> is used</li>
<li>The colors are set to <code>background: #f5f5f5;</code> and <code>color: #212121;</code></li>
<li>The <code>font-size</code> is <code>16px</code> for the root element</li>
<li>The <code>line-height</code> is <code>1.5</code></li>
<li>All HTML headings are pre-styled</li>
<li>Styling provided for <code>&lt;small&gt;</code> elements inside headings</li>
<li>Common HTML elements like paragraphs, horizontal rules, lists and code elements are pre-styled</li>
<li>Images are responsive by default</li>
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Common textual elements <a href="http://codepen.io/chalarangelo/pen/RoEWwK" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre>&lt;p&gt;This is a paragraph with some &lt;strong&gt;bold text&lt;/strong&gt; and some &lt;em&gt;italics text&lt;/em&gt;.&lt;/p&gt;
&lt;a href=&quot;#&quot;&gt;This is a link.&lt;/a&gt;
&lt;small&gt;This is some small text.&lt;/small&gt;
&lt;sub&gt;Subscript&lt;/sub&gt;
&lt;sup&gt;Superscript&lt;/sup&gt;
&lt;code&gt;Inline code&lt;/code&gt;
&lt;kbd&gt;Keyboard Input&lt;/kbd&gt;
&lt;hr&gt;
&lt;pre&gt;This is some preformatted text.&lt;/pre&gt;
&lt;blockquote cite=&quot;Quotation source&quot;&gt;
This is some quoted text from another website or person.
&lt;/blockquote&gt;</pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Lists &amp; images<a href="http://codepen.io/chalarangelo/pen/woRKay" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre>&lt;ul&gt;
&lt;li&gt;Apple&lt;/li&gt;
&lt;li&gt;Orange&lt;/li&gt;
&lt;li&gt;Strawberry&lt;/li&gt;
&lt;/ul&gt;
&lt;ol&gt;
&lt;li&gt;Wake up&lt;/li&gt;
&lt;li&gt;Eat breakfast&lt;/li&gt;
&lt;li&gt;Go to work&lt;/li&gt;
&lt;/ol&gt;
&lt;img src=&quot;...&quot;&gt;</pre>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm">
<div class="card fluid">
<div class="section">
<h2>Grid</h2>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Basic layout <a href="https://codepen.io/chalarangelo/pen/ZBVGMq" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre></pre>
</div>
<div class="col-sm-12 col-md-6">
<ul>
<li></li>
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Screen-specific layouts <a href="http://codepen.io/chalarangelo/pen/RoEWwK" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre></pre>
</div>
<div class="col-sm-12 col-md-6">
<ul>
<li></li>
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Column offsets <a href="http://codepen.io/chalarangelo/pen/RoEWwK" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre></pre>
</div>
<div class="col-sm-12 col-md-6">
<ul>
<li></li>
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Column reordering <a href="http://codepen.io/chalarangelo/pen/RoEWwK" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre></pre>
</div>
<div class="col-sm-12 col-md-6">
<ul>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row box-centered">
<div class="col-sm-12">
</div>
</div>
</div></main>
<!-- End of page content-->
<footer><strong>mini.css</strong> was designed and built 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>

View file

@ -657,4 +657,9 @@
- Updated `bower.json` and `package.json`.
- Added `.npmignore` and tested to see if it works.
- Moved docs around, getting ready for release.
- *TODO* Delete this file eventually.
## 20161216
- Created `quick_reference.html` page for quick reference.
- Documented `core`'s quick reference with codepens etc.
- Updated link references to `v2.0.0` instead of `v2.0`.