erikjung

/** @define utilities */

/**
 * Inherit box-related properties.
 */

.u-inheritBox {
  box-sizing: inherit;
  border: inherit;
  background: inherit;

erikjung

function numeronymize (input) {
  let chars = input.split('')
  let first = chars.shift()
  let last = chars.pop()
  return (first + chars.length + last).toLowerCase()
}

erikjung

// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console

erikjung

* {
	margin: 0;
}

html {
	font-size: 13px;
	font-family: sans-serif;
}

body {

erikjung

/**
 * Mucking around with SVG and CSS
 */


.bubble {

}

#gradient stop:nth-child(1) {

erikjung

/**
 * Animation End Event
 */

@keyframes remove {
  from {
    scale(1, 1);
  }
  to {
    scale(0, 0);

erikjung

/* Animations plus animations/transitions */
/* ref: http://mattwilcox.net/sandbox/css3-animations-1/index.htm */
/* also ref: http://css-tricks.com/restart-css-animation/ */
.animate-on-load {animation: bgcolor 3s;}
.animate-on-hover:hover {animation: bgcolor 3s;}
.animate-on-hover2:hover {animation: bgcolor2 3s;} /* change anim name */
.animate-on-hover3:hover {animation: bgcolor 2.9s;} /* change duration */
.animate-on-hover4:hover {animation: bgcolor 3s 2;} /* change iteration-count */
.transition-on-hover {transition: background-color 2s;}
.transition-on-hover:hover {background-color: #777;}

erikjung

@font-size-alpha: 45;
@font-size-beta: 28;
@font-size-gamma: 22;
@font-size-delta: 17;
@font-size-epsilon: 13;

@baseline: 28;
@type-unit: rem;

.font-size (@size) when (@type-unit = rem) {

erikjung

.module {
  margin-bottom: 18px;
  margin-top: 18px;
}
.module {
  margin-bottom: -12px;
  margin-top: -12px;
}
.module {
  margin-bottom: 24px;

erikjung

position
top
right
bottom
left
z-index
display
float
width
height