fix(structure): avoid main collision and commit generated doc files

.gitignore

@@ -1,6 +1,4 @@
 node_modules
 package-lock.json
-docs/*/*.css
-docs/*/*/*.css
 test/manual/dist
 jsconfig.json

demo/index.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { render } from 'react-dom'
 import '@emotion/core'
 import styled from '@emotion/styled'
-import { wasser, font, configure } from 'wasser'
+import { wasser, font, configure } from 'wasser/js'
 
 configure({
   scalingRatio: 8,

docs/basic/basic.css

@@ -0,0 +1,31 @@
+@charset "UTF-8";
+/**
+ * Basic wasser mixin, generates responsive property.
+ * ---
+ * @access public
+ * ---
+ * @param {string} $property - The property to be scaled
+ * @param {number} $max — The max value for the property
+ * @param {number|string} [$min] - The min value ot the property
+ */
+/**
+ * Basic wasser mixin for responsive typography.
+ * ---
+ * @access public
+ * ---
+ * @param {number} $max — The max value for the property
+ * @param {number|string} [$min] - The min value ot the property
+ * @param {string} [$property] - The property, defaults to padding
+ */
+body {
+  padding: calc( 33.33333px + (50 - 33.33333) * (100vw - 320px) / (1500 - 319));
+  margin: 0; }
+  @media (min-width: 1500px) {
+    body {
+      padding: 50px; } }
+  @media (max-width: 319px) {
+    body {
+      padding: 33.33333px; } }
+  @media print {
+    body {
+      padding: 50px; } }

docs/basic/body-padding/body-padding.css

@@ -0,0 +1,43 @@
+@charset "UTF-8";
+/**
+ * Basic wasser mixin, generates responsive property.
+ * ---
+ * @access public
+ * ---
+ * @param {string} $property - The property to be scaled
+ * @param {number} $max — The max value for the property
+ * @param {number|string} [$min] - The min value ot the property
+ */
+/**
+ * Basic wasser mixin for responsive typography.
+ * ---
+ * @access public
+ * ---
+ * @param {number} $max — The max value for the property
+ * @param {number|string} [$min] - The min value ot the property
+ * @param {string} [$property] - The property, defaults to padding
+ */
+body {
+  margin: calc( 26.66667px + (40 - 26.66667) * (100vw - 320px) / (1500 - 319)); }
+  @media (min-width: 1500px) {
+    body {
+      margin: 40px; } }
+  @media (max-width: 319px) {
+    body {
+      margin: 26.66667px; } }
+  @media print {
+    body {
+      margin: 40px; } }
+
+.inner {
+  padding: calc( 5px + (20 - 5) * (100vw - 320px) / (1500 - 319));
+  background: lightgray; }
+  @media (min-width: 1500px) {
+    .inner {
+      padding: 20px; } }
+  @media (max-width: 319px) {
+    .inner {
+      padding: 5px; } }
+  @media print {
+    .inner {
+      padding: 20px; } }

docs/basic/font/font.css

@@ -0,0 +1,106 @@
+@charset "UTF-8";
+/**
+ * Basic wasser mixin, generates responsive property.
+ * ---
+ * @access public
+ * ---
+ * @param {string} $property - The property to be scaled
+ * @param {number} $max — The max value for the property
+ * @param {number|string} [$min] - The min value ot the property
+ */
+/**
+ * Basic wasser mixin for responsive typography.
+ * ---
+ * @access public
+ * ---
+ * @param {number} $max — The max value for the property
+ * @param {number|string} [$min] - The min value ot the property
+ * @param {string} [$property] - The property, defaults to padding
+ */
+.t-title {
+  font-size: calc( 32px + (40 - 32) * (100vw - 320px) / (1500 - 319));
+  line-height: calc( 48px + (60 - 48) * (100vw - 320px) / (1500 - 319)); }
+  @media (min-width: 1500px) {
+    .t-title {
+      font-size: 40px; } }
+  @media (max-width: 319px) {
+    .t-title {
+      font-size: 32px; } }
+  @media print {
+    .t-title {
+      font-size: 40px; } }
+  @media (min-width: 1500px) {
+    .t-title {
+      line-height: 60px; } }
+  @media (max-width: 319px) {
+    .t-title {
+      line-height: 48px; } }
+  @media print {
+    .t-title {
+      line-height: 60px; } }
+
+.t-heading {
+  font-size: calc( 24px + (30 - 24) * (100vw - 320px) / (1500 - 319));
+  line-height: calc( 36px + (45 - 36) * (100vw - 320px) / (1500 - 319)); }
+  @media (min-width: 1500px) {
+    .t-heading {
+      font-size: 30px; } }
+  @media (max-width: 319px) {
+    .t-heading {
+      font-size: 24px; } }
+  @media print {
+    .t-heading {
+      font-size: 30px; } }
+  @media (min-width: 1500px) {
+    .t-heading {
+      line-height: 45px; } }
+  @media (max-width: 319px) {
+    .t-heading {
+      line-height: 36px; } }
+  @media print {
+    .t-heading {
+      line-height: 45px; } }
+
+.t-subheading {
+  font-size: calc( 20px + (25 - 20) * (100vw - 320px) / (1500 - 319));
+  line-height: calc( 30px + (37.5 - 30) * (100vw - 320px) / (1500 - 319)); }
+  @media (min-width: 1500px) {
+    .t-subheading {
+      font-size: 25px; } }
+  @media (max-width: 319px) {
+    .t-subheading {
+      font-size: 20px; } }
+  @media print {
+    .t-subheading {
+      font-size: 25px; } }
+  @media (min-width: 1500px) {
+    .t-subheading {
+      line-height: 37.5px; } }
+  @media (max-width: 319px) {
+    .t-subheading {
+      line-height: 30px; } }
+  @media print {
+    .t-subheading {
+      line-height: 37.5px; } }
+
+.t-text {
+  font-size: calc( 12.8px + (16 - 12.8) * (100vw - 320px) / (1500 - 319));
+  line-height: calc( 19.2px + (24 - 19.2) * (100vw - 320px) / (1500 - 319)); }
+  @media (min-width: 1500px) {
+    .t-text {
+      font-size: 16px; } }
+  @media (max-width: 319px) {
+    .t-text {
+      font-size: 12.8px; } }
+  @media print {
+    .t-text {
+      font-size: 16px; } }
+  @media (min-width: 1500px) {
+    .t-text {
+      line-height: 24px; } }
+  @media (max-width: 319px) {
+    .t-text {
+      line-height: 19.2px; } }
+  @media print {
+    .t-text {
+      line-height: 24px; } }

docs/less/less.css

@@ -0,0 +1,104 @@
+/**
+ * Basic wasser mixin, generates responsive property.
+ * ---
+ * @access public
+ * ---
+ * @param {string} @property - The property to be scaled
+ * @param {number} @max — The max value for the property
+ * @param {number|string} [@min] - The min value ot the property
+ */
+/**
+ * Basic wasser mixin for responsive typography.
+ * ---
+ * @access public
+ * ---
+ * @param {number} @max — The max value for the property
+ * @param {number|string} [@min] - The min value ot the property
+ * @param {string} [@property] - The property, defaults to padding
+ */
+body {
+  padding: calc(20px + (40 - 20) * (100vw - 500px) / (1001));
+}
+@media (min-width: 1500px) {
+  body {
+    padding: 40px;
+  }
+}
+@media (max-width: 499px) {
+  body {
+    padding: 20px;
+  }
+}
+@media print {
+  body {
+    padding: 40px;
+  }
+}
+h1 {
+  font-size: calc(10px + (40 - 10) * (100vw - 500px) / (1001));
+  line-height: calc(20px + (80 - 20) * (100vw - 500px) / (1001));
+  padding: calc(2.5px + (5 - 2.5) * (100vw - 500px) / (1001));
+  border-width: calc(5px + (10 - 5) * (100vw - 500px) / (1001));
+  border-style: solid;
+  border-color: lightblue;
+}
+@media (min-width: 1500px) {
+  h1 {
+    font-size: 40px;
+  }
+}
+@media (max-width: 499px) {
+  h1 {
+    font-size: 10px;
+  }
+}
+@media print {
+  h1 {
+    font-size: 40px;
+  }
+}
+@media (min-width: 1500px) {
+  h1 {
+    line-height: 80px;
+  }
+}
+@media (max-width: 499px) {
+  h1 {
+    line-height: 20px;
+  }
+}
+@media print {
+  h1 {
+    line-height: 80px;
+  }
+}
+@media (min-width: 1500px) {
+  h1 {
+    padding: 5px;
+  }
+}
+@media (max-width: 499px) {
+  h1 {
+    padding: 2.5px;
+  }
+}
+@media print {
+  h1 {
+    padding: 5px;
+  }
+}
+@media (min-width: 1500px) {
+  h1 {
+    border-width: 10px;
+  }
+}
+@media (max-width: 499px) {
+  h1 {
+    border-width: 5px;
+  }
+}
+@media print {
+  h1 {
+    border-width: 10px;
+  }
+}