azinasili

/**
 * Convert string to pascalCase.
 * Function will remove `,`, `_`, `-`, and `' '` from string.
 *
 * Note: Function does not strip numeric characters.
 *       A string like `hello 1world` would return `Hello1world`
 *
 * @example
 *   pascalCase('hello world') // returns 'HelloWorld'
 *

azinasili

/**
 * Convert string to camelCase.
 * Function will remove `,`, `_`, `-`, and `' '` from string.
 *
 * Note: Function does not strip numeric characters.
 *       A string like `hello 1world` would return `hello1world`
 *
 * @example
 *   camelCase('hello world') // returns 'helloWorld'
 *

azinasili

// Element in to expand/collapse needs to have `overflow: hidden` applied to it

/**
 * Collapse element height
 * @param {HTMLElement} element - Element to collapse
 * @param {Number} [height=0] - Size of element height in pixels
 */
function collapseSection(element, height = 0) {
  const sectionHeight = element.scrollHeight;
  const elementTransition = element.style.transition;

azinasili

body {
  filter: invert(1) hue-rotate(180deg);
}

azinasili

// Create the simplest grid possible using CSS Grid syntax
// Customize your grid with custom number of items, classnames, and gaps
//
// Example HTML
//    <div class="row row-3">
//      <div class="col-1"></div>
//      <div class="col-1"></div>
//      <div class="col-1"></div>
//    </div>
$SassGrid: (  

azinasili

// Fluid typography between a min & max font-size and molten leading
// calc(minSize + (maxSize - minSize) * ((100vw - minPort) / (maxPort - minPort)));
// Works best with `em` or `rem` units
$typography: (
  'font-min': 1em,
  'font-max': 1.5em,
  'lead-min': 1.3em,
  'lead-max': 1.7em,  
  'width-min': 20em,
  'width-max': 80em,  

azinasili

function findAncestor(el, cls) {
  if (el === document) {      
    return false; 
  }
  if (el.classList.contains(cls)) {
    return true;
  }
  
  return el.parentNode && findAncestor(el.parentNode, cls);
} 

azinasili

/// Mixin to create material design ripple effect
/// @param {list} $bg-color - List of two colors for background and ripple
/// @param {string} $hover [null] - Turn effect on or off
/// @content Add more styles for when element is :active
/// @output Background color, size, and radial gradient for effect
/// @example scss
///  .foo {
///    @include ripple(#bada55 darken(#bada55, 10%)) {
///      border-color: darken(#b8d951, 10%);
///    };  

azinasili

/// File path short cut for media
/// @param {string} $img-name - Name of media to append to path
/// @return {url} url to display media
/// @warn Warning when $img-name has no extention
/// @example scss
///   .foo {
///      background: image-url('kitten.jpg') no-repeat 0 0;
///   }
/// @example css
///   .foo {

azinasili

// Functions and mixin to convert `px` values into `em` units
// 
// px-to-em can easily be changed to `rem` values
// Change any instance of `em` to `rem`
//
// EXAMPLE:
// .foo {
//   @include em(margin, 10px auto);
//   padding: em(1px 2 3px 4); 
// }