mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-05 13:27:25 +02:00
Code Issues Releases Wiki Activity

Documentation for new flavors

Browse Source 
Updated existing flavor links, added new flavors to flavors page and explained whatever needed explaining. Added codepens for them, too.
This commit is contained in:
Angelos Chalaris
2017-04-18 13:24:39 +03:00
parent a2a855625b
commit d77ecd575a
5 changed files with 33 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
dist/mini-lite.css vendored
View File

@@ -156,7 +156,6 @@ pre {
background: #e0e0e0;
padding: 12px;
margin: 8px 10px;
box-shadow: false;
}
kbd {
@@ -1160,7 +1159,6 @@ table th:first-child, table td:first-child {
background: #fafafa;
border: 1px solid #9e9e9e;
margin: 2px 10px 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
}
.card > .section {
@@ -1218,7 +1216,6 @@ mark {
line-height: 1;
border-radius: 2px;
padding: 2px 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
}
mark.inline-block {
@@ -1261,7 +1258,6 @@ progress {
border: 0;
border-radius: 1px;
margin: 2px auto;
box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.1), 0 0.5px 0.5px rgba(0, 0, 0, 0.15);
background: #eeeeee;
color: #01579b;
}

2
dist/mini-lite.min.css vendored
View File

File diff suppressed because one or more lines are too long

32
docs/flavors.html
View File

@@ -35,31 +35,53 @@
<div class="col-sm col-lg-10 col-lg-offset-1">
<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.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.1/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.1.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.1.1/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>
<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.0</p>
<p><strong>Latest version:</strong> v2.1.1</p>
<p><strong>Size:</strong> 7 KB</p>
</p>
</div>
</li>
<li class="card fluid">
<h2 class="section double-padded">Lite <a href="http://codepen.io/chalarangelo/pen/bWVrMv" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a><small>mini-lite</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.1.1/dist/mini-lite.min.css&quot;</span>&gt;</pre>
<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>Size:</strong> 5 KB</p>
</p>
</div>
</li>
<li class="card fluid">
<h2 class="section double-padded">Sucroa <a href="http://codepen.io/chalarangelo/pen/YNKYgz" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a><small>mini-sucroa</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.1.0/dist/mini-sucroa.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.1.1/dist/mini-sucroa.min.css&quot;</span>&gt;</pre>
<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.0</p>
<p><strong>Latest version:</strong> v2.1.1</p>
<p><strong>Size:</strong> 7 KB (loads external fonts)</p>
</p>
</div>
</li>
<li class="card fluid">
<h2 class="section double-padded">Nord <a href="http://codepen.io/chalarangelo/pen/gWaxZX" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a><small>mini-nord</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.1.1/dist/mini-nord.min.css&quot;</span>&gt;</pre>
<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>Size:</strong> 7 KB</p>
</p>
</div>
</li>
</ul>
<p>If you would rather modify one of the pre-defined flavors or create your own, check out our <a href="customization.html">customization</a> page for instructions.</p>
</div>

1
docs/v2/DEVLOG.md
View File

@@ -987,3 +987,4 @@
- Documented responsive visibility helpers in `utility`.
- Documented `figcaption` element under image responsiveness in `core` module's docs.
- Added codepens and documentation in `quick_reference` for all that was missing.
- Flavor documentation and a couple of minor fixes in `lite`.

11
src/flavors/mini-lite.scss
View File

@@ -65,7 +65,7 @@ $pre-element-back-color: $code-element-back-color; // Background color for <pre>
$pre-element-border-style: 0; // Border style for <pre>
$pre-element-border-radius: 0 2px 2px 0; // Border radius for <pre>
$pre-element-margin: 8px 10px; // Margin for <pre>
$pre-element-box-shadow: false; // Box shadow for <pre>
$pre-element-box-shadow: none; // Box shadow for <pre>
$add-pre-element-sidebar: false; // Should a fancy sidebar be added to the left side of <pre> (`true`/`false`) [7]
$kbd-element-padding: 2px 4px; // Padding for <kbd>
$kbd-element-fore-color: #fafafa; // Text color for <kbd>
@@ -289,8 +289,7 @@ $card-fore-color: $fore-color; // Text color for cards
$card-border-style: 1px solid #9e9e9e; // Border style for cards
$card-border-radius: 0; // Border radius for cards
$card-margin: 2px 10px 20px; // Margin for cards
$card-box-shadow: // Box shadow for cards
0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
$card-box-shadow: none; // Box shadow for cards
$card-section-name: 'section'; // Class name for card sections
$card-section-border-style: 1px solid #bdbdbd; // Border style for card sections
$card-section-padding: 6px 8px 6px; // Padding for card sections
@@ -319,8 +318,7 @@ $mark-border-style: 0; // Border style for <mark>
$mark-border-radius: 2px; // Border radius for <mark>
$mark-padding: 2px 4px; // Padding for <mark>
$mark-margin: 0; // Margin for <mark>
$mark-box-shadow: // Box shadow for <mark>
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
$mark-box-shadow: none; // Box shadow for <mark>
$mark-inline-block-name: 'inline-block'; // Class name for <mark> inline block styling
$mark-variant1-name: 'secondary'; // Class name for <mark> variant 1
$mark-variant1-back-color: #e53935; // Background color for <mark> variant 1
@@ -351,8 +349,7 @@ $progress-border-style: 0; // Border style for <progress>
$progress-border-radius: 1px; // Border radius for the <progress> container
$progress-top-bottom-margin: 2px; // Top and bottom margin for <progress>
$progress-left-right-margin: 8px; // Left and right margin for <progress>
$progress-box-shadow: // Box shadow for <progress>
0 0.5px 1px rgba(0,0,0, 0.1), 0 0.5px 0.5px rgba(0, 0, 0, 0.15);
$progress-box-shadow: none; // Box shadow for <progress>
$progress-inline-name: 'inline'; // Class name for inline <progress>
$progress-inline-width: 60%; // Width for inline <progress>
$progress-variant1-name: 'secondary'; // Class name for <progress> variant 1