@ulu/frontend 0.0.23 → 0.1.0-beta.0

package/scss/base/_keyframes.scss

@@ -1,16 +1,17 @@
 ////
 /// @group keyframes
+/// Outputs keyframes used in animations for components, etc
 ////
 
 @use "../utils";
 
-/// Prints CSS keyframes
+/// Output ulu CSS keyframes
 /// @example scss
 ///  @include ulu.base-keyframes-styles();
 
 @mixin styles {
   @include utils.file-header('base', 'keyframes');
-  @keyframes fadeIn {
+  @keyframes UluFadeIn {
     0% {
       opacity: 0; 
     }
@@ -18,7 +19,17 @@
       opacity: 1; 
     }
   }
-  @keyframes FadeDownIn {
+  @keyframes UluFadeInUp {
+    0% {
+      opacity: 0; 
+      transform: translateY(10px);
+    }
+    100%  {
+      opacity: 1; 
+      transform: translateY(0);
+    }
+  }
+  @keyframes UluFadeInDown {
     0% {
       opacity: 0; 
       transform: translateY(-10px);
@@ -28,23 +39,51 @@
       transform: translateY(0);
     }
   }
-  @keyframes fadeInLeft {
+  @keyframes UluFadeInLeft {
     0% {
       opacity: 0; 
-      transform: translatex(-10px);
+      transform: translateX(-10px);
     }
     100% {
       opacity: 1; 
-      transform: translatex(0);
+      transform: translateX(0);
     }
   }
-  @keyframes fadeInZoom {
-    // Delay
+  @keyframes UluFadeInLeftMore {
+    0% {
+      opacity: 0; 
+      transform: translateX(-50px);
+    }
+    100% {
+      opacity: 1; 
+      transform: translateX(0);
+    }
+  }
+  @keyframes UluFadeInRight {
+    0% {
+      opacity: 0; 
+      transform: translateX(10px);
+    }
+    100% {
+      opacity: 1; 
+      transform: translateX(0);
+    }
+  }
+  @keyframes UluFadeInRightMore {
+    0% {
+      opacity: 0; 
+      transform: translateX(50px);
+    }
+    100% {
+      opacity: 1; 
+      transform: translateX(0);
+    }
+  }
+  @keyframes UluFadeInZoom {
     0% {
       opacity: 0; 
       transform: scale(0);
     }
-    // Start
     50% {
       opacity: 0; 
       transform: scale(0);
@@ -54,25 +93,85 @@
       transform: scale(1);
     }
   }
-  @keyframes rotate {
+  @keyframes UluFadeOut {
     0% {
-      transform: rotate(0deg);
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+  @keyframes UluFadeOutLeft {
+    0% {
+      opacity: 1;
+      transform: translateX(0);
+      }
+    100% {
+      opacity: 0;
+      transform: translateX(-10px);
+    }
+  }
+  @keyframes UluFadeOutRight {
+    0% {
+      opacity: 1;
+      transform: translateX(0);
+      }
+    100% {
+      opacity: 0;
+      transform: translateX(10px);
+    }
+  }
+  @keyframes UluFadeOutLeftMore {
+    0% {
+      opacity: 1;
+      transform: translateX(0);
+      }
+    100% {
+      opacity: 0;
+      transform: translateX(-50px);
+    }
+  }
+  @keyframes UluFadeOutRightMore {
+    0% {
+      opacity: 1;
+      transform: translateX(0);
+      }
+    100% {
+      opacity: 0;
+      transform: translateX(50px);
+    }
+  }
+  @keyframes UluFadeDownOut {
+    0% {
+      opacity: 1; 
+      transform: translateY(-10px);
     }
     100%  {
-      transform: rotate(360deg);
+      opacity: 0; 
+      transform: translateY(0);
     }
   }
-  @keyframes spin {
+  @keyframes UluSpin {
     from {
-      transform:rotate(0deg);
+      transform: rotate(0deg);
     }
     to {
-      transform:rotate(360deg);
+      transform: rotate(360deg);
     }
   }
-  @keyframes pulse {
+  @keyframes UluPulse {
     50% {
       opacity: 0.5;
     }
   }
+  @keyframes UluScaleIn {
+    0% {
+      opacity: 0;
+      transform: scale(0);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
 }

package/scss/base/_layout.scss

@@ -1,5 +1,6 @@
 ////
 /// @group layout
+/// Output base layout styles (containers, flex layout utilities, etc)
 ////
 
 @use "sass:map";
@@ -9,7 +10,9 @@
 
 /// Module Settings
 /// @type Map
-/// @prop {Number} $config.sides Sides to print for helper classes (ie. reduce output of uneeded sides)
+/// @prop {Boolean} containers [true] Enables container styling.
+/// @prop {Boolean} container-nested-no-padding [false] Toggles whether nested receive horizontal padding or not. 
+/// @prop {Boolean} layout-flex [true] Enables layout-flex styling.
 
 $config: (
   "containers" : true,
@@ -19,22 +22,23 @@ $config: (
 
 /// Change modules $config
 /// @param {Map} $changes Map of changes
-/// @example scss - General example, replace module-name with module's name
-///   @include module-name.set(( "property" : value ));
+/// @example scss - General example
+///   @include ulu.base-layout-set(( "property" : value ));
+
 @mixin set($changes) {
   $config: map.merge($config, $changes) !global;
 }
 
 /// Get a config option
 /// @param {Map} $name Name of property
-/// @example scss - General example, replace module-name with module's name
-///   @include module-name.get("property");
+/// @example scss - General example
+///   @include ulu.base-layout-get("property");
 
 @function get($name) {
   @return utils.require-map-get($config, $name, "base layout [config]");
 }
 
-/// Output Styles 
+/// Output Layout Styles 
 
 @mixin styles {
 

package/scss/base/_normalize.scss

@@ -1,5 +1,6 @@
 ////
 /// @group normalize
+/// Output base normalize stylesheet
 ////
 
 @use "../utils";
@@ -7,6 +8,8 @@
 
 
 /// Prints the normalize stylesheet. Originally based on modern-normalize 1.1.0
+/// - This has been reduced to what is needed and doesn't interfere
+/// - Should be updated/added to as needed
 /// @link https://www.npmjs.com/package/modern-normalize Modern Normalize (NPM)
 /// @example scss
 ///  @include ulu.base-normalize-styles();
@@ -17,21 +20,6 @@
   
   /*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
 
-  /*
-  Document
-  ========
-  */
-
-  /**
-  Use a better box model (opinionated).
-  */
-
-  // *,
-  // ::before,
-  // ::after {
-  //   box-sizing: border-box;
-  // }
-
   /**
   Use a more readable tab size (opinionated).
   */
@@ -41,57 +29,9 @@
     tab-size: 4;
   }
 
-  /**
-  1. Correct the line height in all browsers.
-  2. Prevent adjustments of font size after orientation changes in iOS.
-  */
-
-  // html {
-  //   line-height: 1.15; /* 1 */
-  //   -webkit-text-size-adjust: 100%; /* 2 */
-  // }
-
-  /*
-  Sections
-  ========
-  */
-
-  /**
-  Remove the margin in all browsers.
-  */
-
-  // body {
-  //   margin: 0;
-  // }
-
-  /**
-  Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
-  */
-
-  // body {
-  //   font-family:
-  //     system-ui,
-  //     -apple-system, /* Firefox supports this but not yet `system-ui` */
-  //     'Segoe UI',
-  //     Roboto,
-  //     Helvetica,
-  //     Arial,
-  //     sans-serif,
-  //     'Apple Color Emoji',
-  //     'Segoe UI Emoji';
-  // }
-
-  /*
-  Grouping content
-  ================
-  */
-
-  /**
-  1. Add the correct height in Firefox.
-  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
-  */
-
-  
+  body {
+    margin: 0;
+  }
 
   /*
   Text-level semantics
@@ -106,62 +46,6 @@
     text-decoration: underline dotted;
   }
 
-  /**
-  Add the correct font weight in Edge and Safari.
-  */
-
-  // b,
-  // strong {
-  //   font-weight: bolder;
-  // }
-
-  /**
-  1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
-  2. Correct the odd 'em' font sizing in all browsers.
-  */
-
-  // code,
-  // kbd,
-  // samp,
-  // pre {
-  //   font-family:
-  //     ui-monospace,
-  //     SFMono-Regular,
-  //     Consolas,
-  //     'Liberation Mono',
-  //     Menlo,
-  //     monospace; /* 1 */
-  //   font-size: 1em; /* 2 */
-  // }
-
-  /**
-  Add the correct font size in all browsers.
-  */
-
-  // small {
-  //   font-size: 80%;
-  // }
-
-  /**
-  Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
-  */
-
-  // sub,
-  // sup {
-  //   font-size: 75%;
-  //   line-height: 0;
-  //   position: relative;
-  //   vertical-align: baseline;
-  // }
-
-  // sub {
-  //   bottom: -0.25em;
-  // }
-
-  // sup {
-  //   top: -0.5em;
-  // }
-
   /*
   Tabular data
   ============

package/scss/base/_print.scss

@@ -0,0 +1,49 @@
+////
+/// @group print
+/// Output base print CSS styles
+////
+
+/// Printed Media Stylesheet
+/// - Note this is a portion of the print styles from the original framework
+///   and may be outdated. Most of the styling options have been removed though
+/// @example scss
+///  @include ulu.base-print-styles();
+
+@mixin styles {
+  @media (print) {
+    * {
+      background: transparent !important;
+      color: black !important;
+      box-shadow: none !important;
+      text-shadow: none !important;
+      filter: none !important;
+    }
+    a, 
+    a:visited {
+      text-decoration: underline;
+    }
+    pre, 
+    blockquote {
+      page-break-inside: avoid;
+    }
+    tr, img {
+      page-break-inside: avoid;
+    }
+    img {
+      max-width: 100% !important;
+    }
+    p, 
+    h2, 
+    h3 {
+      orphans: 3;
+      widows: 3;
+    }
+    h2, 
+    h3 {
+      page-break-after: avoid;
+    }
+    @page {
+      margin: 0.5in;
+    }
+  }
+}

package/scss/base/_root.scss

@@ -0,0 +1,28 @@
+////
+/// @group root
+/// Responsible for outputting the base :root custom properties for ulu
+////
+
+@use "sass:map";
+
+@use "../utils";
+
+/// Output custom properties in :root for base stylesheet
+/// @example scss
+///  @include ulu.base-root-styles();
+
+@mixin styles {
+  @include utils.file-header('base', 'root');
+  // Core/default css-vars
+  :root {
+    @include custom-properties();
+  }
+}
+
+/// Output custom properties for ulu
+
+@mixin custom-properties() {
+  --ulu-sticky-top-offset: 0px; // Should be adjusted by user
+  --ulu-sticky-bottom-offset: 0px; // Should be adjusted by user
+  --ulu-scrollbar-width: 0px; // Needs to be set by JS
+}

package/scss/base/_typography.scss

@@ -1,5 +1,6 @@
 ////
 /// @group typography
+/// Output base typography classes
 ////
 
 @use "sass:map";
@@ -7,7 +8,9 @@
 @use "../selector";
 @use "../utils";
 
-/// Prints elements base styles
+/// Prints typography base styles
+/// - These are any type sizes that specify "base-class" in their configuration
+/// - Type sizes with "base-class-prefixed" will be prefixed with the "type-" prefix
 /// @example scss
 ///  @include ulu.base-typography-styles();
 /// @example html {preview} Example of type size as base unprefixed