Features/update-css-helpers (#69)

* demo page: disable build optimization * doc fix helper description * update cdn demo versioning * remove cdn deploy path filter * update dest demo page * Update azure-cdn-deploy.yml * BREAKING CHANGE change helper naming * doc update helper related content * update pkg version * doc fix helper classes --------- Co-authored-by: medevod <medevod@github.com>
mgpluscss · Nov 9, 2024 · 40a0922 · 40a0922
1 parent a8088a6
commit 40a0922
Show file tree

Hide file tree

Showing 7 changed files with 115 additions and 102 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -19,7 +19,7 @@
 <body>
   <header>
     <nav class="mg-fixed-top mg-w100">
-      <div class="mg-container mg-row mg-x--middle mg-x--between  mg-p-t1">
+      <div class="mg-container mg-row mg-x--middle mg-x--between  mg-pad-t1">
         <div class="mg-group">
           <div class="mg-dropdown">
             <button title="theme-switcher" data-toggle="dropdown" class="mg-button--small mg-icon-dropdown">
@@ -39,7 +39,7 @@
             <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-p-r3  mg-p-l1">
+            <div class="mg-dropdown--content  mg-pad-r3  mg-pad-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" />
@@ -59,7 +59,7 @@
             </div>
           </div>
         </div>
-        <div class="mg-right mg-dropdown ">
+        <div class="mg-right mg-dropdown mg-pad-t1">
           <button title="menu" data-toggle="dropdown" class="mg-button--large"><i
               class="mg-icon mg-icon--l icon-menu "></i></button>
           <div class="mg-dropdown--content mg-right mg-nav mg-w50vh mg-max-h80vh">

diff --git a/demo/sections/grid-section.html b/demo/sections/grid-section.html
@@ -18,7 +18,7 @@ <h5>Row sizing and placement</h5>
     <div class="mg-row  mg-x6 mg-x--offset3">
       <div class="grid-cel">x6 offset3</div>
     </div>
-    <div class="mg-col  mg-p-t2">
+    <div class="mg-col  mg-pad-t2">
       <div class="mg-row mg-x--start">
         <div class="grid-cel mg-x6">x6 start</div>
       </div>
@@ -141,7 +141,7 @@ <h5>Row grow</h5>
   </div>
   <h5>Gap</h5>
   <p>Mg+ uses a modular system to define the gap between elements with rem based unit (0 to 10rem)
-    <code>mg-gap-[0-10]</code>
+    <code>mg-gap[0-10]</code>
     <code>mg-row-gap[0-10]</code>
     <code>mg-row-gap[0-10]</code>
   </p>

diff --git a/demo/sections/helpers-section.html b/demo/sections/helpers-section.html
diff --git a/demo/sections/intro-section.html b/demo/sections/intro-section.html
@@ -23,10 +23,10 @@ <h3>Most popular minified css libraries against mg+</h3>
                 <progress max="256" value="8"></progress>
                 <div class="mg-badge  mg-m-l5 mg-text-s">8 KB</div>
             </div>
-            <b>Mg+ v1.3.1</b>
+            <b>Mg+ v1.3.2</b>
             <div class="mg-row">
                 <progress max="256" value="59"></progress>
-                <div class="mg-badge  mg-m-l5 mg-text-s">59 KB</div>
+                <div class="mg-badge  mg-m-l5 mg-text-s">64 KB</div>
             </div>
             <b>Bootstrap v5.3.0</b>
             <div class="mg-row">

diff --git a/dist/css/mgplus.css b/dist/css/mgplus.css
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "mgplus",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "mgplus a micro CSS library",
   "homepage": "https://evodim.github.io/mgplus",
   "repository": "https://github.com/Evodim/mgplus",

diff --git a/src/scss/extensions/mg-positioning.scss b/src/scss/extensions/mg-positioning.scss
@@ -21,29 +21,29 @@
     padding-bottom: $value;
   }
 
-  .mg-mrg#{$key} {
+  .mg-marg#{$key} {
     margin: $value;
   }
 
-  .mg-mrg-l#{$key} {
+  .mg-marg-l#{$key} {
     margin-left: $value;
   }
 
-  .mg-mrg-r#{$key} {
+  .mg-marg-r#{$key} {
     margin-right: $value;
   }
 
-  .mg-mrg-t#{$key} {
+  .mg-marg-t#{$key} {
     margin-top: $value;
   }
 
-  .mg-mrg-b#{$key} {
+  .mg-marg-b#{$key} {
     margin-bottom: $value;
   }
 
 }
 
-.mg-mrg-auto {
+.mg-marg-auto {
   margin: auto;
 }