Skip to content

Instantly share code, notes, and snippets.

View kabilashgit's full-sized avatar

kabilash kabilashgit

0 followers · 2 following
  • Autumn Worldwide
  • Bangalore
View GitHub Profile
@kabilashgit
kabilashgit / MutationObserver.md
Created March 20, 2019 12:26
Listen DOM changed using MutationObserver

/* Author : Manikandan K */

Listen DOM changed using MutationObserver

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

var observer = new MutationObserver(function(mutations, observer) {
 // fired when a mutation occurs
@kabilashgit
kabilashgit / add gradient text.md
Created March 20, 2019 12:15
Mixin to add gradient text

mixin for gradient text

mixin

@mixin gradient-text() {
  background: linear-gradient(70deg, #ef0866, #ff1e0c, #ef0866); //use any color
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@kabilashgit
kabilashgit / Add crossbrowser vendor prefix.md
Created March 20, 2019 12:15
Mixin to add crossbrowser vendor prefix to style property

add crossbrowser property (not for all styles)

mixin

@mixin crossBrowser($property, $val) {
  #{$property}: #{$val};
  -webkit-#{$property}: #{$val};
  -moz-#{$property}: #{$val};
  -ms-#{$property}: #{$val};
  -o-#{$property}: #{$val};
}
@kabilashgit
kabilashgit / media-query-mixin.md
Created March 20, 2019 11:57
media query mixin

/* Author : Manikandan K */

media query mixin

Bootstrap 4 breakpoints and my custom breakpoints

$grid-breakpoints: (
xs: 0,
sm: 575px,
@kabilashgit
kabilashgit / keyframe-mixin.md
Last active March 20, 2019 11:33
Mixin to create css animation keyframes

/* Author : Manikandan K */

mixin to create css animation keyframes

@mixin keyframes($animation-name) {
  @-webkit-keyframes #{$animation-name} {
    @content;
 }