beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Updated documentation for v2.1.2

Browse source 
Added yarn support, fixed a few things here and there, mainly houskeeping.
This commit is contained in:
Angelos Chalaris 2017-04-21 14:30:40 +03:00
parent 889071847d
commit 8e526fe722
15 changed files with 40 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
CHANGELOG.md
View file

@ -1,5 +1,11 @@
# Changelog
## v2.1.2
- Updated `::placeholder` definitions (#36).
- Updated the animations on `.animated` alerts, blurriness should be less noticeable now (#35).
- Added `yarn` support.
## v2.1.1
- Added responsive hiding classes in the `utility` module (#61).

5
README.md
View file

@ -1,4 +1,4 @@
# mini.css v2.1.1
# mini.css v2.1.2
A minimal, responsive, style-agnostic CSS framework
[![npm](https://img.shields.io/npm/v/mini.css.svg)](https://www.npmjs.com/package/mini.css)
@ -22,9 +22,10 @@ For instructions on how to use, best practices, templates and other usage inform
#### Method 1: Use a package manager (recommended)
1. Install **mini.css** either from `npm` or `bower`.
1. Install **mini.css** using `npm`, `yarn` or `bower`.
```
npm install mini.css
yarn add mini.css
bower install mini.css
```
2. Pick one of the available [flavors](https://chalarangelo.github.io/mini.css/flavors.html) and use its CSS file.

2
dist/mini-default.css vendored
View file

@ -3,7 +3,7 @@
Flavor name: Default (mini-default)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v2.1.1 (Fermion)
mini.css version: v2.1.2 (Fermion)
*/
/*
Browsers resets and base typography.

2
dist/mini-lite.css vendored
View file

@ -3,7 +3,7 @@
Flavor name: Lite (mini-lite)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v2.1.1 (Fermion)
mini.css version: v2.1.2 (Fermion)
*/
/*
Browsers resets and base typography.

2
dist/mini-nord.css vendored
View file

@ -3,7 +3,7 @@
Flavor name: Nord (mini-nord)
Author: tphecca (https://github.com/tphecca)
Maintainers: tphecca
mini.css version: v2.1.1 (Fermion)
mini.css version: v2.1.2 (Fermion)
*/
/*
Browsers resets and base typography.

2
dist/mini-sucroa.css vendored
View file

@ -3,7 +3,7 @@
Flavor name: Sucroa (mini-sucroa)
Author: Angeliki Daskalakis
Maintainers: Angeliki Daskalakis, Angelos Chalaris (chalarangelo@gmail.com)
mini.css version: v2.1.1 (Fermion)
mini.css version: v2.1.2 (Fermion)
*/
@import url("https://fonts.googleapis.com/css?family=Cousine:400,400i,700|Libre+Baskerville:400,400i,700&subset=latin-ext");
/*

10
docs/flavors.html
View file

@ -36,7 +36,7 @@
<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 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.1.1/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.1.2/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">
@ -45,7 +45,7 @@
<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>
<div class="section double-padded">
<p><strong>Author:</strong> <a href="https://github.com/Chalarangelo">Chalarangelo</a></p>
<p><strong>Latest version:</strong> v2.1.1</p>
<p><strong>Latest version:</strong> v2.1.2</p>
<p><strong>Size:</strong> 7 KB</p>
</p>
</div>
@ -56,7 +56,7 @@
<p class="section double-padded">Lite is a light flavor that uses a the default palette (light gray background and gray-black foreground color). It uses the default naming conventions (<code>.primary</code>, <code>.secondary</code> etc.). The grid system has 12 columns and most components use sharp corners without shadows. To make the flavor lighter, button groups, horizontal tables, certain card and progress styles, along with spinner donuts, tooltips, navigation bars and alerts are not included.</p>
<div class="section double-padded">
<p><strong>Author:</strong> <a href="https://github.com/Chalarangelo">Chalarangelo</a></p>
<p><strong>Latest version:</strong> v2.1.1</p>
<p><strong>Latest version:</strong> v2.1.2</p>
<p><strong>Size:</strong> 5 KB</p>
</p>
</div>
@ -67,7 +67,7 @@
<p class="section double-padded">Sucroa is a full flavor that uses a yellow-pink-lilac background color palette with dark purple-black foreground colors. It uses the default naming conventions (<code>.primary</code>, <code>.secondary</code> etc.). The grid system has 12 columns and most components use soft shadows combined with rounded corners. The card module's <code>.dark</code> and <code>.darker</code> classes have been replaced by the <code>.light</code> and <code>.lighter</code> classes respectively. Finally, <code>.animated</code> alerts and <code>.horizontal</code> tables are not available.</p>
<div class="section double-padded">
<p><strong>Author:</strong> <a href="https://github.com/AngieDaskalakis">Angeliki Daskalakis</a></p>
<p><strong>Latest version:</strong> v2.1.1</p>
<p><strong>Latest version:</strong> v2.1.2</p>
<p><strong>Size:</strong> 7 KB (loads external fonts)</p>
</p>
</div>
@ -78,7 +78,7 @@
<p class="section double-padded">Nord is a full flavor that uses the <a href="https://github.com/arcticicestudio/nord">Nord color palette</a> (arctic, north-bluish color palette). It uses the default naming conventions (<code>.primary</code>, <code>.secondary</code> etc.). The grid system has 12 columns and most components use soft shadows combined with rounded corners. All modules and components that are available in the default flavor are also available in Nord.</p>
<div class="section double-padded">
<p><strong>Author:</strong> <a href="https://github.com/tphecca">tphecca</a></p>
<p><strong>Latest version:</strong> v2.1.1</p>
<p><strong>Latest version:</strong> v2.1.2</p>
<p><strong>Size:</strong> 7 KB</p>
</p>
</div>

13
docs/index.html
View file

@ -19,7 +19,7 @@
#top-heading { color: #f5f5f5; font-size: 2.8em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); position: absolute; margin: 0; top: 35vh; width: 100%; height: 20vh; min-height: 42px; font-family: 'Noto Sans', sans-serif; }
#top-vtag-cont { width: 100%; text-align: center; }
#top-version-tag { padding: 8px 8px; font-size: 1.2em; font-weight: 700; font-family: 'Noto Sans', sans-serif; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); position: absolute; top: 55vh; width: 40px; background: #4527a0; border-radius: 6px; margin: 0; margin-left: -30px; }
@media screen and (max-height:480px) { #top-version-tag { top: 70vh; } #description { top: 55vh;}}
@media screen and (max-height:480px), screen and (max-width: 480px) { #top-version-tag { display: none; } #description { top: 60vh;}}
#mt1 { position: absolute; bottom: 0; left: -7vw; width: 0; height: 0; border-left: 12vw solid transparent; border-right: 11vw solid transparent; border-bottom: 8.5vw solid #07020d; }
#mt1:after { content: ""; position: absolute; left: -1.4vw; border-left: 1.4vw solid transparent; border-right: 11vw solid transparent; border-bottom: 8.5vw solid #150627; z-index: 2; }
#mt2 { position: absolute; bottom: -0.4vw; left: 10vw; width: 0; height: 0; border-left: 7vw solid transparent; border-right: 10vw solid transparent; border-bottom: 7vw solid #120520; z-index: 3; }
@ -100,16 +100,17 @@
<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> and <strong>bower</strong>, so you can easily download it, using your preferred package manager:</p>
<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>
<div class="row">
<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 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-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>
<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 donwloading <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>
<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.1.1/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.1.2/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/>
<hr>
</div>
@ -133,7 +134,7 @@
</tr>
<tr>
<td data-label="Name">mini.css</td>
<td data-label="Version"><a href="https://github.com/Chalarangelo/mini.css/blob/master/dist/mini-default.css">v2.1.1</a></td>
<td data-label="Version"><a href="https://github.com/Chalarangelo/mini.css/blob/master/dist/mini-default.css">v2.1.2</a></td>
<td data-label="Size (uncompressed)">50 KB</td><td data-label="Size (minified)">40 KB</td><td data-label="Size (gzipped)">7 KB</td>
</tr>
<tr>

9
docs/quick_reference.html
View file

@ -45,14 +45,15 @@
<div class="card fluid">
<div class="section"><h2>Setup &amp; usage</h2></div>
<div class="section">
<p>You can download <strong>mini.css</strong> using either <strong>NPM</strong> or <strong>Bower</strong>:</p>
<p>You can download <strong>mini.css</strong> using <strong>npm</strong>, <strong>yarn</strong> or <strong>Bower</strong>:</p>
<div class="row">
<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 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-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>
<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><br>
<p>You can import the default flavor of <strong>mini.css</strong> in your webpage by simply adding 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.1.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.1.2/dist/mini-default.min.css&quot;</span>&gt;</pre><br>
<p>You can also 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>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>

5
docs/v2/DEVLOG.md
View file

@ -1014,3 +1014,8 @@
- Bumped all flavor files to include updated `::placeholder` definitions.
- Updated `.animated` `.alert`s to deal with the way `webkit` renders them (#35).
- Bumped flavors again.
- Updated the way the version tag of the homepage displays (or not) on mobile devices.
- Fixed capitalization for `npm` in all pages, updated version tag everywhere (hopefully), getting ready for **v2.1.2**.
- Updated flavor files with latest version tag.
- Checked `yarn`'s packaging, all systems nominal, added to download options.
- Updated CHANGELOG and README.

2
package.json
View file

@ -14,7 +14,7 @@
"url": "git+https://github.com/Chalarangelo/mini.css.git"
},
"devDependencies": {
"node-sass": "^4.5.2",
"node-sass": "^4.5.2"
},
"keywords": [
"css",

2
src/flavors/mini-default.scss
View file

@ -5,7 +5,7 @@
Flavor name: Default (mini-default)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v2.1.1 (Fermion)
mini.css version: v2.1.2 (Fermion)
*/
// Basic rules for body and typography
$fore-color: #212121; // Text and general foreground color

2
src/flavors/mini-lite.scss
View file

@ -7,7 +7,7 @@
Flavor name: Lite (mini-lite)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v2.1.1 (Fermion)
mini.css version: v2.1.2 (Fermion)
*/
// Basic rules for body and typography
$fore-color: #212121; // Text and general foreground color

2
src/flavors/mini-nord.scss
View file

@ -5,7 +5,7 @@
Flavor name: Nord (mini-nord)
Author: tphecca (https://github.com/tphecca)
Maintainers: tphecca
mini.css version: v2.1.1 (Fermion)
mini.css version: v2.1.2 (Fermion)
*/
// This flavor is based on the Nord color palette: https://github.com/arcticicestudio/nord
// Basic rules for body and typography

2
src/flavors/mini-sucroa.scss
View file

@ -5,7 +5,7 @@
Flavor name: Sucroa (mini-sucroa)
Author: Angeliki Daskalakis
Maintainers: Angeliki Daskalakis, Angelos Chalaris (chalarangelo@gmail.com)
mini.css version: v2.1.1 (Fermion)
mini.css version: v2.1.2 (Fermion)
*/
// Google Fonts imports and usage
@import url('https://fonts.googleapis.com/css?family=Cousine:400,400i,700|Libre+Baskerville:400,400i,700&subset=latin-ext');