Cacher is the code snippet organizer for pro developers

// bgcolor adjustment by if clauses
@if lightness($color) > 30% {
  background-color: black;
}
@else {
  background-color: white;
}

// The 60 FPS Smooth as Butter Solution
function toggleClassMenu() {
    myMenu.classList.add("menu--animatable");   
    if(!myMenu.classList.contains("menu--visible")) {       
        myMenu.classList.add("menu--visible");
    } else {
        myMenu.classList.remove('menu--visible');       
    }   
}
function OnTransitionEnd() {
    myMenu.classList.remove("menu--animatable");
}
var myMenu = document.querySelector(".menu");
var oppMenu = document.querySelector(".menu-icon");
myMenu.addEventListener("transitionend", OnTransitionEnd, false);
oppMenu.addEventListener("click", toggleClassMenu, false);
myMenu.addEventListener("click", toggleClassMenu, false);

<div class="menu">
	<div class="app-menu"></div>
</div>
<div class="layout">
	<div class="header">
		<div class="menu-icon"></div>
	</div>
</div>

.menu {position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 150; } .menu--visible {pointer-events: auto; } .app-menu {background-color: #fff; color: #fff; position: relative; max-width: 400px; width: 90%; height: 100%; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); -webkit-transform: translateX(-103%); transform: translateX(-103%); display: flex; flex-direction: column; will-change: transform; z-index: 160; pointer-events: auto; } .menu--visible .app-menu {-webkit-transform: none; transform: none; } .menu--animatable .app-menu {transition: all 130ms ease-in; } .menu--visible.menu--animatable  .app-menu {transition: all 330ms ease-out; } .menu:after {content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); opacity: 0; will-change: opacity; pointer-events: none; transition: opacity 0.3s cubic-bezier(0,0,0.3,1); } .menu--visible.menu:after {opacity: 1; pointer-events: auto; }

// Pure CSS Tooltip
https://codepen.io/cristina-silva/pen/XXOpga

// Cross Browser Autofill Form — Selected Fields A PEN BY Jason Grigsby
https://codepen.io/grigs/pen/YqoyWv

<img sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)" srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w" src="swing-400.jpg" alt="Kettlebell Swing"/>
If the browser window is narrower than 30em, I'll be displaying the image at 100vw wide.
If the browser window is between 30em and 50em, I'll be displaying the image at 50vw wide.
Otherwise (if it's even bigger), I'll be displaying the image at calc(33vw - 100px) wide.

 // sass mixin for repeated content
@mixin repeated-within($classes) {
  @each $class in $classes {
    .#{$class} { @content; }
  }
}

@include repeated-within(icon widget thing) {
  color: red;
  a { color: blue; }
}


// if
@mixin left-or-right($lr) {
  position: absolute;
  top: 0;

  // Declare left or right
  @if $lr == left {
    left: 20px;
  }

  @else if $lr == right {
    right: 20px;
  }
}

.class-name {
  @include left-or-right(left);
}

// for loop to output .txt-h1 - 6
@for $i from 1 through 6 {
  .txt-h#{$i} {
    @extend %txt-h#{$i};
  }
}

// each
$align-list: center, left, right;
@each $align in $align-list {
  .txt-#{$align} {
    text-align: $align;
  }
}

//credits: modernweb.com/2014/03/03/getting-into-sass-control-directives


// correct way of using extend
.btn,
%btn {
    display: inline-block;
    padding: 1em;
}
.btn-positive {
    @extend %btn;
    background-color: green;
    color: white;
}
.btn, .btn-positive {display: inline-block; padding: 1em; }
.btn-positive {background-color: green; color: white; }
// credits: http://csswizardry.com/2014/11/when-to-use-extend-when-to-use-a-mixin/

// BEM example
// credits: https://css-tricks.com/bem-101/
.block {
  @at-root #{&}__element {
  }
  @at-root #{&}--modifier {
  }
}
// gets you:
.block {
}
.block__element {
}
.block--modifier {
}
// check out a must: https://github.com/danielguillan/bem-constructor

/* Create a 3D Animating Sidebar */
.sidebar {perspective: 800px; position: relative;}
.sidebar-rotater {transform: rotateY(-25deg); transition: transform 1s;}
.sidebar-rotater:hover {transform: rotateY(0deg);}

.ir {font: 0/0 a; text-shadow: none; color: transparent;}
&
.hide-text {text-indent: 100%; white-space: nowrap; overflow: hidden;}

/* boxshadow, pos:fixed gibi seylerin darbesini azaltmak icin */
-webkit-transform: translateZ(0);

/* compass free gradient snippets */
background: linear-gradient(to bottom, #8dd2d9 , #58c0c7);
background: radial-gradient(#77d19e,#46c17b);
background: repeating-linear-gradient(-45deg, #de9dd4, #de9dd4 5px, white 5px, white 10px);
background: repeating-radial-gradient(#b8e7bf, #b8e7bf 5px, white 5px, white 10px);

Flexible CSS cover images
<div class="CoverImage FlexEmbed FlexEmbed--3by1" style="background-image:url(http://placeimg.com/1000/1000/nature)"></div>
<div class="CoverImage FlexEmbed FlexEmbed--2by1" style="background-image:url(http://placeimg.com/1000/1000/nature)"></div>
<div class="CoverImage FlexEmbed FlexEmbed--16by9" style="background-image:url(http://placeimg.com/1000/1000/nature)"</div>
.FlexEmbed {display: block; overflow: hidden; position: relative; }
.FlexEmbed:before {content: ""; display: block; width: 100%; }
.FlexEmbed--3by1:before {padding-bottom: 33.33333%; }
.FlexEmbed--2by1:before {padding-bottom: 50%; }
.FlexEmbed--16by9:before {padding-bottom: 56.25%; }
.CoverImage {background-position: 50%; background-repeat: no-repeat; background-size: cover; margin: 0 auto 1em; max-height: 600px; max-width: 600px; }

/* vertical align >=IE9 */
.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

/* grids */
<div class="grid-container">
  <div class="grid-item-a">A</div>
  <div class="grid-item-b">B</div>
  <div class="grid-item-c">C</div>
</div>
.grid-container {display: grid}
ve
.grid-container {grid-template-columns: 50% 50%; grid-template-rows: auto auto}
#|#
---
#|

.grid-item-a {grid-row-start: 1; grid-row-end: 2; grid-column-start: 1; grid-column-end: 3}
 #
---
#|#
equals to (shortcut) .grid-item-a {grid-row: 1/2; grid-column: 1/3}
and equals to shorter (shortcut) .grid-item-a {grid-area: 1/1/2/3}

.grid-item-a {grid-row: 1/-1}
 |#
#|-
 |#

.grid-container {grid-template-columns: 5em 1fr; grid-template-rows: auto auto}
#|   #
----------
#|


.grid-container {
	grid-template-columns: 5em 1fr 1fr; grid-template-rows: auto auto
}
#|  #  |  #  |

.grid-container {
	grid-template-columns: 5em 2fr 1fr; grid-template-rows: auto auto
}
#|    #    |  #  |

.grid-container {
	5em repeat(22, 1fr) 5em; grid-template-rows: auto auto
}
   #    |#|#|#|#|#|#|#|#|#|...|#|    #