From 3c005b8f0565c8025f19752d5b6b48a42362ec79 Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Fri, 21 Oct 2016 17:50:43 +0300
Subject: [PATCH] Updated demo, deploying

---
 docs/v2/DEVLOG.md   |   5 +-
 docs/v2/favicon.PNG | Bin 1817 -> 1699 bytes
 docs/v2/index.html  | 143 +++++++++++++++++++++++---------------------
 3 files changed, 80 insertions(+), 68 deletions(-)

diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md
index 7bcc583..f3466ef 100644
--- a/docs/v2/DEVLOG.md
+++ b/docs/v2/DEVLOG.md
@@ -153,4 +153,7 @@
 - Added definitions for small screen sizes, optimized, test on local demo.
 - Added definitions for medium and large screen sizes, optimized and tested locally.
 - Updated grid definitions to add `$grid-column-padding` so that users can customize the padding for columns.
-- Rebuilt demo page from scratch for version 2, added a lot of nice styles etc.
\ No newline at end of file
+- Rebuilt demo page from scratch for version 2, added a lot of nice styles etc.
+- Updated the edges of the favicon.
+- Added grid demo on live page.
+- Deployed live demo.
diff --git a/docs/v2/favicon.PNG b/docs/v2/favicon.PNG
index 934d33a389c7189e07027b4349e2916752ba81ee..56649a3d4b1276b591cf3e0db5b6796c4d538ad1 100644
GIT binary patch
delta 1646
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

delta 1765
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
Hu0mjfp{qy2

diff --git a/docs/v2/index.html b/docs/v2/index.html
index de764db..ffc491b 100644
--- a/docs/v2/index.html
+++ b/docs/v2/index.html
@@ -8,10 +8,10 @@
     <meta name="keywords" content="mini, mini.css, CSS, responsive, framework, mobile first, style agnostic, Sass">
     <meta name="author" content="Angelos Chalaris (chalarangelo)">
     <link rel="icon" type="image/png" href="favicon.png">
-    <!-- Live demo styled as of commit 42817a3 (20161014) -->
-    <!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/9f771efecf44e0600e2359690be260181aad8290/flavors/v2/mini-default.min.css"> -->
-    <link rel="stylesheet" href="../../flavors/v2/mini-default.css">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
+    <!-- Live demo styled as of 20161021 -->
+    <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/a97fea6596ae4692eb019b19877e4f3a1fc5f3d0/flavors/v2/mini-default.min.css">
+    <link rel="stylesheet" href="../../flavors/v2/mini-default.css">   
     <style>
       #top-logo {
         display: inline-block;  height: 66px; width: 70px;  margin: 64px auto -30px; border-radius: 1px;
@@ -24,6 +24,7 @@
         padding: 3px 5px; 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;}
     </style>
   </head>
   <body>  
@@ -76,7 +77,7 @@
       <div class="row">
         <div class="col-xs">
           <div>
-            <h2>Typography <small>Style for common textual elements</small></h2>
+            <h2>Typography <small>Styles for common textual elements</small></h2>
           </div>
         </div>
       </div>
@@ -117,71 +118,79 @@
           </div>
         </div>
       </div>
-    </div>
-
-
-  <!-- span style="text-align: center;">
-  <img src="mini-logo.svg" style="display: block; height: 80px; width: 84px; margin: 10px auto -14px; background: #558b2f; border-radius: 6px; padding: 8px; padding-top: 12px;">
-  <h1>mini.css v2.0 - <span style="color: #558b2f; line-height: 1em;">Fermion</span><small>Minimal responsive style-agnostic front end framework</small></h1>
-  <p style="margin-top: -1em;">
-    <a class="github-button" href="https://github.com/chalarangelo/mini.css" data-icon="octicon-eye" data-count-href="/chalarangelo/mini.css/watchers" data-count-api="/repos/chalarangelo/mini.css#subscribers_count" data-count-aria-label="# watchers on GitHub" aria-label="Watch chalarangelo/mini.css on GitHub">Watch</a>
-    <a class="github-button" href="https://github.com/chalarangelo/mini.css" data-icon="octicon-star" data-count-href="/chalarangelo/mini.css/stargazers" data-count-api="/repos/chalarangelo/mini.css#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star chalarangelo/mini.css on GitHub">Star</a>
-    <a class="github-button" href="https://github.com/chalarangelo/mini.css/fork" data-icon="octicon-repo-forked" data-count-href="/chalarangelo/mini.css/network" data-count-api="/repos/chalarangelo/mini.css#forks_count" data-count-aria-label="# forks on GitHub" aria-label="Fork chalarangelo/mini.css on GitHub">Fork</a>
-  </p></span>
-  <hr>
-
-  <p><strong>v2.0</strong> is currently in development. The following page and any related links are going to be incomplete, buggy and/or unstable. But, if you are interested in seeing what it will look like, have a peek!</p>
-  <h1>Heading 1 <small>small text</small></h1>
-  <h2>Heading 2 <small>small text</small></h2>
-  <h3>Heading 3 <small>small text</small></h3>
-  <h4>Heading 4 <small>small text</small></h4>
-  <h5>Heading 5 <small>small text</small></h5>
-  <h6>Heading 6 <small>small text</small></h6>
-  <hr>
-  <p>This is some text with an inline block of <code>code</code>.</p>
-  <p>This is some text with an inline block of <kbd>input</kbd>.</p>
-  <p>Preformatted block of code:</p>
-  <pre>Line 1 {
-    Stuff here....
-}</pre>
-  <hr>
-  <p>This is some text with <small>small text</small>, superscript<sup>12</sup> and subscript<sub>4</sub>. Oh, I am a <mark>primary mark</mark> and I am a <mark class="secondary">secondary mark</mark> and I am a <mark class="tertiary">tertiary mark</mark>.</p>
-  <p>Tag marks are like this: <mark class="tag">primary mark</mark>, <mark class="tag secondary">secondary mark</mark>, <mark class="tag tertiary">tertiary mark</mark>.</p>
-  <p>Bubble marks are like this: <mark class="bubble">primary mark</mark>, <mark class="bubble secondary">secondary mark</mark>, <mark class="bubble tertiary">tertiary mark</mark>.</p>
-  <h3>I am a header with <mark class="bubble secondary">bubbles</mark> and <mark class="tag">tags</mark></h3>
-  <p>I am a paragraph and I have a <a href="https://github.com/Chalarangelo/mini.css">link to the Github repo</a>.</p>
-  <p>I have an <abbr title="Abra Kadabra Abbreviation Shazam!">Abra</abbr> to check the styling.</p>
-  <button onclick="document.getElementById('test-prog').setAttribute('value',parseInt(document.getElementById('test-prog').getAttribute('value'))+5);">Click me to advance progress bar</button> 
-  <p>I am a line of text with inline progress: <progress class="inline" value="75" max="100"></progress> Do you like me?</p>
-  <progress id="test-prog" value="40" max="100"></progress>
-  <progress class="secondary" value="25" max="100"></progress>
-  <progress class="tertiary" value="60" max="100"></progress>
-  <br>
-  <progress class="nano" value="35" max="100" style="position: fixed; top:0; left:0;"></progress>
-  <style>.box-row { border: 1px solid black; border-radius: 2px; }</style>
-  <div class="container">
-    <div class="row">
-      <div class="col-xs col-sm-2 col-sm-offset-1 col-md-6 col-md-offset-0 col-lg">
-        <div class="box-row">col-xs</div>
+      <div class="row">
+        <div class="col-xs">
+          <div>
+            <hr>
+            <h2>Grid system <small>Easy layout using flexbox</small></h2>
+          </div>
+        </div>
       </div>
-      <div class="col-xs-2 col-sm col-md col-lg">
-        <div class="box-row">col-xs-2</div>
-      </div>
-      <div class="col-xs-3 col-xs-offset-1 col-sm col-sm-offset-0 col-md col-lg-7">
-        <div class="box-row">col-xs-3 col-xs-offset-1</div>
-      </div>
-      <div class="col-xs col-sm-6 col-md col-lg">
-        <div class="box-row">col-xs</div>
+      <div class="row">
+        <div class="col-xs">
+          <div>
+            <p><strong>mini.css</strong> uses the Flexible Layout Module (commonly known as <code>flexbox</code>) to create a grid system for easy page layout. The grid system is not the most feature-rich one, but it contains all the essential components. The <code>container</code> of the grid is fluid by default, meaning it will adjust to fill its parent container. Rows are easily created using the <code>row</code> class and columns can be created using the usual <code>col-SZ-XX</code> syntax where <code>SZ</code> and <code>XX</code> are replaced by a screen size and a number of vertical columns respectively. Columns can also scale themselves automatically if you omit the number of vertical columns in the class name. Similarly, you can use offsets with the <code>col-SZ-offset-XX</code> syntax. The <strong>default</strong> grid is separated into 12 vertical columns. You can see some examples below.</p><br>
+          </p></div>
+          <div class="container">
+            <div class="row">
+              <div class="col-xs">
+                <div class="box-colored"></div>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-xs-6">
+                <div class="box-colored"></div>
+              </div>
+              <div class="col-xs-6">
+                <div class="box-colored"></div>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-xs-7">
+                <div class="box-colored"></div>
+              </div>
+              <div class="col-xs-5">
+                <div class="box-colored"></div>
+              </div>
+            </div> 
+            <div class="row">
+              <div class="col-xs-2">
+                <div class="box-colored"></div>
+              </div>
+              <div class="col-xs-4">
+                <div class="box-colored"></div>
+              </div>
+              <div class="col-xs-6">
+                <div class="box-colored"></div>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-xs-6 col-xs-offset-3">
+                <div class="box-colored"></div>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-xs-4 col-xs-offset-2">
+                <div class="box-colored"></div>
+              </div>
+              <div class="col-xs-4">
+                <div class="box-colored"></div>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-xs-3 col-xs-offset-1">
+                <div class="box-colored"></div>
+              </div>
+              <div class="col-xs-2 col-xs-offset-3">
+                <div class="box-colored"></div>
+              </div>
+              <div class="col-xs">
+                <div class="box-colored"></div>
+              </div>
+            </div>
+          </div>
+          </div>
       </div>
     </div>
-    <div class="row">
-      <div class="col-xs col-sm-5 col-md col-md-offset-1 col-lg col-lg-offset-2">
-        <div class="box-row">col-xs: The first JavaScript engine. Coffeescript is a JavaScript program could then interrogate and manipulate to dynamically generate Web pages. The name is by far the most common host environment. JavaScript programmers. Facebook for building user interfaces. </div>
-      </div>
-      <div class="col-xs col-sm-5 col-sm-offset-2 col-md col-md-offset-1 col-lg col-lg-offset-2">
-        <div class="box-row">col-xs: I/O, such as Self and Scheme. Javascript NoSQL database. AngularJS, and Node. ECMAScript 3 compliant. Coffeescript is a package manager for front-end dependencies. JSX is an assertion library used with a JavaScript checker and optimizer. PhantomJS is a community-driven attempt at explaining the loads of buzzwords making the current JavaScript ecosystem in a few simple words. ECMAScript ES is the standardized specification of the desired DOM is a software design pattern used to speed up the setup and installation process of a function that gets called immediately after declaration Jasmine is a JavaScript web framework that allows rapid prototypic web development. LocalForage is a structural framework for dynamic web apps. ECMAScript language specification. JavaScript ecosystem in a user's browser rather than on a Web form to make it happen. The name is by analogy to an architectural facade. ES is the only language that the *revealing module pattern* was engineered as a way to ensure that all methods and variables are kept private until they are explicitly exposed. SJSJ is a generator builder to speed up consecutive function calls by caching the result of calls with identical input.</div>
-      </div>
-    </div>
-  </div> -->
   </body>
 </html>
\ No newline at end of file