My skeleton Stylus file

_loader.styl

/*!
 * CSS Ajax-loader
 * ===============
 *
 * Written by Yu Inao, distributed under Public Domain.
 *
 * Usage
 * -----
 *
 *     #element {
 *         loader: black gray
 *     }
 *
 */


@import 'nib'


black = rgb(0,0,0)
gray = rgba(0,0,0,0.6)
fieldSize = 100
ballSize = 10


@keyframes bounce
  0%
    top: 100%
  100%
    top: 20%

@keyframes stepon
  0%
    margin-top: -((ballSize / 2) / 2)px
    height: ((ballSize / 3) / 2)px
    transform: scale(1)
  100%
    margin-top: -(ballSize / 2)px
    height: (ballSize / 3)px
    transform: scale(0.1)


loader(ballColor=black, shadowColor=gray)
  //border-color: rgb(0,0,0)
  //border-style: dashed
  //border-width: 1px
  height: (fieldSize)px
  position: absolute
  width: (fieldSize)px

  &::before
    animation: stepon 0.5s infinite alternate
    background-color: shadowColor
    box-shadow: 0 0 5px 0
    border-radius: 100%
    content: ''
    height: (ballSize / 3)px
    left: 50%
    margin-left: -((ballSize * 1.3) / 2)px
    margin-top: -(ballSize / 3)px
    position: absolute
    top: 100%
    width: (ballSize * 1.3)px

  &::after
    animation: bounce 0.5s infinite alternate
    background-color: ballColor
    border-radius: 100%
    content: ''
    height: (ballSize)px
    left: 50%
    margin-left: -(ballSize / 2)px
    margin-top: -(ballSize) - (ballSize / 4)px
    position: absolute
    top: 0
    width: (ballSize)px

_mixins.styl

//
// Common mixins

// My custom properties

text-stroke(number color)
  text-shadow: (number * -1) (number * -1) 0 color, number (number * -1) 0 color, (number * -1) number 0 color, number number 0 color


// Filter Effects 1.0 (Editor's Draft)
// http://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html

filter()
  -webkit-filter: arguments
  filter: arguments

filter-margin()
  -webkit-filter-margin: arguments
  filter-margin: arguments

filter-margin-top()
  -webkit-filter-margin-top: arguments
  filter-margin-top: arguments

filter-margin-right()
  -webkit-filter-margin-right: arguments
  filter-margin-right: arguments

filter-margin-bottom()
  -webkit-filter-margin-bottom: arguments
  filter-margin-bottom: arguments

filter-margin-left()
  -webkit-filter-margin-left: arguments
  filter-margin-left: arguments

color-interpolation-filters()
  -webkit-color-interpolation-filters: arguments
  color-interpolation-filters: arguments


// CSS 3 Flexbox
// http://www.w3.org/TR/css3-flexbox/

flex()
  -webkit-flex: arguments
  -moz-flex: arguments
  -ms-flex: arguments
  -o-flex: arguments
  flex: arguments

flex-grow()
  -webkit-flex-grow: arguments
  -moz-flex-grow: arguments
  -ms-flex-grow: arguments
  -o-flex-grow: arguments
  flex-grow: arguments

flex-shrink()
  -webkit-flex-shrink: arguments
  -moz-flex-shrink: arguments
  -ms-flex-shrink: arguments
  -o-flex-shrink: arguments
  flex-shrink: arguments

flex-basis()
  -webkit-flex-basis: arguments
  -moz-flex-basis: arguments
  -ms-flex-basis: arguments
  -o-flex-basis: arguments
  flex-basis: arguments

justify-content()
  -webkit-justify-content: arguments
  -moz-justify-content: arguments
  -ms-justify-content: arguments
  -o-justify-content: arguments
  justify-content: arguments

align-items()
  -webkit-align-items: arguments
  -moz-align-items: arguments
  -ms-align-items: arguments
  -o-align-items: arguments
  align-items: arguments

align-self()
  -webkit-align-self: arguments
  -moz-align-self: arguments
  -ms-align-self: arguments
  -o-align-self: arguments
  align-self: arguments

align-content()
  -webkit-align-content: arguments
  -moz-align-content: arguments
  -ms-align-content: arguments
  -o-align-content: arguments
  align-content: arguments


// CSS 3 properties using vendor prefixes

animation()
  -webkit-animation: arguments
  -moz-animation: arguments
  -ms-animation: arguments
  -o-animation: arguments
  animation: arguments

animation-delay()
  -webkit-animation-delay: arguments
  -moz-animation-delay: arguments
  -ms-animation-delay: arguments
  -o-animation-delay: arguments
  animation-delay: arguments

animation-direction()
  -webkit-animation-direction: arguments
  -moz-animation-direction: arguments
  -ms-animation-direction: arguments
  -o-animation-direction: arguments
  animation-direction: arguments

animation-duration()
  -webkit-animation-duration: arguments
  -moz-animation-duration: arguments
  -ms-animation-duration: arguments
  -o-animation-duration: arguments
  animation-duration: arguments

animation-fill-mode()
  -webkit-animation-fill-mode: arguments
  -moz-animation-fill-mode: arguments
  -ms-animation-fill-mode: arguments
  -o-animation-fill-mode: arguments
  animation-fill-mode: arguments

animation-iteration-count()
  -webkit-animation-iteration-count: arguments
  -moz-animation-iteration-count: arguments
  -ms-animation-iteration-count: arguments
  -o-animation-iteration-count: arguments
  animation-iteration-count: arguments

animation-name()
  -webkit-animation-name: arguments
  -moz-animation-name: arguments
  -ms-animation-name: arguments
  -o-animation-name: arguments
  animation-name: arguments

animation-play-state()
  -webkit-animation-play-state: arguments
  -moz-animation-play-state: arguments
  -ms-animation-play-state: arguments
  -o-animation-play-state: arguments
  animation-play-state: arguments

animation-timing-function()
  -webkit-animation-timing-function: arguments
  -moz-animation-timing-function: arguments
  -ms-animation-timing-function: arguments
  -o-animation-timing-function: arguments
  animation-timing-function: arguments

border-radius()
  -webkit-border-radius: arguments
  -moz-border-radius: arguments
  -ms-border-radius: arguments
  -o-border-radius: arguments
  border-radius: arguments

border-top-left-radius()
  -webkit-top-left-border-radius: arguments
  -moz-border-top-left-radius: arguments
  -ms-border-top-left-radius: arguments
  -o-border-top-left-radius: arguments
  border-top-left-radius: arguments

border-top-right-radius()
  -webkit-border-top-right-radius: arguments
  -moz-border-top-right-radius: arguments
  -ms-border-top-right-radius: arguments
  -o-border-top-right-radius: arguments
  border-top-right-radius: arguments

border-bottom-right-radius()
  -webkit-border-bottom-right-radius: arguments
  -moz-border-bottom-right-radius: arguments
  -ms-border-bottom-right-radius: arguments
  -o-border-bottom-right-radius: arguments
  border-bottom-right-radius: arguments

border-bottom-left-radius()
  -webkit-border-bottom-left-radius: arguments
  -moz-border-bottom-left-radius: arguments
  -ms-border-bottom-left-radius: arguments
  -o-border-bottom-left-radius: arguments
  border-bottom-left-radius: arguments

box-shadow()
  -webkit-box-shadow: arguments
  -moz-box-shadow: arguments
  -ms-box-shadow: arguments
  -o-box-shadow: arguments
  box-shadow: arguments

perspective()
  -webkit-perspective: arguments
  -moz-perspective: arguments
  -ms-perspective: arguments
  -o-perspective: arguments
  perspective: arguments

perspective-origin()
  -webkit-perspective-origin: arguments
  -moz-perspective-origin: arguments
  -ms-perspective-origin: arguments
  -o-perspective-origin: arguments
  perspective-origin: arguments

transform()
  -webkit-transform: arguments
  -moz-transform: arguments
  -ms-transform: arguments
  -o-transform: arguments
  transform: arguments

transform-origin()
  -webkit-transform-origin: arguments
  -moz-transform-origin: arguments
  -ms-transform-origin: arguments
  -o-transform-origin: arguments
  transform-origin: arguments

transform-style()
  -webkit-transform-style: arguments
  -moz-transform-style: arguments
  -ms-transform-style: arguments
  -o-transform-style: arguments
  transform-style: arguments

transition()
  -webkit-transition: arguments
  -moz-transition: arguments
  -ms-transition: arguments
  -o-transition: arguments
  transition: arguments

transition-delay()
  -webkit-transition-delay: arguments
  -moz-transition-delay: arguments
  -ms-transition-delay: arguments
  -o-transition-delay: arguments
  transition-delay: arguments

transition-duration()
  -webkit-transition-duration: arguments
  -moz-transition-duration: arguments
  -ms-transition-duration: arguments
  -o-transition-duration: arguments
  transition-duration: arguments

transition-property()
  -webkit-transition-property: arguments
  -moz-transition-property: arguments
  -ms-transition-property: arguments
  -o-transition-property: arguments
  transition-property: arguments

transition-timing-function()
  -webkit-transition-timing-function: arguments
  -moz-transition-timing-function: arguments
  -ms-transition-timing-function: arguments
  -o-transition-timing-function: arguments
  transition-timing-function: arguments

_practices.styl

//
// Common practices

// Clearfix
// Add `clearfix` class to the parent element of the `float`-ed elements

.clearfix:before,
.clearfix:after
  content: " "
  display: table

.clearfix:after
  clear: both

_zurui.styl

//
// zurui-stylus
// based on zurui-design
// https://speakerdeck.com/ken_c_lo/zurui-design


@import 'nib'


//
// Zurui Design 1 ズルい線

line-top($op1=.2, $op2=.3)
  border-top: 1px solid rgba(0,0,0,$op1)
  box-shadow: rgba(255,255,255,$op2) 0 1px 0 inset

line-left($op1=.2, $op2=.3)
  border-left: 1px solid rgba(0,0,0,$op1)
  box-shadow: rgba(255,255,255,$op2) -1px 0 0

line-right($op1=.2, $op2=.3)
  border-left: 1px solid rgba(0,0,0,$op1)
  box-shadow: rgba(255,255,255,$op2) -1px 0 0 inset

line-bottom($op1=.2, $op2=.3)
  border-bottom: 1px solid rgba(0,0,0,$op1)
  box-shadow: rgba(255,255,255,$op2) 0 1px 0


//
// Zurui Design 2 ズルい text-shadow

ts-000($op=.4)
  text-shadow: 1px -1px rgba(0,0,0,$op)

ts-fff($op=.7)
  text-shadow: -1px 1px rgba(0,0,0,$op)


//
// Zurui Design 3 ズルい背景

$whiteA = #eee
$whiteB = #f8f8f8


//
// Zurui Design 4 ズルいグラデーション

gradient-top-lighten($color=#666, $lighten=10%)
  background-color: $color
  filter-gradient(lighten($color, $lighten), $color, vertical)  // TODO: Stylus の mixin に直す
  background-image(lighten($color, $lighten) 0%, $color 100%)  // TODO: Stylus の mixin に直す

gradient-top-darken($color=#666, $darken=10%)
  background-color: $color
  filter-gradient(darken($color, $darken), $color, vertical)  // TODO: Stylus の mixin に直す
  background-image(darken($color, $darken) 0%, $color 100%)  // TODO: Stylus の mixin に直す


//
// Zurui Design 5 ズルい角丸


//
// Zurui Design 6 ズルい box-shadow

outerline-box-shadow()
  box-shadow: rgba(0,0,0,.15) 0 0 2px

innerline-box-shadow()
  box-shadow: rgba(0,0,0,0.2) 0 0 0 20px inset

box-deboss($border=.1, $shadow=.1, $highlight=1)
  border: 1px solid rgba(0,0,0,$border)
  box-shadow: rgba(0,0,0,$shadow) -1px 1px 2px inset, rgba(255,255,255,$highlight) -1px 1px 0

box-emboss($border=.15, $shadow=.05, $highlight=1)
  border: 1px solid rgba(0,0,0,$border)
  box-shadow: rgba(0,0,0,$shadow) -1px 1px 0, rgba(255,255,255,$highlight) -1px 1px 0 inset


//
// Zurui Design 7 ズルいボタン