2.0.1

Exported typography out of `_core.scss` into `_typography.scss`

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## v2.0.1
+
+- Updated module structure. `_core.scss` no longer contains all `@import` statements, but they are now included in the flavor files.
+- Updated documentation for customization to reflect said changes.
+
 ## v2.0.0
 
 - New version, rebuilt from scratch.

README.md

@@ -1,4 +1,4 @@
-# mini.css v2.0.0
+# mini.css v2.0.1
 ## A minimal, responsive, style-agnostic CSS toolkit
 
 ![Logo](/docs/page_thumb.PNG)
@@ -28,7 +28,28 @@ If you want to develop your own flavor or tweak an existing one, head over to th
 
 ## Contributing
 
-If you develop a flavor or module, please submit a pull request.
+### Flavors
+
+To develop your own flavor:
+
+- Fork into your own repository.
+- Add a flavor file in the `src/flavors` folder by duplicating an existing file and renaming it to whatever you want to name it. **Make sure there are no naming conflicts between your flavor and any of the existing flavors**. 
+- Edit the flavor file as you desire.
+- Submit a pull request. Please provide a brief description of your flavor and, if possible, a Codepen or some screenshots showcasing some of the styles in it.
+
+To develop a module:
+
+- Module contribution guidelines are very strict at the moment. New module will only be created upon request and **should always be in a new repository**, unless they are part of a Roadmap of a later version. Please submit an issue before developing a module or asking for new modules, as the discussion of said implementations is key to deciding the direction **mini.css** will follow in the future.
+
+To develop some other part of **mini.css**:
+
+- Create an issue for anything else.
+- If you make any changes, submit a pull request with as much information as possible about what you changed.
+
+## Contributors
+
+- Angelos Chalaris (@chalarangelo)
+- Rory Primrose (@roryprimrose)
 
 ## License
 

dist/mini-default.css

@@ -2,7 +2,7 @@
 /*
 	Flavor name: Default (mini-default)
 	Author: Angelos Chalaris (chalarangelo@gmail.com)
-	mini.css version: v2.0.0 (Fermion)
+	mini.css version: v2.0.1 (Fermion)
 */
 /* 
 	Browsers resets and base typography. 
@@ -817,6 +817,61 @@ input[type="file"] {
   background: #212121;
   content: ''; }
 
+/* 
+	Custom elements for forms and input elements. 
+*/
+button.primary, [type="button"].primary, [type="submit"].primary,
+[type="reset"].primary, .button.primary {
+  background: rgba(2, 119, 189, 0.9);
+  color: #fafafa; }
+  button.primary:hover, button.primary:active, button.primary:focus, [type="button"].primary:hover, [type="button"].primary:active, [type="button"].primary:focus, [type="submit"].primary:hover, [type="submit"].primary:active, [type="submit"].primary:focus,
+  [type="reset"].primary:hover,
+  [type="reset"].primary:active,
+  [type="reset"].primary:focus, .button.primary:hover, .button.primary:active, .button.primary:focus {
+    background: #0277bd; }
+
+button.secondary, [type="button"].secondary, [type="submit"].secondary,
+[type="reset"].secondary, .button.secondary {
+  background: rgba(198, 40, 40, 0.85);
+  color: #fafafa; }
+  button.secondary:hover, button.secondary:active, button.secondary:focus, [type="button"].secondary:hover, [type="button"].secondary:active, [type="button"].secondary:focus, [type="submit"].secondary:hover, [type="submit"].secondary:active, [type="submit"].secondary:focus,
+  [type="reset"].secondary:hover,
+  [type="reset"].secondary:active,
+  [type="reset"].secondary:focus, .button.secondary:hover, .button.secondary:active, .button.secondary:focus {
+    background: #c62828; }
+
+button.tertiary, [type="button"].tertiary, [type="submit"].tertiary,
+[type="reset"].tertiary, .button.tertiary {
+  background: rgba(85, 139, 47, 0.85);
+  color: #fafafa; }
+  button.tertiary:hover, button.tertiary:active, button.tertiary:focus, [type="button"].tertiary:hover, [type="button"].tertiary:active, [type="button"].tertiary:focus, [type="submit"].tertiary:hover, [type="submit"].tertiary:active, [type="submit"].tertiary:focus,
+  [type="reset"].tertiary:hover,
+  [type="reset"].tertiary:active,
+  [type="reset"].tertiary:focus, .button.tertiary:hover, .button.tertiary:active, .button.tertiary:focus {
+    background: #558b2f; }
+
+button.inverse, [type="button"].inverse, [type="submit"].inverse,
+[type="reset"].inverse, .button.inverse {
+  background: #212121;
+  color: #fafafa; }
+  button.inverse:hover, button.inverse:active, button.inverse:focus, [type="button"].inverse:hover, [type="button"].inverse:active, [type="button"].inverse:focus, [type="submit"].inverse:hover, [type="submit"].inverse:active, [type="submit"].inverse:focus,
+  [type="reset"].inverse:hover,
+  [type="reset"].inverse:active,
+  [type="reset"].inverse:focus, .button.inverse:hover, .button.inverse:active, .button.inverse:focus {
+    background: rgba(33, 33, 33, 0.9); }
+
+button.small, [type="button"].small, [type="submit"].small,
+[type="reset"].small, .button.small {
+  border-radius: 1px;
+  padding: 4px 6px;
+  margin: 6px 8px; }
+
+button.large, [type="button"].large, [type="submit"].large,
+[type="reset"].large, .button.large {
+  border-radius: 4px;
+  padding: 12px 18px;
+  margin: 10px 8px; }
+
 /* 
 	Definitions for the responsive table component. 
 */
@@ -1038,6 +1093,37 @@ table.striped tr:nth-of-type(2n) > td {
 @media (min-width: 320px) {
   .card {
     max-width: 320px; } }
+/* 
+	Custom elements for cards and containers. 
+*/
+@media (min-width: 480px) {
+  .card.large {
+    max-width: 480px; } }
+@media (min-width: 240px) {
+  .card.small {
+    max-width: 240px; } }
+.card.fluid {
+  max-width: 100%;
+  width: auto; }
+
+.card.inverse {
+  background: #212121;
+  color: #fafafa;
+  border: 1px solid #424242; }
+  .card.inverse > .section {
+    border-bottom: 1px solid #616161; }
+  .card.inverse > .section:last-child {
+    border-bottom: 0; }
+
+.card > .section.dark {
+  background: #e0e0e0; }
+
+.card > .section.darker {
+  background: #bdbdbd; }
+
+.card > .section.double-padded {
+  padding: 10px 12px 10px; }
+
 /* 
 	Definitions for tabs/horizontal accordions. 
 */
@@ -1199,6 +1285,37 @@ mark {
     -webkit-animation: alert-anim 6s linear infinite;
     animation: alert-anim 6s linear infinite; }
 
+/* 
+	Custom contextual background elements and alerts. 
+*/
+mark.secondary {
+  background: #f44336; }
+
+mark.tertiary {
+  background: #558b2f; }
+
+mark.tag {
+  border-radius: 200px;
+  padding: 4px 8px; }
+
+mark.inline-block {
+  font-size: 100%;
+  line-height: 1.35;
+  padding: 5px; }
+
+.alert.urgent {
+  background: #ffca28; }
+
+.alert.critical {
+  background: #b71c1c;
+  color: #fafafa; }
+
+.alert.urgent {
+  border: 1px solid #ff8f00; }
+
+.alert.critical {
+  border: 1px solid #d50000; }
+
 /*
 	Definitions for progress elements and spinners. 
 */
@@ -1256,6 +1373,62 @@ progress {
   -webkit-animation: spinner-donut-anim 1.2s linear infinite;
   animation: spinner-donut-anim 1.2s linear infinite; }
 
+/* 
+	Custom elements for progress elements and spinners. 
+*/
+progress.inline {
+  display: inline-block;
+  vertical-align: middle;
+  width: 60%; }
+
+progress.secondary {
+  color: #e53935; }
+  progress.secondary::-webkit-progress-value {
+    background: #e53935; }
+  progress.secondary::-moz-progress-bar {
+    background: #e53935; }
+
+progress.tertiary {
+  color: #689f38; }
+  progress.tertiary::-webkit-progress-value {
+    background: #689f38; }
+  progress.tertiary::-moz-progress-bar {
+    background: #689f38; }
+
+progress.nano {
+  height: 2px;
+  width: 100%;
+  margin: 0 auto;
+  border-radius: 0; }
+  progress.nano::-webkit-progress-value {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0; }
+  progress.nano::-moz-progress-bar {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0; }
+  progress.nano[value="1000"]::-webkit-progress-value {
+    border-radius: 0; }
+  progress.nano[value="1000"]::-moz-progress-bar {
+    border-radius: 0; }
+
+@supports (width: calc(100% - 2*0)) or (width: -webkit-calc(100% - 2*0)) {
+  progress.nano {
+    width: -webkit-calc(100% - 2*0);
+    width: calc(100% - 2*0);
+    margin: 0 0; } }
+.spinner-donut.secondary {
+  border: 4px solid #ffebee;
+  border-left: 4px solid #c62828; }
+
+.spinner-donut.tertiary {
+  border: 4px solid #e8f5e9;
+  border-left: 4px solid #2e7d32; }
+
+.spinner-donut.large {
+  border-width: 6px;
+  width: 32px;
+  height: 32px; }
+
 /* 
 	Definitions for utilities and helper classes. 
 */
@@ -1359,179 +1532,6 @@ ul.breadcrumbs {
   margin-left: auto !important;
   margin-right: auto !important; }
 
-/* 
-	Custom elements for forms and input elements. 
-*/
-button.primary, [type="button"].primary, [type="submit"].primary,
-[type="reset"].primary, .button.primary {
-  background: rgba(2, 119, 189, 0.9);
-  color: #fafafa; }
-  button.primary:hover, button.primary:active, button.primary:focus, [type="button"].primary:hover, [type="button"].primary:active, [type="button"].primary:focus, [type="submit"].primary:hover, [type="submit"].primary:active, [type="submit"].primary:focus,
-  [type="reset"].primary:hover,
-  [type="reset"].primary:active,
-  [type="reset"].primary:focus, .button.primary:hover, .button.primary:active, .button.primary:focus {
-    background: #0277bd; }
-
-button.secondary, [type="button"].secondary, [type="submit"].secondary,
-[type="reset"].secondary, .button.secondary {
-  background: rgba(198, 40, 40, 0.85);
-  color: #fafafa; }
-  button.secondary:hover, button.secondary:active, button.secondary:focus, [type="button"].secondary:hover, [type="button"].secondary:active, [type="button"].secondary:focus, [type="submit"].secondary:hover, [type="submit"].secondary:active, [type="submit"].secondary:focus,
-  [type="reset"].secondary:hover,
-  [type="reset"].secondary:active,
-  [type="reset"].secondary:focus, .button.secondary:hover, .button.secondary:active, .button.secondary:focus {
-    background: #c62828; }
-
-button.tertiary, [type="button"].tertiary, [type="submit"].tertiary,
-[type="reset"].tertiary, .button.tertiary {
-  background: rgba(85, 139, 47, 0.85);
-  color: #fafafa; }
-  button.tertiary:hover, button.tertiary:active, button.tertiary:focus, [type="button"].tertiary:hover, [type="button"].tertiary:active, [type="button"].tertiary:focus, [type="submit"].tertiary:hover, [type="submit"].tertiary:active, [type="submit"].tertiary:focus,
-  [type="reset"].tertiary:hover,
-  [type="reset"].tertiary:active,
-  [type="reset"].tertiary:focus, .button.tertiary:hover, .button.tertiary:active, .button.tertiary:focus {
-    background: #558b2f; }
-
-button.inverse, [type="button"].inverse, [type="submit"].inverse,
-[type="reset"].inverse, .button.inverse {
-  background: #212121;
-  color: #fafafa; }
-  button.inverse:hover, button.inverse:active, button.inverse:focus, [type="button"].inverse:hover, [type="button"].inverse:active, [type="button"].inverse:focus, [type="submit"].inverse:hover, [type="submit"].inverse:active, [type="submit"].inverse:focus,
-  [type="reset"].inverse:hover,
-  [type="reset"].inverse:active,
-  [type="reset"].inverse:focus, .button.inverse:hover, .button.inverse:active, .button.inverse:focus {
-    background: rgba(33, 33, 33, 0.9); }
-
-button.small, [type="button"].small, [type="submit"].small,
-[type="reset"].small, .button.small {
-  border-radius: 1px;
-  padding: 4px 6px;
-  margin: 6px 8px; }
-
-button.large, [type="button"].large, [type="submit"].large,
-[type="reset"].large, .button.large {
-  border-radius: 4px;
-  padding: 12px 18px;
-  margin: 10px 8px; }
-
-/* 
-	Custom elements for cards and containers. 
-*/
-@media (min-width: 480px) {
-  .card.large {
-    max-width: 480px; } }
-@media (min-width: 240px) {
-  .card.small {
-    max-width: 240px; } }
-.card.fluid {
-  max-width: 100%;
-  width: auto; }
-
-.card.inverse {
-  background: #212121;
-  color: #fafafa;
-  border: 1px solid #424242; }
-  .card.inverse > .section {
-    border-bottom: 1px solid #616161; }
-  .card.inverse > .section:last-child {
-    border-bottom: 0; }
-
-.card > .section.dark {
-  background: #e0e0e0; }
-
-.card > .section.darker {
-  background: #bdbdbd; }
-
-.card > .section.double-padded {
-  padding: 10px 12px 10px; }
-
-/* 
-	Custom contextual background elements and alerts. 
-*/
-mark.secondary {
-  background: #f44336; }
-
-mark.tertiary {
-  background: #558b2f; }
-
-mark.tag {
-  border-radius: 200px;
-  padding: 4px 8px; }
-
-mark.inline-block {
-  font-size: 100%;
-  line-height: 1.35;
-  padding: 5px; }
-
-.alert.urgent {
-  background: #ffca28; }
-
-.alert.critical {
-  background: #b71c1c;
-  color: #fafafa; }
-
-.alert.urgent {
-  border: 1px solid #ff8f00; }
-
-.alert.critical {
-  border: 1px solid #d50000; }
-
-/* 
-	Custom elements for progress elements and spinners. 
-*/
-progress.inline {
-  display: inline-block;
-  vertical-align: middle;
-  width: 60%; }
-
-progress.secondary {
-  color: #e53935; }
-  progress.secondary::-webkit-progress-value {
-    background: #e53935; }
-  progress.secondary::-moz-progress-bar {
-    background: #e53935; }
-
-progress.tertiary {
-  color: #689f38; }
-  progress.tertiary::-webkit-progress-value {
-    background: #689f38; }
-  progress.tertiary::-moz-progress-bar {
-    background: #689f38; }
-
-progress.nano {
-  height: 2px;
-  width: 100%;
-  margin: 0 auto;
-  border-radius: 0; }
-  progress.nano::-webkit-progress-value {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0; }
-  progress.nano::-moz-progress-bar {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0; }
-  progress.nano[value="1000"]::-webkit-progress-value {
-    border-radius: 0; }
-  progress.nano[value="1000"]::-moz-progress-bar {
-    border-radius: 0; }
-
-@supports (width: calc(100% - 2*0)) or (width: -webkit-calc(100% - 2*0)) {
-  progress.nano {
-    width: -webkit-calc(100% - 2*0);
-    width: calc(100% - 2*0);
-    margin: 0 0; } }
-.spinner-donut.secondary {
-  border: 4px solid #ffebee;
-  border-left: 4px solid #c62828; }
-
-.spinner-donut.tertiary {
-  border: 4px solid #e8f5e9;
-  border-left: 4px solid #2e7d32; }
-
-.spinner-donut.large {
-  border-width: 6px;
-  width: 32px;
-  height: 32px; }
-
 /* 
 	Custom elements for utilities and helper classes. 
 */

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">

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">

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">

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>

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>
 

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">

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">

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">

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">

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">

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">

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">

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">

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">

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">

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.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mini.css",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "A minimal, responsive, style-agnostic CSS toolkit.",
   "main": "flavors/mini-default.min.css",
   "directories": {

src/flavors/mini-default.scss

@@ -4,7 +4,7 @@
 /*
 	Flavor name: Default (mini-default)
 	Author: Angelos Chalaris (chalarangelo@gmail.com)
-	mini.css version: v2.0.0 (Fermion)
+	mini.css version: v2.0.1 (Fermion)
 */
 //	Basic rules for body and typography
 $fore-color:					#212121;										// Text and general foreground color
@@ -525,9 +525,12 @@ $responsive-padding-large-value:6px 8px;										// Padding value for responsiv
 $float-prefix:					'float';										// Prefix for float classes
 $clearfix-name:					'clearfix';										// Class name for clearfix
 $center-block-name:				'center-block';									// Class name for center block
-//	Enable mini.css
+// Load modules. If you do not want to use a module, comment out its `@import` statement, along with any mixin `@include`s that are part of
+// that module and marked as such below it.
 @import '../mini/core';
-//	Use mixins for forms and inputs
+@import '../mini/grid';
+@import '../mini/navigation';
+@import '../mini/input_control';
 /* 
 	Custom elements for forms and input elements. 
 */
@@ -543,7 +546,8 @@ $center-block-name:				'center-block';									// Class name for center block
 	$button-style1-border-radius, $button-style1-padding, $button-style1-margin);
 @include make-button-alt-style ($button-style2-name, $button-style2-border-style,
 	$button-style2-border-radius, $button-style2-padding, $button-style2-margin);
-//	Use mixins for cards
+@import '../mini/table';
+@import '../mini/card';
 /* 
 	Custom elements for cards and containers. 
 */
@@ -557,7 +561,8 @@ $center-block-name:				'center-block';									// Class name for center block
 @include make-card-section-alt-color ($card-section-style2-name, $card-section-style2-back-color, 
 	$card-section-style2-fore-color);
 @include make-card-section-alt-style ($card-section-padding1-name, $card-section-padding1-padding);
-//	Use mixins for contextual background elements and alerts
+@import '../mini/tab';
+@import '../mini/contextual';
 /* 
 	Custom contextual background elements and alerts. 
 */
@@ -571,7 +576,7 @@ $center-block-name:				'center-block';									// Class name for center block
 @include make-alert-alt-color ($alert-variant2-name, $alert-variant2-back-color, $alert-variant2-fore-color);
 @include make-alert-alt-style ($alert-style1-name, $alert-style1-border-style, $alert-style1-border-radius);
 @include make-alert-alt-style ($alert-style2-name, $alert-style2-border-style, $alert-style2-border-radius);
-//	Use mixins for progress elements and spinners
+@import '../mini/progress';
 /* 
 	Custom elements for progress elements and spinners. 
 */
@@ -587,7 +592,7 @@ $center-block-name:				'center-block';									// Class name for center block
 	$spinner-donut-variant2-fore-color);
 @include make-spinner-donut-alt-style ($spinner-donut-style1-name, $spinner-donut-style1-size, 
 	$spinner-donut-style1-border-thickness);
-//	Use mixins for utilities and helper classes
+@import '../mini/utility';
 /* 
 	Custom elements for utilities and helper classes. 
 */

src/mini/_core.scss

@@ -406,14 +406,4 @@ a{
 			color: $link-hover-fore-color;
 		}
 	}
-}
-// External file loading. You can comment out modules you do not want to use.
-@import 'grid';
-@import 'navigation';
-@import 'input_control';
-@import 'table';
-@import 'card';
-@import 'tab';
-@import 'contextual';
-@import 'progress';
-@import 'utility';
+}