v1.0.85

sebastienrousseau · Feb 15, 2018 · 74abf23 · 74abf23
1 parent 9ba81ae
commit 74abf23
Show file tree

Hide file tree

Showing 40 changed files with 1,332 additions and 65 deletions.
diff --git a/README.md b/README.md
@@ -4,15 +4,16 @@
 	</a>  
 </p>
 
-<h3 align="center">Introducing Skeletonic v1.0.83</h3>
+<h3 align="center">Introducing Skeletonic v1.0.85</h3>
 
 <p align="center">Skeletonic is a lightweight, intuitive and ultra-responsive CSS framework to speed up your Digital and Mobile Web development needs.</p>
 
 <p align="center">Simply designed to fit your web life.</p>
 
-<p align="center"><a href="https://github.com/reedia/skeletonic/archive/v1.0.83.zip">Download Skeletonic CSS</a></p>
+<p align="center"><a href="https://github.com/reedia/skeletonic/archive/v1.0.85.zip">Download Skeletonic CSS</a></p>
 
 [![NPM](https://nodei.co/npm/skeletonic.png)](https://nodei.co/npm/skeletonic/)
+
 [![npm version](https://badge.fury.io/js/skeletonic.svg)](https://badge.fury.io/js/skeletonic)
 [![Build Status](https://travis-ci.org/reedia/skeletonic.svg?branch=master)](https://travis-ci.org/reedia/skeletonic)
 [![Packagist](https://img.shields.io/badge/license-MIT-blue.svg)](https://skeletonic.github.io/license)
@@ -34,25 +35,34 @@
 
 A few options are available:
 
--   Download the latest [release](https://github.com/reedia/skeletonic/archive/v1.0.83.zip)
--   Or simply clone the main repo: `git clone https://github.com/reedia/skeletonic.git`
+-   Download the latest [release](https://github.com/reedia/skeletonic/archive/v1.0.85.zip)
+-   Install with [Npm](https://www.npmjs.com/package/skeletonic) to get the pre-built CSS and sourcemaps. This is recommended when using Skeletonic for a typical web project: 
+
+```bash
+npm install skeletonic
+```
+
+-   Or simply clone the main repository to get all source files including build scripts: `git clone https://github.com/reedia/skeletonic.git`
 
 ## What's in the box
 
-Within the release you'll find the following directory and external style sheets with both compiled and minified CSS variations:
+The Github project contains all source files which are compiled into the dist folder. Within the release you'll find the following directory and external style sheets with both compiled, minified CSS variations and CSS sourcemaps:
 
 ```
 Skeletonic
 ├── index.html
-├── skeletonic-1.0.83.css
-├── skeletonic-1.0.83.css.map
-├── skeletonic-colours-1.0.83.css
-├── skeletonic-colours-1.0.83.css.map
-├── skeletonic-colours.min-1.0.83.css
-├── skeletonic-pattern-1.0.83.css
-├── skeletonic-pattern-1.0.83.css.map
-├── skeletonic-pattern.min-1.0.83.css
-└── skeletonic.min-1.0.83.css
+├── skeletonic-1.0.85.css
+├── skeletonic-1.0.85.css.map
+├── skeletonic-animations-1.0.85.css
+├── skeletonic-animations-1.0.85.css.map
+├── skeletonic-animations.min-1.0.85.css
+├── skeletonic-colours-1.0.85.css
+├── skeletonic-colours-1.0.85.css.map
+├── skeletonic-colours.min-1.0.85.css
+├── skeletonic-pattern-1.0.85.css
+├── skeletonic-pattern-1.0.85.css.map
+├── skeletonic-pattern.min-1.0.85.css
+└── skeletonic.min-1.0.85.css
 ```
 
 You simply then need to link one of these in your HTML document.
@@ -62,33 +72,38 @@ The link consists of just a simple line of HTML code that you will need to put i
 #### Default CSS
 
 ```
-<link rel="stylesheet" type="text/css" href="skeletonic.min-1.0.83.css" />
+<link rel="stylesheet" type="text/css" href="skeletonic.min-1.0.85.css" />
+```
+
+We also offer production-ready versions and use unpkg as our CDN to link to the latest production version
+
+```
+<link rel="stylesheet" type="text/css" href="https://unpkg.com/skeletonic" />
 ```
 
 #### CSS Responsive Grid-View
 ```
-<link rel="stylesheet" type="text/css" href="skeletonic-pattern.min-1.0.83.css" />
+<link rel="stylesheet" type="text/css" href="skeletonic-pattern.min-1.0.85.css" />
 ```
 
 #### CSS Colours
 ```
-<link rel="stylesheet" type="text/css" href="skeletonic-colours.min-1.0.83.css" />
+<link rel="stylesheet" type="text/css" href="skeletonic-colours.min-1.0.85.css" />
 ```
 
-We offer production-ready versions and use unpkg as our CDN to link to the latest production version
-
+#### CSS Animations
 ```
-<link rel="stylesheet" type="text/css" href="https://unpkg.com/skeletonic" />
+<link rel="stylesheet" type="text/css" href="skeletonic-animations.min-1.0.85.css" />
 ```
 
 ## Alternate CDNs
 The following table lists alternate CDNs where Skeletonic is hosted.
 
 | CDN | URL | HTTPS | Combo |
 |---|---|---|---|
-| [unpkg](https://unpkg.com/) | https://unpkg.com/skeletonic@1.0.83/dist/skeletonic.min-1.0.83.css | Yes | No |
-| [jsDelivr](https://www.jsdelivr.com/) | https://cdn.jsdelivr.net/npm/skeletonic/dist/skeletonic.min-1.0.83.css  | Yes | Yes |
-| [RawGit](http://rawgit.com/) | https://cdn.rawgit.com/reedia/skeletonic/master/dist/skeletonic.min-1.0.83.css | Yes | No |
+| [unpkg](https://unpkg.com/) | https://unpkg.com/skeletonic@1.0.85/dist/skeletonic.min-1.0.85.css | Yes | No |
+| [jsDelivr](https://www.jsdelivr.com/) | https://cdn.jsdelivr.net/npm/skeletonic/dist/skeletonic.min-1.0.85.css  | Yes | Yes |
+| [RawGit](http://rawgit.com/) | https://cdn.rawgit.com/reedia/skeletonic/master/dist/skeletonic.min-1.0.85.css | Yes | No |
 
 
 

diff --git a/dist/index.html b/dist/index.html
@@ -3,15 +3,16 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta name="keywords" content="skeletonic,skeletonic-1.0.83.css,CSS,lightweight,dead on,responsive,framework,semantic,mobile-first,modern,style-agnostic,front-end,frontend,grid system,typography">
+  <meta name="keywords" content="skeletonic,skeletonic-1.0.85.css,CSS,lightweight,dead on,responsive,framework,semantic,mobile-first,modern,style-agnostic,front-end,frontend,grid system,typography">
   <meta name="description" content="Skeletonic is a lightweight, intuitive and ultra-responsive CSS framework to speed up your Digital and Mobile Web development needs.">
   <meta name="author" content="Reedia Limited">
 
   <title>Skeletonic - a lightweight, intuitive and ultra-responsive CSS framework</title>
 
-  <!-- <link rel="stylesheet" type="text/css" href="./skeletonic-pattern.min-1.0.83.css" /> -->
-  <link rel="stylesheet" type="text/css" href="./skeletonic-colours-1.0.83.css" />
-  <link rel="stylesheet" type="text/css" href="./skeletonic-1.0.83.css" />
+  <!-- <link rel="stylesheet" type="text/css" href="./skeletonic-pattern.min-1.0.85.css" /> -->
+  <link rel="stylesheet" type="text/css" href="./skeletonic-colours-1.0.85.css" />
+  <link rel="stylesheet" type="text/css" href="./skeletonic-animations-1.0.85.css" />
+  <link rel="stylesheet" type="text/css" href="./skeletonic-1.0.85.css" />
 
 </head>
 
@@ -23,8 +24,8 @@
         <h1>Introducing Skeletonic</h1>
         <p>Skeletonic is a lightweight, intuitive and ultra-responsive CSS framework to speed up your Digital and Mobile Web development needs.</p>
         <p>Simply designed to fit your web life.</p>
-        <p><em>Version: 1.0.83</em></p>
-        <p><a href="https://github.com/reedia/skeletonic/archive/v1.0.83.zip" class="button">Download Skeletonic CSS</a></p>
+        <p><em>Version: 1.0.85</em></p>
+        <p><a href="https://github.com/reedia/skeletonic/archive/v1.0.85.zip" class="button">Download Skeletonic CSS</a></p>
       </row>
     </section>
 
@@ -204,7 +205,7 @@ <h3>Image 04</h3>
       <row class="flex-10">
         <h3>Background colours</h3>
         <p>
-          <em>You will need to import <b>skeletonic-colours-1.0.83.css</b> to display the colours. The background colours are based on <a href="https://material.io/guidelines/style/color.html">Google's Material Design Colour palette</a>.</em>
+          <em>You will need to import <b>skeletonic-colours-1.0.85.css</b> to display the colours. The background colours are based on <a href="https://material.io/guidelines/style/color.html">Google's Material Design Colour palette</a>.</em>
         </p>
       </row>
       </section>
@@ -239,7 +240,7 @@ <h3>Background colours</h3>
       <row class="flex-10">
         <h3>Text colours</h3>
         <p>
-          <em>You will need to import <b>skeletonic-colours-1.0.83.css</b> to display the colours. The colours are based on <a href="https://material.io/guidelines/style/color.html">Google's Material Design Colour palette</a>.</em>
+          <em>You will need to import <b>skeletonic-colours-1.0.85.css</b> to display the colours. The colours are based on <a href="https://material.io/guidelines/style/color.html">Google's Material Design Colour palette</a>.</em>
         </p>
       </row>
       </section>
@@ -362,7 +363,7 @@ <h3>Links</h3>
       <row class="flex-10">
         <h3>Buttons</h3>
         <p><em>Default buttons style.</em></p>
-        <p><a href="https://github.com/reedia/skeletonic/archive/v1.0.83.zip" target="_blank" class="button">Download skeletonic-1.0.83.css</a></p>
+        <p><a href="https://github.com/reedia/skeletonic/archive/v1.0.85.zip" target="_blank" class="button">Download skeletonic-1.0.85.css</a></p>
         <h4>Button's states</h4>
         <p><em>Multiple buttons states.</em></p>
         <p>
@@ -405,11 +406,11 @@ <h3>Select</h3>
         <select>
           <option value="">Choose an item...</option>
           <optgroup label="Original CSS">
-            <option value="">skeletonic-1.0.83.css</option>
+            <option value="">skeletonic-1.0.85.css</option>
             <option value="">skeletonic-pattern.css</option>
           </optgroup>
           <optgroup label="Minified CSS">
-            <option value="">skeletonic.min-1.0.83.css</option>
+            <option value="">skeletonic.min-1.0.85.css</option>
             <option value="">skeletonic-pattern.min.css</option>
           </optgroup>
         </select>
@@ -422,7 +423,73 @@ <h3>Divider</h3>
         <hr />
       </row>
     </section>
-
+    <hr />
+    <section class="grid-flex text-left">
+      <row class="flex-10">
+        <h3>Animations</h3>
+      </row>
+    </section>
+    <section class="grid-flex text-left">
+      <row class="showFadeIn card-content flex-2 bg-color-red-a700">
+        <style>
+          .showFadeIn {
+            animation: fade-in 4s linear 1 forwards;
+          }
+        </style>
+        <h4 class="color-white">Fade In animation</h3>
+      </row>
+      <row class="showFadeOut card-content flex-2 bg-color-pink-a700">
+        <style>
+          .showFadeOut {
+            animation: fade-out 4s linear 1 forwards;
+          }
+        </style>
+        <h4 class="color-white">Fade Out Animation</h3>
+      </row>
+      <row class="showFlash card-content flex-2 bg-color-deep-purple-a700">
+        <style>
+          .showFlash {
+            animation: flash 4s linear 1 forwards;
+          }
+        </style>
+        <h4 class="color-white">Flash animation</h4>
+      </row>
+      <row class="showPopIn card-content flex-2 bg-color-blue-a700">
+        <style>
+          .showPopIn {
+            animation: pop-in 4s linear 1 forwards;
+          }
+        </style>
+        <h4 class="color-white">Pop In animation</h4>
+      </row>
+      <row class="showZoomIn card-content flex-2 bg-color-cyan-a700">
+        <style>
+          .showZoomIn {
+            animation: zoom-in 4s linear 1 forwards;
+          }
+        </style>
+        <h4 class="color-white">Zoom In animation</h4>
+      </row>
+    </section>
+    <section class="grid-flex text-left">
+      <row class="showShake card-content flex-2 bg-color-green-a700">
+        <style>
+          .showShake {
+            animation: shake 4s linear 1 forwards;
+          }
+        </style>
+        <h4 class="color-white">Shake animation</h4>
+      </row>
+      <row class="showWobble card-content flex-2 bg-color-lime-a700">
+        <style>
+          .showWobble {
+            animation: wobble 4s linear 1 forwards;
+          }
+        </style>
+        <h4 class="color-white">Shake animation</h4>
+      </row>
+    </section>
+    <hr />
     <section class="grid-flex text-left">
       <row class="flex-10">
         <h3>Table</h3>
@@ -443,12 +510,12 @@ <h3>Table</h3>
             <tr>
               <td>1</td>
               <td>Original CSS</td>
-              <td>skeletonic-1.0.83.css</td>
+              <td>skeletonic-1.0.85.css</td>
             </tr>
             <tr>
               <td>2</td>
               <td>Minified CSS</td>
-              <td>skeletonic.min-1.0.83.css</td>
+              <td>skeletonic.min-1.0.85.css</td>
             </tr>
           </tbody>
         </table>
@@ -467,12 +534,12 @@ <h3>Table</h3>
               &lt;tr&gt;
                 &lt;td&gt;1&lt;/td&gt;
                 &lt;td&gt;Original CSS&lt;/td&gt;
-                &lt;td&gt;skeletonic-1.0.83.css&lt;/td&gt;
+                &lt;td&gt;skeletonic-1.0.85.css&lt;/td&gt;
               &lt;/tr&gt;
               &lt;tr&gt;
                 &lt;td&gt;2&lt;/td&gt;
                 &lt;td&gt;Minified CSS&lt;/td&gt;
-                &lt;td&gt;skeletonic.min-1.0.83.css&lt;/td&gt;
+                &lt;td&gt;skeletonic.min-1.0.85.css&lt;/td&gt;
               &lt;/tr&gt;
             &lt;/tbody&gt;
           &lt;/table&gt;