🎛 use CSSO and autoprefixer

dist/chota.css

@@ -16,18 +16,23 @@ html{
     -webkit-text-size-adjust: 100%;
 }
 body {
-    letter-spacing:.01em;
+    letter-spacing: 0.01em;
     line-height: 1.6;
     font-size: 1.6rem;
     font-weight: 400;
-    font-family:Segoe UI,Helvetica Neue,san-serif;
+    font-family: "Segoe UI", "Helvetica Neue", san-serif; /*fallback*/
     font-family: var(--font-family);
     margin: 0;
     padding: 0;
 }
-h1,h2,h3,h4,h5,h6{
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
     font-weight: 500;
-    margin:.35em 0 .7em;
+    margin: 0.35em 0 0.7em 0;
 }
 h1 {
     font-size: 2em;
@@ -45,14 +50,14 @@ h5{
     font-size: 1em;
 }
 h6 {
-    font-size:.85em;
+    font-size: 0.85em;
 }
 a {
     color: var(--primary-color);
     text-decoration: none;
 }
 a:hover:not(.button) {
-    opacity:.6;
+    opacity: 0.6;
 }
 p {
     margin-top: 0;
@@ -63,25 +68,25 @@ blockquote{
     border-left: 3px solid var(--lightGrey-color);
 }
 dl dt {
-    font-weight:700;
+    font-weight: bold;
 }
 hr {
+    border: none;
     background-color: var(--lightGrey-color);
     height: 1px;
     margin: 1rem 0;
 }
-hr,table{
-    border:none;
-}
 table {
     width: 100%;
+    border: none;
     border-collapse: collapse;
     border-spacing: 0;
     text-align: left;
 }
-td,th{
+td,
+th {
     vertical-align: middle;
-    padding:1.2rem .4rem;
+    padding: 1.2rem 0.4rem;
 }
 thead {
     border-bottom: 2px solid var(--lightGrey-color);
@@ -89,21 +94,25 @@ thead{
 tfoot {
     border-top: 2px solid var(--lightGrey-color);
 }
-code,kbd,pre,samp,tt{
+code,
-    font-family:monaco,Consolas,Lucida Console,monospace;
+kbd,
+pre,
+samp,
+tt {
+    font-family: monaco, "Consolas", "Lucida Console", monospace;
 }
-code,kbd{
+code,
-    padding:0 .4rem;
+kbd {
+    padding: 0 0.4rem;
     font-size: 90%;
     white-space: pre-wrap;
     border-radius: 4px;
     color: #c62424;
-    padding:.2em .4em;
+    padding: 0.2em 0.4em;
-}
-code,kbd,pre{
     background-color: #f7f7f7;
 }
 pre {
+    background-color: #f7f7f7;
     font-size: 1em;
     padding: 1rem;
     overflow-x: auto;
@@ -120,7 +129,8 @@ abbr[title]{
 img {
     max-width: 100%;
 }
-fieldset,iframe{
+fieldset,
+iframe {
     border: 1px solid var(--lightGrey-color);
 }
 .container {
@@ -130,63 +140,81 @@ fieldset,iframe{
     padding: 0 calc(var(--grid-gutter) / 2);
 }
 .row {
+    display: -ms-flexbox;
     display: flex;
+    -ms-flex-flow: row wrap;
         flex-flow: row wrap;
+    -ms-flex-pack: start;
         justify-content: flex-start;
     margin-left: calc(var(--grid-gutter) / -2);
     margin-right: calc(var(--grid-gutter) / -2);
 }
 .col {
+    -ms-flex: 1;
         flex: 1;
 }
-.col,[class*=" col-"],[class^=col-]{
+.col,
+[class*=" col-"],
+[class^='col-'] {
     margin: 0 calc(var(--grid-gutter) / 2) calc(var(--grid-gutter) / 2);
 }
 .col-1 {
+    -ms-flex: 0 0 calc((100% / (12/1)) - var(--grid-gutter));
         flex: 0 0 calc((100% / (12/1)) - var(--grid-gutter));
     max-width: calc((100% / (12/1)) - var(--grid-gutter));
 }
 .col-2 {
+    -ms-flex: 0 0 calc((100% / (12/2)) - var(--grid-gutter));
         flex: 0 0 calc((100% / (12/2)) - var(--grid-gutter));
     max-width: calc((100% / (12/2)) - var(--grid-gutter));
 }
 .col-3 {
+    -ms-flex: 0 0 calc((100% / (12/3)) - var(--grid-gutter));
         flex: 0 0 calc((100% / (12/3)) - var(--grid-gutter));
     max-width: calc((100% / (12/3)) - var(--grid-gutter));
 }
 .col-4 {
+    -ms-flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter));
         flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter));
     max-width: calc((100% / (12/4)) - var(--grid-gutter));
 }
 .col-5 {
+    -ms-flex: 0 0 calc((100% / (12/5)) - var(--grid-gutter));
         flex: 0 0 calc((100% / (12/5)) - var(--grid-gutter));
     max-width: calc((100% / (12/5)) - var(--grid-gutter));
 }
 .col-6 {
+    -ms-flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter));
         flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter));
     max-width: calc((100% / (12/6)) - var(--grid-gutter));
 }
 .col-7 {
+    -ms-flex: 0 0 calc((100% / (12/7)) - var(--grid-gutter));
         flex: 0 0 calc((100% / (12/7)) - var(--grid-gutter));
     max-width: calc((100% / (12/7)) - var(--grid-gutter));
 }
 .col-8 {
+    -ms-flex: 0 0 calc((100% / (12/8)) - var(--grid-gutter));
         flex: 0 0 calc((100% / (12/8)) - var(--grid-gutter));
     max-width: calc((100% / (12/8)) - var(--grid-gutter));
 }
 .col-9 {
+    -ms-flex: 0 0 calc((100% / (12/9)) - var(--grid-gutter));
         flex: 0 0 calc((100% / (12/9)) - var(--grid-gutter));
     max-width: calc((100% / (12/9)) - var(--grid-gutter));
 }
 .col-10 {
+    -ms-flex: 0 0 calc((100% / (12/10)) - var(--grid-gutter));
         flex: 0 0 calc((100% / (12/10)) - var(--grid-gutter));
     max-width: calc((100% / (12/10)) - var(--grid-gutter));
 }
 .col-11 {
+    -ms-flex: 0 0 calc((100% / (12/11)) - var(--grid-gutter));
         flex: 0 0 calc((100% / (12/11)) - var(--grid-gutter));
     max-width: calc((100% / (12/11)) - var(--grid-gutter));
 }
 .col-12 {
+    -ms-flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter));
         flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter));
     max-width: calc((100% / (12/12)) - var(--grid-gutter));
 }
@@ -195,33 +223,45 @@ fieldset,iframe{
         width: 100%;
     }
     
-    .col,[class*=" col-"],[class^=col-]{
+    .col,
+    [class*=" col-"],
+    [class^='col-'] {
+        -ms-flex: 0 1 100%;
             flex: 0 1 100%;
         max-width: 100%;
     }
 }
 fieldset {
-    padding:.5rem 2rem;
+    padding: 0.5rem 2rem;
 }
 legend {
     text-transform: uppercase;
-    font-size:.8em;
+    font-size: 0.8em;
-    letter-spacing:.1rem;
+    letter-spacing: 0.1rem;
 }
-input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]),select,textarea,textarea[type=text]{
+input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]),
+select,
+textarea,
+textarea[type=text] {
     font-family: inherit;
-    padding:.7rem 1rem;
+    padding: 0.7rem 1rem;
     border-radius: 4px;
     border: 1px solid var(--lightGrey-color);
     font-size: 1em;
-    transition:all .2s ease;
+    transition: all 0.2s ease;
     display: block;
     width: 100%;
 }
-input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):hover,select:hover,textarea:hover,textarea[type=text]:hover{
+input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):hover,
+select:hover,
+textarea:hover,
+textarea[type=text]:hover {
     border-color: #aaa;
 }
-input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):focus,select:focus,textarea:focus,textarea[type=text]:focus{
+input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):focus,
+select:focus,
+textarea:focus,
+textarea[type=text]:focus {
     outline: none;
     border-color: var(--primary-color);
 }
@@ -232,11 +272,17 @@ select{
     background-origin: content-box;
     background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='40' fill='#555'><polygon points='0,0 60,0 30,40'/></svg>");
 }
-[type=checkbox],[type=radio]{
+[type="checkbox"],
+[type="radio"] {
     width: 1.6rem;
     height: 1.6rem;
 }
-.button,[type=button],[type=reset],[type=submit],button{
+/* BUTTONS */
+.button,
+[type=button],
+[type=reset],
+[type=submit],
+button {
     padding: 1rem 2.5rem;
     color: #333;
     background: #e6e6e6;
@@ -245,7 +291,7 @@ select{
     font-size: 1.5rem;
     line-height: 1;
     text-align: center;
-    transition:opacity .2s ease;
+    transition: opacity 0.2s ease;
     text-decoration: none;
     transform: scale(1);
     display: inline-block;
@@ -253,17 +299,29 @@ select{
 .button + .button {
     margin-left: 1rem;
 }
-.button:hover,[type=button]:hover,[type=reset]:hover,[type=submit]:hover,button:hover{
+.button:hover,
-    opacity:.8;
+[type=button]:hover,
+[type=reset]:hover,
+[type=submit]:hover,
+button:hover {
+    opacity: 0.8;
 }
-.button:active,[type=button]:active,[type=reset]:active,[type=submit]:active,button:active{
+.button:active,
-    transform:scale(.98);
+[type=button]:active,
+[type=reset]:active,
+[type=submit]:active,
+button:active {
+    transform: scale(0.98);
 }
-button[disabled],button[disabled]:hover,input[disabled],input[disabled]:hover{
+input[disabled],
-    opacity:.4;
+button[disabled],
+input[disabled]:hover,
+button[disabled]:hover {
+    opacity: 0.4;
     cursor: not-allowed;
 }
-.button.primary,[type=submit]{
+.button.primary,
+[type=submit] {
     color: #fff;
     background-color: #000;
     background: var(--primary-color);
@@ -282,47 +340,66 @@ button[disabled],button[disabled]:hover,input[disabled],input[disabled]:hover{
     color: var(--primary-color);
 }
 .nav {
+    display: -ms-flexbox;
     display: flex;
     min-height: 5rem;
+    -ms-flex-align: stretch;
         align-items: stretch;
 }
 .nav img {
     max-height: 3rem;
 }
 .nav>.container {
+    display: -ms-flexbox;
     display: flex;
 }
-.nav-center,.nav-left,.nav-right{
+.nav-center,
+.nav-left,
+.nav-right {
+    display: -ms-flexbox;
     display: flex;
+    -ms-flex: 1;
         flex: 1;
 }
 .nav-left {
+    -ms-flex-pack: start;
         justify-content: flex-start;
 }
 .nav-right {
+    -ms-flex-pack: end;
         justify-content: flex-end;
 }
 .nav-center {
+    -ms-flex-pack: center;
         justify-content: center;
 }
 @media screen and (max-width: 480px) {
-    .nav,.nav>.container{
+    .nav,
+    .nav>.container {
+        -ms-flex-direction: column;
             flex-direction: column;
     }
-    .nav-center,.nav-left,.nav-right{
+    .nav-center,
+    .nav-left,
+    .nav-right {
+        -ms-flex-wrap: wrap;
             flex-wrap: wrap;
+        -ms-flex-pack: center;
             justify-content: center;
     }
 }
-.nav .brand,.nav a{
+.nav a,
+.nav .brand {
     text-decoration: none;
+    display: -ms-flexbox;
     display: flex;
+    -ms-flex-align: center;
         align-items: center;
     padding: 1rem 2rem;
     color: #555;
 }
 .nav .active:not(.button) {
-    color:#000;
+    color: #000; /* fallback */
     color: var(--primary-color);
 }
 .nav .brand {
@@ -336,7 +413,7 @@ button[disabled],button[disabled]:hover,input[disabled],input[disabled]:hover{
 .card {
     padding: 1rem 2rem;
     border-radius: 4px;
-    box-shadow:0 0 2px rgba(0,0,0,.4);
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
 }
 .card p:last-child {
   margin: 0;
@@ -346,6 +423,7 @@ button[disabled],button[disabled]:hover,input[disabled],input[disabled]:hover{
   margin-bottom: 1rem;
 }
 .tabs {
+    display: -ms-flexbox;
     display: flex;
 }
 .tabs a {
@@ -353,12 +431,14 @@ button[disabled],button[disabled]:hover,input[disabled],input[disabled]:hover{
 }
 .tabs > a {
     padding: 1rem 2rem;
+    -ms-flex: 0 1 auto;
         flex: 0 1 auto;
     color: #555;
     border-bottom: 2px solid var(--lightGrey-color);
     text-align: center;
 }
-.tabs>a.active,.tabs>a:hover{
+.tabs > a.active,
+.tabs > a:hover {
     opacity: 1;
     border-bottom: 2px solid #555;
 }
@@ -366,6 +446,7 @@ button[disabled],button[disabled]:hover,input[disabled],input[disabled]:hover{
     border-color: var(--primary-color);
 }
 .tabs.is-full a {
+    -ms-flex: 1;
         flex: 1;
 }
 .pull-right {
@@ -400,24 +481,39 @@ button[disabled],button[disabled]:hover,input[disabled],input[disabled]:hover{
     width: 100%;
 }
 .is-vertical-align {
+    display: -ms-flexbox;
     display: flex;
+    -ms-flex-align: center;
         align-items: center;
 }
-.is-center,.is-horizontal-align{
+.is-horizontal-align {
+    display: -ms-flexbox;
     display: flex;
+    -ms-flex-pack: center;
         justify-content: center;
 }
 .is-center {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-align: center;
         align-items: center;
+    -ms-flex-pack: center;
+        justify-content: center;
 }
 .is-right {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-align: center;
+        align-items: center;
+    -ms-flex-pack: end;
         justify-content: flex-end;
 }
-.is-left,.is-right{
-    display:flex;
-    align-items:center;
-}
 .is-left {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-align: center;
+        align-items: center;
+    -ms-flex-pack: start;
         justify-content: flex-start;
 }
 .is-fixed {

package.json

@@ -4,19 +4,14 @@
   "description": "A really small CSS framework",
   "main": "dist/chota.min.css",
   "scripts": {
-    "start": "browser-sync start --server --directory --files '**/*.css' '**/*.html'",
+    "start":
-    "build": "rm -r dist/ && yarn postcss && yarn postcss -- -x .min.css && yarn cssnano && yarn cssnano:min",
+      "browser-sync start --server --directory --files '**/*.css' '**/*.html'",
-    "postcss": "postcss ./src/chota.css -u postcss-import -d dist/ --no-map",
+    "build": "rm -r dist/ && yarn postcss &&  NODE_ENV=production yarn postcss -x .min.css",
-    "cssnano": "cssnano ./dist/chota.css ./dist/chota.css --no-calc --no-core",
+    "postcss": "postcss ./src/chota.css -d dist/",
-    "cssnano:min": "cssnano ./dist/chota.min.css ./dist/chota.min.css --no-calc",
+    "watch": "NODE_ENV=development yarn postcss -w",
-    "watch": "yarn postcss -- -u cssnano -x .min.css -w",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "keywords": [
+  "keywords": ["css", "minimal", "web"],
-    "css",
-    "minimal",
-    "web"
-  ],
   "author": "Jenil Gogari",
   "license": "MIT",
   "homepage": "https://jenil.github.io/chota",
@@ -30,13 +25,9 @@
   "devDependencies": {
     "autoprefixer": "^6.7.7",
     "browser-sync": "^2.18.8",
-    "cssnano-cli": "^1.0.5",
+    "postcss-cli": "^4.1.1",
-    "postcss-cli": "^3.0.0",
+    "postcss-csso": "^3.0.0",
     "postcss-import": "^9.1.0"
   },
-  "files": [
+  "files": ["src/", "dist/", "README.md"]
-    "src/",
-    "dist/",
-    "README.md"
-  ]
 }

postcss.config.js

@@ -0,0 +1,10 @@
+let plugins = [
+  require("postcss-import"),
+  require("autoprefixer")({ browsers: "last 2 versions" })
+];
+
+if (process.env.NODE_ENV == 'production') plugins.push(require("postcss-csso"))
+
+module.exports = {
+  plugins
+}

test/components.html

@@ -5,7 +5,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Components</title>
-  <link rel="stylesheet" href="../dist/chota.min.css">
+  <link rel="stylesheet" href="../dist/chota.css">
   <style>
     .nav {
       border: 1px solid red;

test/index.html

@@ -5,7 +5,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Elements</title>
-  <link rel="stylesheet" href="../dist/chota.min.css">
+  <link rel="stylesheet" href="../dist/chota.css">
 </head>
 
 <body>