@ulu/frontend 0.0.3

package/scss/components/_rule.scss

@@ -0,0 +1,93 @@
+////
+/// @group rule
+////
+
+@use "sass:map";
+@use "../utils";
+@use "../element";
+@use "../color";
+@use "../selector";
+
+/// Module Settings
+/// @type Map
+/// @prop {Number} $config.short-width Short rule width (like an inline rule, normally used above headings), Setting this to false will disable output
+/// @prop {Number} $config.short-border-width Short rule width of border
+
+$config: (
+  "short-width" : 2.75rem,
+  "short-border-width" : 4px,
+  "short-modifiers" : false
+) !default;
+
+/// 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 ));
+
+@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");
+
+@function get($name) {
+  @return utils.require-map-get($config, $name, "rule [config]");
+}
+
+/// Output styles
+
+@mixin styles {
+
+  $class: selector.class("rule");
+  
+  #{ $class } {
+    @include element.rule();
+  }
+  #{ $class }--content-on-top {
+    position: relative;
+    > * {
+      background-color: white; // User woud need to specific per context needed or something
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      max-width: 100%;
+      padding: 0.5em;
+      margin: 0;
+    }
+  }
+
+  // Output user's styles presets
+  @each $name, $value in element.$rule-styles {
+    #{ $class }--#{ $name } {
+      @include element.rule-style($name);
+    }
+  }
+  // Output user's margin presets
+  @each $name, $value in element.$rule-margins {
+    #{ $class }--margin-#{ $name } {
+      @include element.rule-margin($name);
+    }
+  }
+
+  // Meant to be user by tself without content
+  $short-width: get("short-width");
+  @if ($short-width) {
+    #{ $class }--short {
+      width: $short-width;
+      max-width: 100%;
+      border-bottom-width: get("short-border-width");
+    }
+    @if get("short-modifiers") {
+      @each $mod, $opts in get("short-modifiers") {
+        #{ $class }--short {
+          width: map.get($opts, "width");
+          border-bottom-width: map.get($opts, "border-width");
+        }
+      }
+    }
+  }
+}

package/scss/helpers/_color.scss

@@ -0,0 +1,14 @@
+////
+/// @group color
+////
+
+@use "../utils";
+@use "../color";
+
+/// Prints color-context and color-[name] styles as helper classes (bottom of stylesheet)
+
+@mixin styles {
+  @include utils.file-header('helpers', 'color');
+  @include color.all-context-styles("helper-class");
+  @include color.all-color-class-styles();
+}

package/scss/helpers/_display.scss

@@ -0,0 +1,73 @@
+////
+/// @group display
+////
+
+@use "sass:map";
+
+@use "../utils";
+@use "../utility";
+@use "../layout";
+@use "../element";
+@use "../breakpoint";
+@use "../selector";
+
+/// Print utilities helper styles
+/// @example scss
+///  @include ulu.helper-display-styles();
+
+@mixin styles {
+
+  @include utils.file-header('helpers', 'display');
+
+  $hiddenVisuallyPrefix: selector.class("hidden-visually");
+
+  #{ $hiddenVisuallyPrefix } {
+    @include element.hidden-visually();
+  }
+  #{ $hiddenVisuallyPrefix }-focusable {
+    &:not(:active):not(:focus) {
+      @include element.hidden-visually();
+    }
+  }
+  // Consider removing
+  .clearfix,
+  .cf { 
+    @include layout.clearfix();
+  }
+  .display-block {
+    display: block;
+  }
+  .display-flex {
+    display: flex;
+  }
+  .display-inline-flex {
+    display: inline-flex;
+  }
+  .display-inline {
+    display: inline;
+  }
+  .display-inline-all * {
+    display: inline;
+  }
+  .display-inline-block {
+    display: inline-block;
+  }
+  .hidden,
+  .display-none {
+    display: none;
+  }
+
+  // Display none per breakpoint
+  @each $name in map.keys(breakpoint.$sizes) {
+    @include breakpoint.min($name) {
+      .hidden-min-#{ $name } {
+        display: none;
+      }
+    }
+    @include breakpoint.max($name) {
+      .hidden-max-#{ $name } {
+        display: none;
+      }
+    }
+  }
+}

package/scss/helpers/_index.scss

@@ -0,0 +1,67 @@
+////
+/// @group all
+////
+
+@forward "typography" as typography-*;
+@forward "display"  as display-*;
+@forward "utilities"  as utilities-*;
+@forward "print"  as print-*;
+@forward "units"  as units-*;
+@forward "color"  as color-*;
+
+@use "sass:map";
+@use "../utils";
+@use "typography";
+@use "display";
+@use "utilities";
+@use "units";
+@use "print";
+@use "color";
+
+// Used to check against user's includes
+
+$-all-includes: (
+  "typography" : true, 
+  "units" : true,
+  "display" : true,
+  "utilities" : true, 
+  "print" : true,
+  "color" : true
+);
+
+/// Prints all Helper styles
+/// @name helper-styles
+/// @param {List} $includes AA list of changes to this module's includes
+/// @example scss
+///  @include ulu.helper-styles();
+
+@mixin styles($includes: null) {
+  @include utils.file-header("helpers");
+  @if $includes {
+    @include utils.require-list-contains($-all-includes, $includes);
+    $-all-includes: map.merge($-all-includes, $includes) !global;
+  }
+  @if (map.get($-all-includes, "typography")) {
+    @include typography.styles;
+  }
+  @if (map.get($-all-includes, "units")) {
+    @include units.styles;
+  }
+  @if (map.get($-all-includes, "display")) {
+    @include display.styles;
+  }
+  @if (map.get($-all-includes, "utilities")) {
+    @include utilities.styles;
+  }
+  @if (map.get($-all-includes, "print")) {
+    @include print.styles;
+  }
+  @if (map.get($-all-includes, "color")) {
+    @include color.styles;
+  }
+}
+
+
+
+
+

package/scss/helpers/_print.scss

@@ -0,0 +1,58 @@
+////
+/// @group print
+////
+
+/// Printed Media Styles 
+/// @example scss
+///  @include ulu.helper-print-styles();
+
+@mixin styles {
+  // Note: this is an old framework stylesheet (may be outdated)
+  @media (print) {
+    .no-print { 
+      display: none; 
+    }
+    * {
+      background: transparent !important;
+      color: black !important;
+      box-shadow: none !important;
+      text-shadow: none !important;
+      filter: none !important;
+    }
+  
+    /* Black prints faster: h5bp.com/s */
+    a, 
+    a:visited {
+      text-decoration: underline;
+    }
+  
+    /* Don't show links for images, or javascript/internal links */
+    pre, 
+    blockquote {
+      border: 1px solid #999;
+      page-break-inside: avoid;
+    }
+  
+    /*thead {
+      display: table-header-group;
+    }*/
+  
+    /* h5bp.com/t */
+    tr, img {
+      page-break-inside: avoid;
+    }
+    img {
+      max-width: 100% !important;
+    }
+    p, 
+    h2, 
+    h3 {
+      orphans: 3;
+      widows: 3;
+    }
+    h2, 
+    h3 {
+      page-break-after: avoid;
+    }
+  }
+}

package/scss/helpers/_typography.scss

@@ -0,0 +1,80 @@
+////
+/// @group typography
+////
+
+@use "sass:map";
+@use "../utils";
+@use "../selector";
+@use "../typography";
+
+/// Prints Typography Helper styles
+/// @example scss
+///  @include ulu.helper-typography-styles();
+/// @example raw Example of type size as helper prefixed
+///  <span class="type-large-xxx">A</span>
+///  <span class="type-large-xx">A</span>
+///  <span class="type-large-x">A</span>
+///  <span class="type-large">A</span>
+///  <span class="type-base">A</span>
+///  <span class="type-small">A</span>
+///  <span class="type-small-x">A</span>
+
+@mixin styles {
+  
+  @include utils.file-header('helpers', 'typography');
+
+  $prefix: selector.class("type");
+
+  @each $size, $values in typography.$sizes {
+    @if (map.get($values, "helper-class")) {
+      @if (map.get($values, "helper-class-prefixed")) {
+        #{ $prefix }-#{$size} {
+          @include typography.size($size);
+        }
+      } @else {
+        .#{$size} {
+          @include typography.size($size);
+        }
+      }
+    }
+  }
+  #{ $prefix }-inherit { 
+    font-size: inherit; 
+    line-height: inherit;
+  }
+  #{ $prefix }-light    { font-weight: typography.get("font-weight-light"); }
+  #{ $prefix }-normal   { font-weight: typography.get("font-weight-normal"); }
+  #{ $prefix }-semibold { font-weight: typography.get("font-weight-semibold"); }
+  #{ $prefix }-bold     { font-weight: typography.get("font-weight-bold"); }
+  #{ $prefix }-truncate { 
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  
+  #{ $prefix }-italic   { font-style: italic; }
+
+  #{ $prefix }-center   { text-align: center; }
+  #{ $prefix }-left     { text-align: left; }
+  #{ $prefix }-right    { text-align: right; }
+
+  #{ $prefix }-upper    { 
+    text-transform: uppercase; 
+    letter-spacing: typography.get("letter-spacing-uppercase");
+  }
+  #{ $prefix }-lower    { text-transform: lowercase; }
+  #{ $prefix }-title    { text-transform: capitalize; }
+
+  #{ $prefix }-family { font-family: typography.get("font-family"); }
+  #{ $prefix }-family-sans { font-family: typography.get("font-family-sans"); }
+  #{ $prefix }-family-serif { font-family: typography.get("font-family-serif"); }
+  #{ $prefix }-family-mono { font-family: typography.get("font-family-monospace"); }
+
+  #{ $prefix }-word-break { @include typography.word-break(); }
+  #{ $prefix }-word-break-all { @include typography.word-break(true); }
+
+  #{ $prefix }-max-width { max-width: typography.get("max-width"); }
+  #{ $prefix }-max-width-small { max-width: typography.get("max-width-small"); }
+  #{ selector.class("line-height") }-dense { line-height: typography.get("line-height-dense"); }
+  #{ selector.class("line-height") }-spaced { line-height: typography.get("line-height-spaced"); }
+}

package/scss/helpers/_units.scss

@@ -0,0 +1,79 @@
+////
+/// @group units
+////
+
+@use "sass:map";
+@use "../units";
+@use "../utils";
+@use "../selector";
+
+
+/// Module Settings
+/// @type Map
+/// @prop {Number} $config.sides Sides to print for helper classes (ie. reduce output of uneeded sides)
+
+$config: (
+  "sides": ("top", "bottom", "left", "right")
+) !default;
+
+/// 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 ));
+@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");
+
+@function get($name) {
+  @return utils.require-map-get($config, $name, "units [config]");
+}
+
+/// Prints all unit helper classes
+
+@mixin styles {
+  @include utils.file-header('helpers', 'leading');
+  @include create-property-classes("margin", selector.class("margin"), true);
+  @include create-property-classes("padding", selector.class("padding"));
+}
+
+/// Creates the unit classes with all variations (from unit presets)
+/// - This can be used by itself if not outputing .styles() or if you wanted to change the default prefixes
+@mixin create-property-classes($property, $prefix, $isMargin: false) {
+  // On all sides
+  #{ $prefix } {
+    #{ $property } : units.get(1);
+  }
+  @if ($isMargin) {
+    #{ $prefix }-auto {
+      margin: auto;
+    }
+  }
+  
+  @each $name, $value in units.$config {
+    #{ $prefix }-#{ $name } {
+      #{ $property }: units.get($name);
+    }
+  }
+  // Individual sides
+  @each $side in get("sides") {
+    $full-prop: #{ $property }-#{ $side };
+    #{ $prefix }-#{ $side } {
+      #{ $full-prop }: units.get(1);
+    }
+    @if ($isMargin) {
+      #{ $prefix }-#{ $side }-auto {
+        #{ $full-prop }: auto;
+      }
+    }
+    @each $name, $value in units.$config {
+      #{ $prefix }-#{ $side }-#{ $name } {
+        #{ $full-prop }: units.get($name);
+      }
+    }
+  }
+}

package/scss/helpers/_utilities.scss

@@ -0,0 +1,102 @@
+////
+/// @group utilities
+////
+
+@use "../utils";
+@use "../utility";
+@use "../layout";
+
+/// Print utilities helper styles
+/// @example scss
+///  @include ulu.helper-utilities-styles();
+
+@mixin styles {
+
+  @include utils.file-header('helpers', 'utilities');
+  
+  // Consider removing
+  .no-scroll-y { 
+    overflow-y: hidden; 
+  }
+  .no-scroll-x { 
+    overflow-x: hidden; 
+  }
+  .full-height {
+    height: 100%;
+  }
+  .full-width {
+    width: 100%;
+  }
+  .flex-basis-full {
+    flex-basis: 100%;
+  }
+  .full-min-height {
+    min-height: 100%;
+  }
+  .image-fill {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  .image-full-width img,
+  .image-full-width {
+    width: 100%;
+    height: auto;
+  }
+  .margin-auto,
+  .center {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .margin-left-auto {
+    margin-left: auto;
+  }
+  .margin-right-auto {
+    margin-right: auto;
+  }
+  .no-margin {
+    margin: 0;
+  }
+  .no-margin-top {
+    margin-top: 0;
+  }
+  .no-margin-bottom {
+    margin-bottom: 0;
+  }
+  .no-margin-left {
+    margin-left: 0;
+  }
+  .no-margin-right {
+    margin-right: 0;
+  }
+  .no-padding {
+    padding: 0;
+  }
+  .no-padding-top {
+    padding-top: 0;
+  }
+  .no-padding-bottom {
+    padding-bottom: 0;
+  }
+  .no-padding-left {
+    padding-left: 0;
+  }
+  .no-padding-right {
+    padding-right: 0;
+  }
+  .align-self-start {
+    align-self: start;
+  }
+  .align-self-center {
+    align-self: center;
+  }
+  .align-self-end {
+    align-self: end;
+  }
+  .align-self-baseline {
+    align-self: baseline;
+  }
+  // .justify-self-center {
+  //   justify-self: center;
+  // }
+}

package/scss/stylesheets/README.md

@@ -0,0 +1,3 @@
+# About Stylesheets
+
+Stylesheets are imports than bring in certain sets of stylesheets or libraries.

package/scss/stylesheets/full.scss

@@ -0,0 +1,17 @@
+////
+/// @group packages
+////
+
+/// Stylesheet includes everything user just imports it
+/// - Note: Not configurable as far as output of styles (use minimal)
+
+@forward "../";
+
+@use "../base";
+@use "../components";
+@use "../helpers";
+
+// Output all stylesheets
+@include base.styles();
+@include components.styles();
+@include helpers.styles();

package/trash/js-old/deprecated/doc-ready.js

@@ -0,0 +1,28 @@
+// =============================================================================
+// Doc Ready - Script
+// =============================================================================
+
+// Version:         1.0.0
+
+// Description:     Simple script that will add a property to the window for 
+//                  other scripts to access. Functions will be fired after
+//                  DomContentLoaded. 
+
+
+(function(d) {
+  var callbacks = [],
+      fired = false;
+  
+  window.onDocReady = function(callback) {
+    if (fired) callback();
+    else callbacks.push(callback);
+  };
+  
+  d.addEventListener("DOMContentLoaded", function() {
+    fired = true;
+    for (var i = 0; i < callbacks.length; i++) {
+      callbacks[i]();
+    }
+  });
+  
+}(document));