Version 1.4.2

- Updated Modal Transitions - Updated Documentation
ggedde · Sep 9, 2021 · ab3c33c · ab3c33c
1 parent a692b2f
commit ab3c33c
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 47 deletions.
diff --git a/_modals.scss b/_modals.scss
@@ -15,15 +15,15 @@
 .modal {
 	align-items: center;
 	background-color: rgba(0, 0, 0, .7);
-	bottom: 0;
 	justify-content: center;
-	left: 0;
 	opacity: 0;
 	pointer-events: none;
 	position: fixed;
-	right: 0;
 	top: 0;
-	transition: opacity .2s ease-in-out;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	transition: opacity .15s cubic-bezier(.25,.8,.25,1);
 	z-index: 1000;
 	display: flex;
 	.modal-container {
@@ -32,9 +32,8 @@
 		box-sizing: border-box;
 		display: block;
 		overflow: hidden;
-		top: 50%;
-		transform: scale(0.5) translateY(-50%);
-		transition: transform .4s cubic-bezier(1, 0, 0, 1);
+		transform: scale(0.6);
+		transition: transform .2s cubic-bezier(.25,.8,.25,1);
 		width: 90%;
 		.modal-heading,
 		.modal-body,
@@ -116,7 +115,6 @@
 		opacity: 1;
 		pointer-events: all;
 		.modal-container {
-			transition: transform .3s cubic-bezier(0, 1, 0, 1);
 			transform: none;
 		}
 	}

diff --git a/_ui.scss b/_ui.scss
@@ -3,7 +3,7 @@ input,
 textarea,
 select, 
 fieldset {
-	transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color 0.2s ease-in-out;
+	transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out;
 	appearance: none;
 	border: 1px solid map-get($colors, 'grey');
 	color: inherit;

diff --git a/dist/spry.min.css b/dist/spry.min.css
diff --git a/dist/spry.min.css.map b/dist/spry.min.css.map
diff --git a/docs/index.html b/docs/index.html
@@ -86,13 +86,22 @@ <h5 class="mb-3">Spry<span class="sm-none"> </span>CSS <img src="https://img.shi
         </nav>
         <main class="lg-mw">
             <section id="installation">
-                <h1 class="h2 mb-4">SpryCss - Getting Started and Installation</h1>
+                <h1 class="mb-3">SpryCss</h1>
+                <p>The objective of SpryCss is to be a quick and simple CSS Toolkit with common components while being as 
+                    lightweight as possible (Only 12kb when gzipped). It can be time consuming and tedious to constantly come up with class names 
+                    for elements that just need simple layout styles like padding, margin, alignment, etc. 
+                    SpryCss is set to provide enough utility classes so you don't have to worry about that anymore, 
+                    but not set out to try and do everything which can bloat your project. If an element needs more then 
+                    just the basic utility styles then it is most likely an element that should have a custom class name 
+                    and custom styles in your CSS files.
+                </p>
+                <h2 class="my-3">Getting Started and Installation</h2>
                 <h4>Using the CDN:</h4>
                 <pre><code class="language-html">&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ggedde/spry-css/dist/spry.min.css"&gt;</code></pre>
 
                 <h4 class="mt-4">Using NPM and SCSS:</h4>
                 <pre><code class="language-bash">npm install @ggedde/spry-css</code></pre>
-                <p>Then in your scss file import Spry Css:</p>
+                <p>Then in your scss file import SpryCss:</p>
                 <pre><code class="language-scss">@import 'node_modules/@ggedde/spry-css/spry.scss';</code></pre>
                 <cite>Note: you may need to change the path to match your project's node_modules folder</cite>
 
@@ -107,15 +116,15 @@ <h4 class="mt-4">Example Variables File:</h4>
     sm: 600px,
     md: 900px,
     lg: 1200px,
-) !default;
+);
 
 // Specify each breakpoint gap size. &lt;section&gt; tags with get padding based on gap size.
 $gaps: (
     default: 1.5rem,
     sm: 1.75rem,
     md: 2rem,
     lg: 2.25rem,
-) !default;
+);
 
 // Specify each color used in color-, bg-, border-, btn-
 $colors: (
@@ -126,7 +135,7 @@ <h4 class="mt-4">Example Variables File:</h4>
     "primary":     #0D7FBF,
     "text":        #606c76,
     "transparent": transparent,
-) !default;
+);
 
 // Specify each type tag and class like &lt;h3&gt; and .h3 etc.
 $types: (
@@ -137,19 +146,29 @@ <h4 class="mt-4">Example Variables File:</h4>
     h5: ( font-size: 1.2rem, font-weight: 300, color: map-get($colors, 'text'), line-height: 1.5 ),
     h6: ( font-size: 1.0rem, font-weight: 300, color: map-get($colors, 'text'), line-height: 1.4 ),
     p:  ( font-size: 1.0rem, font-weight: 300, color: map-get($colors, 'text'), line-height: 1.4 ),
-) !default;
+);
 
 // Specify each spacing that applies to Margin and Padding.  Ex .m0, .m1, .mx3, .pt3, .mtn3, etc
 $spacing: (
-    0: 0rem,
+    0: 0,
     1: .5rem, 
     2: 1rem, 
     3: 2rem, 
     4: 4rem
-) !default;</code></pre>
-
+);</code></pre>
+<h4 class="mt-4 mb-1">Accessing Variables in SCSS</h4>
+<p>You can access variables using <code>map-get()</code></p>
+Examples:
+<pre class="mt-1"><code class="language-css">p {
+    color: map-get($colors, 'primary');
+    margin-bottom: 1rem;
+    @media screen and (min-width: map-get($breakpoints, "sm")) {
+        margin-bottom: .5rem;
+    }
+}
+</code></pre>
             </section>
-            <hr>
+            <hr class="mt-0">
             <section id="typography">
                 <h2 class="mb-4">Typography</h2>
                 <h1>Heading H1</h1>
@@ -209,7 +228,7 @@ <h4 class="mt-4">SCSS Variable</h4>
             <hr>
             <section id="icons">
                 <h2 class="mb-3">Icons</h2>
-                <p>Spry CSS doesn't come with its own icon package. You can use whatever ican package or icon webfont you want, but icon webfonts can greatly increase the size of your projects. A recommended alternative is to use direct svg code within your project. This produces the smallest file size while producing high resolution icons and allowing you the most flexibility to style the icons within your css.</p>
+                <p>SpryCSS doesn't come with its own icon package. You can use whatever ican package or icon webfont you want, but icon webfonts can greatly increase the size of your projects. A recommended alternative is to use direct svg code within your project. This produces the smallest file size while producing high resolution icons and allowing you the most flexibility to style the icons within your css.</p>
                 <p>A great option for this is <a target="_blank" href="https://materialdesignicons.com/">Material Design Icons</a>. You can search for icons and view the SVG code by clicking on the Code dropdown and click on 'View SVG'. Then copy and paste the code in your html.</p>
                 <p>If your using Visual Studio Code you can install the extension <a target="_blank" href="https://github.com/r3volution11/vscode-materialdesignicons-svg">vscode-materialdesignicons-svg</a> that provides code snippets to quickly add the SVG code.</p>
                 <cite class="block small fade mt-1">* Note that the extension currently does not add <code class="color-primary">fill="currentColor"</code> to the paths so you will need to add that manually.</cite>
@@ -529,24 +548,24 @@ <h5 class="mt-4 mb-1">Row spanning with nested rows and auto height</h5>
                 </div>
             </div>
             <pre class="mt-3"><code class="language-html">&lt;div class="row"&gt;
-    &lt;div class="sm-col-4 bg-light rounded p-1"&gt;
+    &lt;div class="sm-col-4"&gt;
         .sm-col-4
     &lt;/div&gt;
     &lt;div class="row sm-col-8"&gt;
-        &lt;div class="bg-light rounded p-1"&gt;
+        &lt;div&gt;
             Lorem ipsum dolor sit amet, consetetur sadipscing elitrsed diam nonumy.
         &lt;/div&gt;
-        &lt;div class="bg-light rounded p-1"&gt;
+        &lt;div&gt;
             auto
         &lt;/div&gt;
-        &lt;div class="bg-light rounded p-1"&gt;
+        &lt;div&gt;
             auto
         &lt;/div&gt;
         &lt;div class="row col-12"&gt;
-            &lt;div class="bg-light rounded p-1"&gt;
+            &lt;div&gt;
                 auto
             &lt;/div&gt;
-            &lt;div class="bg-light rounded p-1"&gt;
+            &lt;div&gt;
                 Lorem ipsum dolor sit amet, consetetur sadipscing ut labore et dolore magna aliquyam erat.
             &lt;/div&gt;
         &lt;/div&gt;
@@ -655,23 +674,23 @@ <h5 class="mb-1">Horizontal Radios *</h5>
                     <h4 class="col-12 mt-4">Responsive labels with loading button and disabled fields on submit</h4>
                     <fieldset>
                         <legend><label>Name *</label></legend>
-                        <input type="text" required onblur="if (this.value){ this.parentElement.classList.add('active')}" />
+                        <input type="text" required onblur="if (this.value) this.parentElement.classList.add('active')" />
                     </fieldset>
                     <fieldset>
                         <legend><label>Email</label></legend>
-                        <input type="email" onblur="if (this.value){ this.parentElement.classList.add('active')}" />
+                        <input type="email" onblur="if (this.value) this.parentElement.classList.add('active')" />
                     </fieldset>
                     <fieldset class="is-select">
                         <legend><label>Select</label></legend>
-                        <select onchange="if (this.value){ this.parentElement.classList.add('active')}">
+                        <select onchange="if (this.value) this.parentElement.classList.add('active')">
                             <option value="" selected disabled></option>
                             <option>Two</option>
                             <option>Three</option>
                         </select>
                     </fieldset>
                     <fieldset class="col-12 pt-2">
                         <legend><label>Message</label></legend>
-                        <textarea onblur="if (this.value){ this.parentElement.classList.add('active')}"></textarea>
+                        <textarea onblur="if (this.value) this.parentElement.classList.add('active')"></textarea>
                     </fieldset>
                     <button  class="col-6 btn has-loader" type="submit">Submit with Loading Icon</button>
                 </form>
@@ -680,47 +699,47 @@ <h4 class="col-12 mt-4">Responsive labels with loading button and disabled field
     &lt;h4 class="col-12 mt-4"&gt;Responsive labels with loading button and disabled fields on submit&lt;/h4&gt;
     &lt;fieldset&gt;
         &lt;legend&gt;&lt;label&gt;Name *&lt;/label&gt;&lt;/legend&gt;
-        &lt;input type="text" required onblur="if (this.value){ this.parentElement.classList.add('active')}" /&gt;
+        &lt;input type="text" required onblur="if (this.value) this.parentElement.classList.add('active')" /&gt;
     &lt;/fieldset&gt;
     &lt;fieldset&gt;
         &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;input type="email" onblur="if (this.value) this.parentElement.classList.add('active')" /&gt;
     &lt;/fieldset&gt;
     &lt;fieldset class="is-select"&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;select onchange="if (this.value) this.parentElement.classList.add('active')"&gt;
             &lt;option value="" selected disabled&gt;&lt;/option&gt;
             &lt;option&gt;Two&lt;/option&gt;
             &lt;option&gt;Three&lt;/option&gt;
         &lt;/select&gt;
     &lt;/fieldset&gt;
     &lt;fieldset class="col-12 pt-2"&gt;
         &lt;legend&gt;&lt;label&gt;Message&lt;/label&gt;&lt;/legend&gt;
-        &lt;textarea onblur="if (this.value){ this.parentElement.classList.add('active')}"&gt;&lt;/textarea&gt;
+        &lt;textarea onblur="if (this.value) this.parentElement.classList.add('active')"&gt;&lt;/textarea&gt;
     &lt;/fieldset&gt;
     &lt;button  class="col-6 btn has-loader" type="submit"&gt;Submit with Loading Icon&lt;/button&gt;
 &lt;/form&gt;</code></pre>
                 <h4 class="col-12 mb-2 mt-3">Dense Fields using <code class="color-primary small">form.small</code></h4>
                 <form class="small row g-2 jc-center">
                     <fieldset>
                         <legend><label>Name</label></legend>
-                        <input type="text" onblur="if (this.value){ this.parentElement.classList.add('active')}" />
+                        <input type="text" onblur="if (this.value) this.parentElement.classList.add('active')" />
                     </fieldset>
                     <fieldset>
                         <legend><label>Email</label></legend>
-                        <input type="email" onblur="if (this.value){ this.parentElement.classList.add('active')}" />
+                        <input type="email" onblur="if (this.value) this.parentElement.classList.add('active')" />
                     </fieldset>
                     <fieldset class="is-select">
                         <legend><label>Select</label></legend>
-                        <select onchange="if (this.value){ this.parentElement.classList.add('active')}">
+                        <select onchange="if (this.value) this.parentElement.classList.add('active')">
                             <option value="" selected disabled></option>
                             <option>Two</option>
                             <option>Three</option>
                         </select>
                     </fieldset>
                     <fieldset class="col-12 pt-2">
                         <legend><label>Message</label></legend>
-                        <textarea onblur="if (this.value){ this.parentElement.classList.add('active')}"></textarea>
+                        <textarea onblur="if (this.value) this.parentElement.classList.add('active')"></textarea>
                     </fieldset>
                     <button class="col-4 btn has-loader" type="submit">Submit</button>
                 </form>
@@ -775,12 +794,12 @@ <h3>Login</h3>
                             <form>
                                 <fieldset>
                                     <legend><label>Email</label></legend>
-                                    <input id="login-email" type="email" required onblur="if (this.value){ this.parentElement.classList.add('active')}" />
+                                    <input id="login-email" type="email" required onblur="if (this.value) this.parentElement.classList.add('active')" />
                                 </fieldset>
 
                                 <fieldset class="my-2">
                                     <legend><label>Password</label></legend>
-                                    <input type="password" required onblur="if (this.value){ this.parentElement.classList.add('active')}" />
+                                    <input type="password" required onblur="if (this.value) this.parentElement.classList.add('active')" />
                                 </fieldset>
 
                                 <a href="#" class="mt-1 block">Forgot Password?</a>
@@ -802,12 +821,12 @@ <h3>Login</h3>
             &lt;form&gt;
                 &lt;fieldset&gt;
                     &lt;legend&gt;&lt;label&gt;Email&lt;/label&gt;&lt;/legend&gt;
-                    &lt;input id="login-email" type="email" required onblur="if (this.value){ this.parentElement.classList.add('active')}" /&gt;
+                    &lt;input id="login-email" type="email" required onblur="if (this.value) this.parentElement.classList.add('active')" /&gt;
                 &lt;/fieldset&gt;
 
                 &lt;fieldset class="my-3"&gt;
                     &lt;legend&gt;&lt;label&gt;Password&lt;/label&gt;&lt;/legend&gt;
-                    &lt;input type="password" required onblur="if (this.value){ this.parentElement.classList.add('active')}" /&gt;
+                    &lt;input type="password" required onblur="if (this.value) this.parentElement.classList.add('active')" /&gt;
                 &lt;/fieldset&gt;
 
                 &lt;a href="#" class="mt-3"&gt;Forgot Password?&lt;/a&gt;

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
@@ -1,6 +1,6 @@
 {
   "name": "@ggedde/spry-css",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "Lightweight Mini Utility CSS Framework",
   "repository": {
     "type": "git",
@@ -18,7 +18,7 @@
   "homepage": "https://github.com/ggedde/spry-css#readme",
   "scripts": {
     "dev": "node_modules/.bin/chokidar *.scss -c 'npm run build'",
-    "build": "sass --style=compressed ./spry.scss | node_modules/.bin/postcss --map false --use autoprefixer --use postcss-combine-media-query -o ./dist/spry.min.css"
+    "build": "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"
   },
   "dependencies": {
     "autoprefixer": "^10.2.5",