Boilerplate for variables, mixins, & functions for the zoomph cobra platform.

zoomph-defaults.scss

// Zoomph Document Setup

// UI components
$quare-size: 8;
$padding: ($quare-size * 2)+0px;

/// Durations, Interpolations, Size, Colors, Functions, & Mixins are are default values and never change. likely to be used in an @import
// Durations
$near: 225ms;
$far: 375ms;
$distant: 750ms;
// Interpolations
$bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
$curve: cubic-bezier(0.4, 0.0, 0.2, 1);
$ease-in: cubic-bezier(0.4, 0.0, 1, 1);
$ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
$snap: cubic-bezier(0.785, 0.135, 0.15, 0.86);
// Sizes
$small: 320 !default;
$medium: 550 !default;
$large: 786 !default;
$breakpoints: ( 
    'mobile-tiny': $small+px, 
    'mobile-small': $medium+px, 
    'mobile': $large+px 
);
// Colors
$zoomph: (
'blue': #2196f3,
'teal': #1dd1a0,
'frost': #ebf1f2,
'gradient': linear-gradient(315deg, #a300ff -10%, #2196f3 50%, #1DD1A0 110%)
);
$white: #fefefe;
$black: #010101;

// Typography
$font-stack: (
  sans-serif
);

// Images
/// Images go here:
/// @example: url('');

// Functions
@function unitstrip($num) {
  /// if $num is '50px', unitstrip makes it '50'
  /// useful when a variable has a unit, but the value is 
  /// needed for basic arithmetic
    @if type-of($num)=='number' and not unitless($num) {
        @return $num / ($num * 0+1);
    }
    @return $num;
}
@function font($to, $from, $toWidth, $fromWidth) {
  /// responsive font variable to be placed in root element
  /// either :host or :root
  /// The best way to understand this function, is to say
  /// from the smallest width ($fromWidth) to the larget width
  /// ($toWidth), the font scales between $from (what you want the smallest front to be) 
  /// and $to (largest font it should be)
  /// example:
  // font-size: font(43px, 14px, 1920px, 786px);
    $slope: ($to - $from) / ($toWidth - $fromWidth);
    $base: $from - $slope * $fromWidth;
    @return calc(#{$base} + #{100vw * $slope});
}
@function better-blur($radius) {
  /// used in `filter` property
  /// usage:
  // filter: better-blur(10)
    @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a' x='0' y='0' width='1' height='1'%3E%3CfeGaussianBlur stdDeviation='#{$radius}' result='b'/%3E%3CfeMorphology operator='dilate' radius='#{$radius}'/%3E %3CfeMerge%3E%3CfeMergeNode/%3E%3CfeMergeNode in='b'/%3E%3C/feMerge%3E%3C/filter%3E%3C/svg%3E#a");
}
@function unitstrip($num) {
  /// This strips your number of its unit
  // ex. if $num is '50px', it then returns '50'
  @if type-of($num) == 'number' and not unitless($num) {
    @return $num / ($num * 0+1);
  }
  @return $num;
}
@mixin respond-to($breakpoint) {
/// This mixin replaces @media with something a bit more semantic.
/// It's also highly dependant on the $breakpoints variable decalred above
/// usage:
// `@include respond-to('mobile) {}`
  @if map-has-key($breakpoints, $breakpoint) {
    $value: map-get($breakpoints, $breakpoint);
    @media screen and (max-width: $value) {
      @content;
    }
  }
  @warn 'Unknown `#{$breakpoint}` in $breakpoints';
}
@mixin line-clamp($lines) {
/// This constrains your text to the desired amount of lines
/// usage: 
// `@include line-clamp(4)`
    @if $lines < 2 {
        display: inline-block;
        height: $lines + 0em;
        text-overflow: ellipses;
        white-space: nowrap;
    } @else {
        display: -webkit-box;
        height: $lines + 0em;
        -webkit-line-clamp: $lines;
        -webkit-box-orient: vertical;
    }
    overflow: hidden;
}
@mixin webkit-scrollbar($c: $white, $d: 'h', $s: 4) {
/// This overrides and styles the webkit scroll bar in chrome browsers
/// By default, the style is set to a thin white scrollbar.
/// usage:
// `@include webkit-scrollbar()`
  &::-webkit-scrollbar {
    @if $d == 'h' {
      width: $s + px;
    }
    @if $d == 'v' {
      height: $s + px;
    }
    &-thumb {
      background-color: rgba($c, 0.54);
      border-radius: ($s / 2)+0px;
    }
    &-track {
      background-color: rgba($c, 0.1);
      border-radius: ($s / 2)+0px;
    }
  }
}
// !! New!!: CSS Grid
@mixin grid($col: 4, $row: $col, $gWidth: 300px, $gHeight: $gWidth, $gap: 10px) {
/// This mixin allows you to construc a very basic grid, and is currently
/// optimized strongly towards a "boxy" layout. This is a work in progress
/// however, its still pretty flexible and can be used to get more used to 
/// using CSS Grid.
/// usage:
// `@include grid(10, 15, 120px, 200px)`
/// this mixin also allows for additional content to be added, simply include 
/// curly braces at the end of your @include like so:
// `@include grid(10, 15, 120px, 200px) { -your css here- }`
  $space: unquote(' ');
  $templateCols: unquote('');
  $templateRows: unquote('');
  @for $i from 1 through $col {
    $templateCols: $templateCols + $space $gWidth;
  }
  @for $i from 1 through $row {
    $templateRows: $templateRows + $space $gHeight;
  }
  display: grid;
  grid-template-columns: $templateCols;
  grid-template-rows: $templateRows;
  grid-gap: $gap;
  @content;
}
@mixin grid-pos($colStart, $rowStart, $colEnd, $rowEnd, $target: '') {
/// Here you can dictate how a child of a grid element should behave.
/// You can think of this as assigning a size to a grid element by
/// dictating where it should begin, and where it should end (span to).
/// usage:
// `@include grid-pos(1, 1, 4, 3)`
/// If you want to assign these properties to a nested element, or want 
/// to specifically dicatate these properties outside of an element, 
/// just specify $target. Heres an example: (nested)
// `@include grid-pos(1, 1, 4, 3, "&:nth-child(4)")`
/// or (standalone)
// `@include grid-pos(1, 1, 4, 3, ".example")`
  @if $target != '' {
    #{$target} {
      grid-column-start: $colStart;
      grid-row-start: $rowStart;
      grid-column-end: $colEnd;
      grid-row-end: $rowEnd;
    }
  } @else {
    grid-column-start: $colStart;
    grid-row-start: $rowStart;
    grid-column-end: $colEnd;
    grid-row-end: $rowEnd;
  }
}