Updates

- Added Accent Colors - Updated Spacing Issues
ggedde · Apr 19, 2022 · dcd3a63 · dcd3a63
1 parent d93a542
commit dcd3a63
Show file tree

Hide file tree

Showing 11 changed files with 112 additions and 45 deletions.
diff --git a/_colors.scss b/_colors.scss
@@ -1,21 +1,30 @@
 @each $color_name, $color_value in $colors {
 	.btn-#{$color_name}.btn-outline,
-	.color-#{$color_name} {
+	.accent-#{$color_name} .btn.btn-outline:not(:hover),
+	.color-#{$color_name},
+	.color-#{$color_name} * {
 		color: $color_value;
 	}
 	.btn-#{$color_name},
+	.accent-#{$color_name} .btn:not(.btn-outline),
 	.btn-#{$color_name}.btn-outline:hover,
+	.accent-#{$color_name} .btn.btn-outline:hover,
 	.btn-#{$color_name}.btn-outline:focus,
+	.accent-#{$color_name} .btn.btn-outline:focus,
 	.bg-#{$color_name} {
 		background-color: $color_value;
 	}
 	.btn-#{$color_name},
+	.accent-#{$color_name} .btn,
 	.btn-#{$color_name}.btn-outline:hover,
+	.accent-#{$color_name} .btn.btn-outline:hover,
 	.btn-#{$color_name}.btn-outline:focus,
+	.accent-#{$color_name} .btn.btn-outline:focus,
 	.border-#{$color_name} {
 		border-color: $color_value;
 	}
-	.btn-#{$color_name} {
+	.btn-#{$color_name},
+	.accent-#{$color_name} .btn {
 		&:hover,
 		&:focus {
 			background-color: darken($color_value, 10%);
@@ -27,4 +36,22 @@
 			border-color: darken($color_value, 5%);
 		}
 	}
+	.accent-#{$color_name} {
+		select, input, textarea {
+			&:hover,
+			&:focus,
+			&:checked {
+				border-color: $color_value;
+			}
+			&:checked::after {
+				background-color: $color_value;
+			}
+		}
+		fieldset {
+			border-color: $color_value;
+			&:focus-within legend label {
+				color: $color_value;
+			}
+		}
+	}
 }
diff --git a/_grid.scss b/_grid.scss
@@ -131,7 +131,10 @@
 }
 @each $s, $space in $spacing {
 
-	.g-#{$s} {
+	.g-#{$s},
+	.grid.g-#{$s}, 
+	.row.g-#{$s}, 
+	[class*="grid-"].g-#{$s} {
 		gap: #{$space};
 	}
 

diff --git a/_utilities.scss b/_utilities.scss
@@ -72,8 +72,8 @@ Layout Utility Classes - Can include Grid Prefix Ex. .md-right, etc
 .w{ width: 100% }
 .vw{ width: 100vw }
 @for $i from 1 through 12 {
-	.h-#{$i}00{ height: #{$i}00px }
-	.w-#{$i}00{ width: #{$i}00px }
+	.h-#{$i}00{ max-height: #{$i}00px; min-height: #{$i}00px }
+	.w-#{$i}00{ max-width: #{$i}00px; min-width: #{$i}00px }
 }
 
 /*************************************
@@ -140,8 +140,8 @@ Flex Utility Classes
 			&-w{ width: 100% }
 			&-vw{ width: 100vw }
 			@for $i from 1 through 12 {
-				&-h-#{$i}00{ height: #{$i}00px }
-				&-w-#{$i}00{ width: #{$i}00px }
+				&-h-#{$i}00{ max-height: #{$i}00px; min-height: #{$i}00px }
+				&-w-#{$i}00{ max-width: #{$i}00px; min-width: #{$i}00px }
 			}
 		}
 	}

diff --git a/_variables.scss b/_variables.scss
@@ -19,6 +19,8 @@ $colors: (
     "grey":        #aaaaaa,
     "dark":        #333333,
     "primary":     #0D7FBF,
+    "error":       #d52929,
+    "success":     #04ad3c,
     "text":        #606c76,
     "transparent": transparent,
 ) !default;

diff --git a/dist/spry.min.css b/dist/spry.min.css
diff --git a/dist/spry.min.css.gz b/dist/spry.min.css.gz
diff --git a/dist/spry.min.css.map b/dist/spry.min.css.map
diff --git a/docs/index.html b/docs/index.html
@@ -96,7 +96,7 @@ <h5 class="mb-3">Spry<span class="md-none"> </span>CSS <img src="https://img.shi
             <section id="installation">
                 <h1 class="mb-3">SpryCSS</h1>
                 <p>SpryCSS aims to be a simple and customizable CSS Toolkit while being as 
-                    lightweight as possible (Only 9kb gzipped).</p>
+                    lightweight as possible (Only 11kb gzipped).</p>
                 <p>The goal is to remove the messy and tedious task of coming up with class names 
                     for elements that just need simple layout styles and provide basic components to help you get up and running fast, 
                     but not try to do everything which can bloat your project. 
@@ -218,20 +218,42 @@ <h4 class="mt-4">SCSS Variable</h4>
             <section id="colors">
                 <h2>Colors</h2>
                 <h4 class="mt-3">Text Colors</h4>
-                <code class="block italic small mt-2 color-primary">.color-{color}</code>
+                <div><code class="color-grey italic small">.color-{color}</code></div>
+                <div class="block mt-2 color-primary">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
+                <div class="block mt-2 color-error">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
+                <div class="block mt-2 color-success">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
+                <div class="block mt-2 color-grey">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
                 <h4 class="mt-3">Background Colors</h4>
-                <code class="block italic small mt-2 bg-dark color-light">.bg-{color} .color-light</code>
+                <div><code class="color-grey italic small">.bg-{color} .color-light</code></div>
+                <div class="block mt-2 bg-primary color-light">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
                 <h4 class="mt-3">Border Colors</h4>
-                <code class="block italic small mt-2 border border-primary">.border .border-{color}</code>
+                <div><code class="color-grey italic small">.border .border-{color}</code></div>
+                <div class="block mt-2 border border-primary">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
                 <h4 class="mt-3">Button Colors</h4>
-                <code class="btn btn-primary italic small mt-2">.btn .btn-{color}</code>
+                <div><code class="color-grey italic small">.btn .btn-{color}</code></div>
+                <button class="btn btn-primary mt-2">Lorem Ipsum</button>
+                <h4 class="mt-3">Accent Colors</h4>
+                <div class="small mb-1">You can wrap elements with an accent color to change and override all the accent colors within that container.</div>
+                <div><code class="color-grey italic small">.accent-{color}</code></div>
+                <div class="accent-error p-2 mt-1 border">
+                    <button class="btn mt-2">Lorem Ipsum</button>
+                    <button class="btn btn-outline mt-2">Lorem Ipsum</button>
+                    <div class="mt-2">
+                        Inputs
+                    </div>
+                    <input type="text" />
+                    <input type="checkbox" />
+                    <input type="radio" />
+                </div>
                 <h4 class="mt-4">SCSS Variable</h4>
                 <pre class="mt-1"><code class="language-scss">$colors: (
     "white":       #fff,
     "light":       #eee,
     "grey":        #aaa,
     "dark":        #333,
     "primary":     #4488ff,
+    "error":       #d52929,
+    "success":     #04ad3c,
     "text":        #606c76,
     "transparent": transparent,
 )</code></pre>
@@ -449,6 +471,19 @@ <h5 class="mb-1 mt-4">Specify number of columns centered</h5>
     &lt;div&gt;&lt;/div&gt;
     &lt;div&gt;&lt;/div&gt;
     &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;</code></pre>
+                <h5 class="mb-2 mt-4">Set Sidebar width with Auto Content Column</h5>
+                <div class="row g-0">
+                    <div class="bg-light rounded p-1 w-300">
+                        w-300
+                    </div>
+                    <div class="bg-light rounded p-1">
+                        auto
+                    </div>
+                </div>
+                <pre class="mt-3"><code class="language-html">&lt;div class="row"&gt;
+    &lt;div class="w-300"&gt;&lt;/div&gt;
+    &lt;div&gt;&lt;/div&gt;
 &lt;/div&gt;</code></pre>
                 <h5 class="mt-4 mb-1">Custom Ordering with Space between <cite class="small md-ml-2 block md-inline-block">See <a href="#layout">Layout Classes</a> for more details</cite></h5>
                 <div class="row jc-between">
@@ -601,7 +636,7 @@ <h4 class="mb-1">Simple form with some Required Fields</h4>
                             </label>
                         </div>
                         <div>
-                            <label class="h5 is-select">Select *
+                            <label class="h5">Select *
                                 <select required>
                                     <option value="" disabled>Select</option>
                                     <option>One</option>
@@ -648,7 +683,7 @@ <h5 class="mb-1">Horizontal Radios *</h5>
             &lt;/label&gt;
         &lt;/div&gt;
         &lt;div&gt;
-            &lt;label class="h5 is-select">Select &gt;
+            &lt;label class="h5">Select &gt;
                 &lt;select required&gt;
                     &lt;option value="" disabled>Select&lt;/option&gt;
                     &lt;option>One&lt;/option&gt;
@@ -692,7 +727,7 @@ <h4 class="col-12 mt-4">Responsive labels with loading button and disabled field
                         <legend><label>Email</label></legend>
                         <input type="email" onblur="if (this.value) this.parentElement.classList.add('active')" />
                     </fieldset>
-                    <fieldset class="is-select">
+                    <fieldset>
                         <legend><label>Select</label></legend>
                         <select onchange="if (this.value) this.parentElement.classList.add('active')">
                             <option value="" selected disabled></option>
@@ -717,7 +752,7 @@ <h4 class="col-12 mt-4">Responsive labels with loading button and disabled field
         &lt;legend&gt;&lt;label&gt;Email&lt;/label&gt;&lt;/legend&gt;
         &lt;input type="email" onblur="if (this.value) this.parentElement.classList.add('active')" /&gt;
     &lt;/fieldset&gt;
-    &lt;fieldset class="is-select"&gt;
+    &lt;fieldset&gt;
         &lt;legend&gt;&lt;label&gt;Select&lt;/label&gt;&lt;/legend&gt;
         &lt;select onchange="if (this.value) this.parentElement.classList.add('active')"&gt;
             &lt;option value="" selected disabled&gt;&lt;/option&gt;
@@ -973,30 +1008,30 @@ <h3 id="layout" class="mt-4">Layout Utility Classes</h3>
                 <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">vh</code> <code>{ height: 100vh }</code></div>
                 <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">w</code> <code>{ width: 100% }</code></div>
                 <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">vw</code> <code>{ width: 100vw }</code></div>
-                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">w-100</code> <code>{ width: 100px }</code></div>
-                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">w-200</code> <code>{ width: 200px }</code></div>
-                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">w-300</code> <code>{ width: 300px }</code></div>
-                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">w-400</code> <code>{ width: 400px }</code></div>
-                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">w-500</code> <code>{ width: 500px }</code></div>
-                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">w-600</code> <code>{ width: 600px }</code></div>
-                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">w-700</code> <code>{ width: 700px }</code></div>
-                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">w-800</code> <code>{ width: 800px }</code></div>
-                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">w-900</code> <code>{ width: 900px }</code></div>
-                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">w-1000</code> <code>{ width: 1000px }</code></div>
-                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">w-1100</code> <code>{ width: 1100px }</code></div>
-                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">w-1200</code> <code>{ width: 1200px }</code></div>
-                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">h-100</code> <code>{ height: 100px }</code></div>
-                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">h-200</code> <code>{ height: 200px }</code></div>
-                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">h-300</code> <code>{ height: 300px }</code></div>
-                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">h-400</code> <code>{ height: 400px }</code></div>
-                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">h-500</code> <code>{ height: 500px }</code></div>
-                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">h-600</code> <code>{ height: 600px }</code></div>
-                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">h-700</code> <code>{ height: 700px }</code></div>
-                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">h-800</code> <code>{ height: 800px }</code></div>
-                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">h-900</code> <code>{ height: 900px }</code></div>
-                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">h-1000</code> <code>{ height: 1000px }</code></div>
-                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">h-1100</code> <code>{ height: 1100px }</code></div>
-                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">h-1200</code> <code>{ height: 1200px }</code></div>
+                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">w-100</code> <code>{ width: 100px; min-width: 100px }</code></div>
+                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">w-200</code> <code>{ width: 200px; min-width: 200px }</code></div>
+                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">w-300</code> <code>{ width: 300px; min-width: 300px }</code></div>
+                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">w-400</code> <code>{ width: 400px; min-width: 400px }</code></div>
+                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">w-500</code> <code>{ width: 500px; min-width: 500px }</code></div>
+                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">w-600</code> <code>{ width: 600px; min-width: 600px }</code></div>
+                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">w-700</code> <code>{ width: 700px; min-width: 700px }</code></div>
+                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">w-800</code> <code>{ width: 800px; min-width: 800px }</code></div>
+                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">w-900</code> <code>{ width: 900px; min-width: 900px }</code></div>
+                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">w-1000</code> <code>{ width: 1000px; min-width: 1000px }</code></div>
+                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">w-1100</code> <code>{ width: 1100px; min-width: 1100px }</code></div>
+                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">w-1200</code> <code>{ width: 1200px; min-width: 1200px }</code></div>
+                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">h-100</code> <code>{ height: 100px; min-height: 100px }</code></div>
+                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">h-200</code> <code>{ height: 200px; min-height: 200px }</code></div>
+                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">h-300</code> <code>{ height: 300px; min-height: 300px }</code></div>
+                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">h-400</code> <code>{ height: 400px; min-height: 400px }</code></div>
+                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">h-500</code> <code>{ height: 500px; min-height: 500px }</code></div>
+                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">h-600</code> <code>{ height: 600px; min-height: 600px }</code></div>
+                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">h-700</code> <code>{ height: 700px; min-height: 700px }</code></div>
+                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">h-800</code> <code>{ height: 800px; min-height: 800px }</code></div>
+                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">h-900</code> <code>{ height: 900px; min-height: 900px }</code></div>
+                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">h-1000</code> <code>{ height: 1000px; min-height: 1000px }</code></div>
+                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">h-1100</code> <code>{ height: 1100px; min-height: 1100px }</code></div>
+                <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">h-1200</code> <code>{ height: 1200px; min-height: 1200px }</code></div>
                 <div class="mt-3"><h5>Text</h5></div>
                 <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">left</code> <code>{ text-align: left }</code></div>
                 <div class="ml-2"><code class="color-grey">{breakpoint}-</code><code class="color-primary">center</code> <code>{ text-align: center }</code></div>

diff --git a/docs/spry.min.css b/docs/spry.min.css
diff --git a/docs/spry.min.css.map b/docs/spry.min.css.map
diff --git a/package.json b/package.json
@@ -18,7 +18,7 @@
   "homepage": "https://github.com/ggedde/spry-css#readme",
   "scripts": {
     "dev": "node_modules/.bin/chokidar *.scss -c 'npm run build'",
-    "build": "node_modules/.bin/sass --style=compressed ./spry.scss | node_modules/.bin/postcss --map false --use autoprefixer --use postcss-combine-media-query -o ./dist/spry.min.css; sass --style=compressed ./spry.scss | node_modules/.bin/postcss --map false --use autoprefixer --use postcss-combine-media-query -o ./docs/spry.min.css"
+    "build": "node_modules/.bin/sass --style=compressed ./spry.scss | node_modules/.bin/postcss --map false --use autoprefixer --use postcss-combine-media-query -o ./dist/spry.min.css; sass --style=compressed ./spry.scss | node_modules/.bin/postcss --map false --use autoprefixer --use postcss-combine-media-query -o ./docs/spry.min.css; gzip -c ./dist/spry.min.css > ./dist/spry.min.css.gz"
   },
   "dependencies": {
     "autoprefixer": "^10.4.1",