Added stylelint

Author: ghosh

.stylelintrc

@@ -0,0 +1,27 @@
+{
+  "rules": {
+    "color-hex-case": "lower",
+    "color-hex-length": "long",
+    "color-no-invalid-hex": true,
+    "function-calc-no-unspaced-operator": true,
+    "function-name-case": "lower",
+    "function-parentheses-space-inside": "never",
+    "function-url-quotes": "always",
+    "number-leading-zero": "never",
+    "number-no-trailing-zeros": true,
+    "string-quotes": "double",
+    "length-zero-no-unit": true,
+    "unit-case": "lower",
+    "unit-no-unknown": true,
+    "value-keyword-case": "lower",
+    "value-list-comma-space-after": "always",
+    "shorthand-property-no-redundant-values": true,
+    "property-case": "lower",
+    "declaration-block-no-redundant-longhand-properties": true,
+    "declaration-block-no-duplicate-properties": true,
+    "block-closing-brace-empty-line-before": "never",
+    "block-no-empty": true,
+    "indentation": 2,
+    "no-extra-semicolons": true
+  }
+}

README.md

@@ -2,29 +2,54 @@
 
 A modern, ultra lightweight css tooptip library. Just `1kb` minified and gzipped.
 
+## Table of Contents
+- [Installation](#installation)
+- [Setup](#setup)
+- [Usage](#usage)
+- [Customization](#customization)
+
 ## Installation
 
-- **via npm**
+**via npm**
 	Install the package using npm:-
 ```
 npm install microtip
 ```
 
-- **via yarn**
+**via yarn**
 	Install the package via yarn:-
 ```
 yarn add microtip
 ```
 
-- **via CDN**
+**via CDN**
 	Directly include the link to the css into your project:-
 ```
 https://unpkg.com/microtip/microtip.css
 ```
 
-- **direct download**
+**direct download**
 	Download the file directly from github
 
+## Setup
+
+**in PostCSS**
+```scss
+@import 'microtip';
+```
+
+**in Webpack**
+```javascript
+import microtip from 'microtip/microtip.min.css'
+```
+
+**in SCSS**
+```scss
+@import 'microtip/microtip';
+```
+Make sure, `node_modules` is included in the `includePaths` setting. You can then directly import the library into your file.
+
+
 ## Usage
 
 Using the tooltip is incredibly simple. Simply add a custom `data-microtip` attribute to the element on which you want the tooltip to appear. The tooltip message is the attribute value. Example:-
@@ -49,6 +74,28 @@ By default, the tooltip will takeup only the size it requires to show the text.
 **Note** - `fit` sets the width of the tooltip to be the same as the width on the element. It only works along with the `top` and `bottom` position modifiers.
 
 
+## Customization
+
+Microtip uses css variables, which allows you to customize the behavior of the tooltip as per your needs.
+
+| Variable                         | Description                                        | Default Value |
+|----------------------------------|----------------------------------------------------|---------------|
+| `--microtip-transition-duration` | Specifies the duration of the tootltip transition  | `.18s`        |
+| `--microtip-transition-delay`    | The delay on hover before showing the tooltip      | `0s`          |
+| `--microtip-transition-easing`   | The easing applied while transitioning the tooltip | `ease-in-out` |
+
+Example:-
+```css
+:root {
+	--microtip-transition-duration: 0.5s;
+	--microtip-transition-delay: 1s;
+	--microtip-transition-easing: ease-out;
+
+}
+```
+
+The above code will transition the tooltip over `0.5s` while applying an easing of type `ease-out` after a delay of `1s`
+
  
 
 <p align="center">✌️</p>

microtip.css

@@ -1,6 +1,11 @@
-/*******************************
- Default Tooltip styles
-*******************************/
+@charset "UTF-8";
+
+/*
+ * microtip.css
+ * Licensed under the MIT license
+ * Copyright (c) 2017 Indrashish Ghosh
+ */
+
 [data-microtip] {
   position: relative;
 }
@@ -13,7 +18,7 @@
   will-change: transform;
   opacity: 0;
   pointer-events: none;
-  transition: all var(--microtip-transition-duration, 0.18s) var(--microtip-transition-easing, ease-in-out) var(--microtip-transition-delay, 0s);
+  transition: all var(--microtip-transition-duration, .18s) var(--microtip-transition-easing, ease-in-out) var(--microtip-transition-delay, 0s);
   position: absolute;
   box-sizing: border-box;
   z-index: 10;
@@ -26,9 +31,9 @@
 }
 
 [data-microtip]:after {
-  background: rgba(17, 17, 17, 0.9);
+  background: rgba(17, 17, 17, .9);
   border-radius: 4px;
-  color: #fff;
+  color: #ffffff;
   content: attr(data-microtip);
   font-size: 12px;
   padding: .5em 1em;

microtip.min.css

@@ -1,13 +1,18 @@
 {
   "name": "microtip",
-  "version": "0.0.3",
-  "description": "A modern, ultra light css tooltip library",
+  "version": "0.0.4",
+  "description": "A modern, ultra light css tooltip library. Just 1kb minified and gzipped",
   "style": "microtip.css",
   "keywords": [
     "tooltip",
     "css",
-    "tooltip"
+    "css variables",
+    "1kb"
   ],
+  "scripts": {
+    "minify": "minify microtip.css",
+    "test": "stylelint microtip.css"
+  },
   "author": "Indrashish Ghosh",
   "license": "MIT",
   "repository": {
@@ -16,5 +21,9 @@
   },
   "bugs": {
     "url": "https://github.com/ghosh/microtip/issues"
+  },
+  "devDependencies": {
+    "minifier": "^0.8.1",
+    "stylelint": "^7.10.1"
   }
 }