Core restructure to move imports to the flavor files, mixin usage changed inside flavor files, updated doc pages and live version files

2025-08-23 14:02:49 +02:00 · 2016-12-22 11:43:20 +02:00
parent f469a1dfb7
commit a9d314fc66
23 changed files with 657 additions and 625 deletions
--- a/docs/card.html
+++ b/docs/card.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
  <head>
-    <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css">
+    <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <title>mini.css - Card</title>
    <meta charset="utf-8">
--- a/docs/contextual.html
+++ b/docs/contextual.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
  <head>
-    <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css">
+    <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <title>mini.css - Contextual</title>
    <meta charset="utf-8">
--- a/docs/core.html
+++ b/docs/core.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
  <head>
-    <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css">
+    <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <title>mini.css - Core</title>
    <meta charset="utf-8">
--- a/docs/customization.html
+++ b/docs/customization.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
  <head>
-    <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css">
+    <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <title>mini.css - Customization</title>
    <meta charset="utf-8">
@@ -86,7 +86,7 @@
      <div class="row">
        <div class="col-sm-12 col-md-6">
          <h3>Modules &amp; file structure</h3>
-          <p>At the heart of <strong>mini.css</strong> are modules - groups of classes and styles that aim to solve one set of needs. There are 10 modules in <strong>mini.css</strong>, which have been already written for you. All of the modules are built using partial files, named <code>_module_name.scss</code> and placed in the <code>src/mini</code> folder. You can edit any of the modules' code and/or add your own modules, following the same structure. The only thing you need to remember to do, in order to add your module to your flavor, is to add an <code>@import</code> statement at the very bottom of <code>_core.scss</code> and it will be compiled along with the rest of <strong>mini.css</strong>. Similarly, to disable a module, just comment out its <code>@import</code> statement from the core module.</p>
+          <p>At the heart of <strong>mini.css</strong> are modules - groups of classes and styles that aim to solve one set of needs. There are 10 modules in <strong>mini.css</strong>, which have been already written for you. All of the modules are built using partial files, named <code>_module_name.scss</code> and placed in the <code>src/mini</code> folder. You can edit any of the modules' code and/or add your own modules, following the same structure. The only thing you need to remember to do, in order to add your module to your flavor, is to add an <code>@import</code> statement after all the required variable declarations towards the bottom of your flavor file and it will be compiled along with the rest of <strong>mini.css</strong>. Similarly, to disable a module, just comment out its <code>@import</code> statement from the flavor file.</p>
        </div>
        <div class="col-sm-12 col-md-6">
          <h3>Variables</h3>
@@ -107,7 +107,7 @@
        <div class="col-sm-12">
        <br>
          <h2>Building a flavor</h2>
-          <p>Creating your own flavor can be as easy or as complicated as your needs. In this section, we will briefly walk you through most of the variables usually present in a flavor, along with some flags and mixins. This section serves as a complementary documentation to the comment column present in our pre-defined flavors, instead of a replacement and should be always viewed alongside it.</p><br>
+          <p>Creating your own flavor can be as easy or as complicated as your needs. Adding and removing modules is as simple as adding an <code>@import</code> statement or commenting it out, after declaring all the required variables. In this section, we will briefly walk you through most of the variables usually present in a flavor, along with some flags and mixins. This section serves as a complementary documentation to the comment column present in our pre-defined flavors, instead of a replacement and should be always viewed alongside it.</p><br>
          <div class="card fluid">
            <div class="section">
              <h3>Core</h3>
--- a/docs/flavors.html
+++ b/docs/flavors.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
  <head>
-    <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css">
+    <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <title>mini.css - Flavors</title>
    <meta charset="utf-8">
@@ -78,12 +78,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.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.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.0.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.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>
          </li>

--- a/docs/grid.html
+++ b/docs/grid.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
  <head>
-    <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css">
+    <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <title>mini.css - Grid</title>
    <meta charset="utf-8">
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
  <head>
-    <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css">
+    <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <title>mini.css - Minimal, responsive, style-agnostic CSS toolkit</title>
    <meta charset="utf-8">
@@ -109,7 +109,7 @@
        <div class="col-sm">
        <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>
+        <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.1/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">
--- a/docs/input_control.html
+++ b/docs/input_control.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
  <head>
-    <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css">
+    <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <title>mini.css - Input Control</title>
    <meta charset="utf-8">
--- a/docs/modules.html
+++ b/docs/modules.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
  <head>
-    <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css">
+    <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <title>mini.css - Modules</title>
    <meta charset="utf-8">
--- a/docs/navigation.html
+++ b/docs/navigation.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
  <head>
-    <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css">
+    <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <title>mini.css - Navigation</title>
    <meta charset="utf-8">
--- a/docs/progress.html
+++ b/docs/progress.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
  <head>
-    <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css">
+    <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <title>mini.css - Progress</title>
    <meta charset="utf-8">
--- a/docs/quick_reference.html
+++ b/docs/quick_reference.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
  <head>
-    <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css">
+    <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
    <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">
@@ -108,7 +108,7 @@
            </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>
+              <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.1/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">
--- a/docs/tab.html
+++ b/docs/tab.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
  <head>
-    <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css">
+    <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <title>mini.css - Tab</title>
    <meta charset="utf-8">
--- a/docs/table.html
+++ b/docs/table.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
  <head>
-    <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css">
+    <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <title>mini.css - Table</title>
    <meta charset="utf-8">
--- a/docs/utility.html
+++ b/docs/utility.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
  <head>
-    <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css">
+    <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.1/dist/mini-default.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <title>mini.css - Utility</title>
    <meta charset="utf-8">
--- a/docs/v2/DEVLOG.md
+++ b/docs/v2/DEVLOG.md
@@ -693,3 +693,15 @@
 - Added OpenGraph info to all pages.
 - Doc page code cleanup.
 - Updated everything, releasing **v2.0.0**.
+
+# v2.0.1 Development Log
+
+## 20161222
+
+- Merged the pull request from @roryprimrose.
+- Changed the `_typography.scss` file to `_core.scss`.
+- Moved the `@import` statements to the flavor files.
+- Updated `customization.html` to make sure the notes reflect the new structure of the toolkit.
+- Demo pages updated to use the latest version of the toolkit (v2.0.1).
+- Updated `CHANGELOG.md` to reflect new changes.
+- Moved mixin `@include` statements inside the flavor files.