Last active
May 16, 2018 13:42
-
-
Save ltrademark/9e86453c9204d4836119895150fbc5bc to your computer and use it in GitHub Desktop.
Boilerplate for variables, mixins, & functions for the zoomph cobra platform.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment