Features/131 (#65)

* BREAKING CHANGE rename margin effect

* switch to stylelintrc

* fix appling stylelint rules

* chore

* fixing stylelint rules

* doc: update demo page for grids and colors

* chore

* BREAKING CHANGE rename margin effect

* BREAKING CHANGE change margin et padding classes

* BREAKING CHANGE rename special icons for nav, collapse, dropdown

* fix some fixes after linter

* fix select background default color in darkmode

* fix lint and update doc

* added linter to build jobs

* fix workflow

* fix  avoid -internal-autofill-selected" style

* fix class naming conflic for margin

* update dist files

* update js plugin

* fix safari media queries removed browserlist handling

* Revert "fix safari media queries removed browserlist handling"

This reverts commit b7ed2cb.

* fix media queries screen unattended min max transformation

* doc add pkg dynamic version

* doc add more responsive example

* fix same browser list support for demo and lib

* chore

* doc update dev instructions

* update dist files

* doc fix minified html code example

---------

Co-authored-by: medevod <medevod@github.com>

.github/workflows/azure-cdn-deploy.yml

@@ -38,8 +38,9 @@ jobs:
           PACKAGE_VERSION: "v${{ steps.package-version.outputs.current-version}}-beta-${{ github.event.pull_request.number }}"
         run: |
           npm install 
+          npm run lint
           npm run build
-          npm run build_demo
+          npm run build:demo
           npm run test --if-present
       - name: azure login
         uses: azure/login@v1
@@ -85,9 +86,10 @@ jobs:
         env:
           PACKAGE_VERSION: "v${{ steps.package-version.outputs.current-version}}-preview"
         run: |
-          npm install 
+          npm install
+          npm run lint 
           npm run build
-          npm run build_demo
+          npm run build:demo
           npm run test --if-present
       - name: azure login
         uses: azure/login@v1

.github/workflows/azure-static-web-apps-purple-glacier-0a500d203.yml

@@ -39,7 +39,7 @@ jobs:
           app_location: "." # App source code path
           api_location: "" # Api source code path - optional
           output_location: "./demo_build" # Built app content directory - optional
-          app_build_command: "npm run build_demo"
+          app_build_command: "npm run build:demo"
           ###### End of Repository/Build Configurations ######
 
   build_deploy_rc:
@@ -68,7 +68,7 @@ jobs:
           app_location: "." # App source code path
           api_location: "" # Api source code path - optional
           output_location: "./demo_build" # Built app content directory - optional
-          app_build_command: "npm run build_demo"
+          app_build_command: "npm run build:demo"
           ###### End of Repository/Build Configurations ######
 
   build_deploy_release:
@@ -98,7 +98,7 @@ jobs:
           app_location: "." # App source code path
           api_location: "" # Api source code path - optional
           output_location: "./demo_build" # Built app content directory - optional
-          app_build_command: "npm run build_demo"
+          app_build_command: "npm run build:demo"
           ###### End of Repository/Build Configurations ######
 
   close_pull_request_job:

.gitignore

@@ -335,4 +335,5 @@ yarn.lock
 node_modules
 demo_build
 demo_temp
-dist/*.map
+dist/*.map
+.env

.htmlnanorc

@@ -1,15 +1,15 @@
 {
-    "collapseAttributeWhitespace": false,
-    "collapseBooleanAttributes": false,
-    "collapseWhitespace": "conservative",
-    "custom": [],
-    "deduplicateAttributeValues": false,
-    "mergeScripts": false,
-    "mergeStyles": false,
-    "removeUnusedCss": false,
-    "minifyJson": true,
-    "minifySvg": true,    
-    "removeEmptyAttributes": false,
-    "removeRedundantAttributes": false,
-    "removeComments": true
-}
+  "collapseAttributeWhitespace": false,
+  "collapseBooleanAttributes": false,
+  "collapseWhitespace": "conservative",
+  "custom": [],
+  "deduplicateAttributeValues": false,
+  "mergeScripts": false,
+  "mergeStyles": false,
+  "removeUnusedCss": false,
+  "minifyJson": true,
+  "minifySvg": true,
+  "removeEmptyAttributes": false,
+  "removeRedundantAttributes": false,
+  "removeComments": true
+}

.parcelrc

@@ -2,11 +2,12 @@
   "extends": "@parcel/config-default",
   "transformers": {
     "*.css": [
+      "@plasmohq/parcel-transformer-inject-env",
       "@parcel/transformer-css"
     ],
     "*.html": [
-      "@plasmohq/parcel-transformer-inject-env",
-      "..."
+      "...",
+      "@plasmohq/parcel-transformer-inject-env"
     ]
   }
 }

.stylelintrc.json

@@ -0,0 +1,16 @@
+{
+  "extends": "stylelint-config-standard-scss",
+  "rules": {
+    "selector-class-pattern": [
+      "^[a-z][a-z0-9]*(-{1,2}[a-z0-9]+)*$",
+      {
+        "message": "Expected class selector to be kebab-case or -- modifier"
+      }
+    ],
+    "property-no-vendor-prefix": null,
+    "scss/operator-no-unspaced": null,
+    "unit-allowed-list": ["rem", "%", "deg", "s", "vw", "vh"],
+    "max-nesting-depth": 3,
+    "selector-max-id": 0
+  }
+}

demo/index.css

@@ -64,6 +64,25 @@ header {
 .svg-icon-github {
   background-image: url("images/github.svg");
 }
+.svg-icon-night {
+  background-image: url("images/night-fog.svg");
+}
+.svg-icon-sun {
+  background-image: url("images/sun-fog.svg");
+}
+
+.svg-icon-screen-s {
+  background-image: url("images/screen-s.svg");
+}
+.svg-icon-screen-m {
+  background-image: url("images/screen-m.svg");
+}
+.svg-icon-screen-l {
+  background-image: url("images/screen-l.svg");
+}
+.svg-icon-screen-xl {
+  background-image: url("images/screen-xl.svg");
+}
 
 .grid-cel {
   font-weight: bold;

demo/index.html

@@ -10,7 +10,7 @@
   <title>MgPlus | A micro CSS library.</title>
   <link rel="icon" href="./images/logo.svg" />
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic" />
-  <link rel="stylesheet" href="../dist/css/mgplus.css" />
+  <link rel="stylesheet" href="../src/scss/mgplus.scss" />
   <link rel="stylesheet" href="./index.css" />
   <link rel="stylesheet" type="text/css"
     href="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/skins/sunburst.css" />
@@ -19,10 +19,10 @@
 <body>
   <header>
     <nav class="mg-fixed-top mg-w100">
-      <div class="mg-container mg-row mg-x--middle mg-x--between mg-pad-t1">
+      <div class="mg-container mg-row mg-x--middle mg-x--between  mg-p-t1">
         <div class="mg-group">
           <div class="mg-dropdown">
-            <button title="theme-switcher" data-toggle="dropdown" class="mg-button--small mg-dropdown--icon">
+            <button title="theme-switcher" data-toggle="dropdown" class="mg-button--small mg-icon-dropdown">
               <i class="mg-icon svg-icon-darkmode"></i>
             </button>
             <div class="mg-dropdown--content">
@@ -36,10 +36,10 @@
             </div>
           </div>
           <div class="mg-dropdown">
-            <button title="controls" data-toggle="dropdown" class="mg-button--small mg-dropdown--icon">
+            <button title="controls" data-toggle="dropdown" class="mg-button--small mg-icon-dropdown">
               <i class="mg-icon svg-icon-gears"></i>
             </button>
-            <div class="mg-dropdown--content mg-pad-r3 mg-pad-l1">
+            <div class="mg-dropdown--content  mg-p-r3  mg-p-l1">
               <div class="mg-col  mg-x--start">
                 <label for="range2">Control radius</label>
                 <input type="range" min="0" max="20" value="2" id="control-radius-selector" />
@@ -49,7 +49,7 @@
             </div>
           </div>
           <div class="mg-dropdown">
-            <button title="color-picker" data-toggle="dropdown" class="mg-button--small mg-dropdown--icon">
+            <button title="color-picker" data-toggle="dropdown" class="mg-button--small mg-icon-dropdown">
               <i class="mg-icon svg-icon-colors"></i>
             </button>
             <div class="mg-dropdown--content">
@@ -72,9 +72,11 @@
     <img alt="logo" class="logo-animation" src="./images/logo.svg" height="120" />
     <div class="mg-light">
       <h1 class="mg-text-bolder">Mg+</h1>
-      <h2>A micro CSS library <span class="mg-text-m mg-badge"> $PACKAGE_VERSION</span></h2>
+      <h2>A micro CSS library <span class="mg-text-m mg-badge">$PACKAGE_VERSION</span></h2>
       <h3>Build pretty websites with just a few drops of CSS</h3>
       <a class="mg-button" href="#getting-started">Getting started</a>
+      <a id="download_button" data-last-cdn-uri="https://cdn.mgpluscss.com/$PACKAGE_VERSION/css/mgplus.css"
+        class="mg-button" download="cdn">Download</a>
       <a class="mg-button" href="https://github.com/mgpluscss/mgplus">Github <i class="mg-icon svg-icon-github"></i></a>
 
 

demo/index.js

@@ -31,6 +31,11 @@ async function loadDemoSections() {
     navLink.innerHTML = `<a href="#${section.id}">${navLinkTitle.innerText}</a>`;
     navLinks.appendChild(navLink);
   }
+  const download_button = document.getElementById("download_button");
+
+  //workaround to set the package version, this should be done in the build process
+  const dataLastCdnUri = download_button.getAttribute("data-last-cdn-uri");
+  download_button.setAttribute("href", dataLastCdnUri);
 }
 
 function registerDemoFeatures() {
@@ -109,7 +114,7 @@ function registerDemoFeatures() {
         "mg-button--clear",
         "mg-button--primary",
         "mg-button--small",
-        "mg-dropdown--icon",
+        "mg-icon-dropdown",
         "mg-collapse"
       );
 

demo/sections/collapse-section.html

@@ -5,12 +5,12 @@ <h2>Collapse</h2>
     functionality.</p>
   <i>Collapse needs js plugin</i>
   <div class="mg-col mg-m6" id="collapse-example" data-toggle="htmlpreview">
-    <button class="mg-button mg-button--outline mg-collapse mg-collapse--icon" data-toggle="collapse">collapse
+    <button class="mg-button mg-button--outline mg-collapse mg-icon-collapse" data-toggle="collapse">collapse
       Button</button>
     <div class="mg-collapse--content">
       Content 1
     </div>
-    <span class="mg-collapse mg-collapse--icon" data-toggle="collapse">Collapse div</span>
+    <span class="mg-collapse mg-icon-collapse" data-toggle="collapse">Collapse div</span>
     <div class="mg-collapse--content">
       Content 2
     </div>
@@ -21,7 +21,7 @@ <h3>Collapsible navs</h3>
       <ul>
         <li class="active"><a href="#home">Home</a></li>
         <li><a href="#news">News</a></li>
-        <li class="mg-collapse mg-collapse--icon" data-toggle="collapse"><a href="#contact">Contact</a>
+        <li class="mg-collapse mg-icon-nav" data-toggle="collapse"><a href="#contact">Contact</a>
         </li>
         <ul class="mg-collapse--content">
           <li>Contact sales</li>