Cacher is the code snippet organizer for pro developers

::-webkit-scrollbar {
    width: 12px
}
::-webkit-scrollbar-track {
    background-color: #fff;
    border-left: 1px solid #fff
}
::-webkit-scrollbar-thumb {
    background-color: #ccc
}
::-webkit-scrollbar-thumb:hover {
    background-color: #aaa
}
* {
    -moz-box-sizing: border-box;
    box-sizing: border-box
}
html,
body {
    width: 100%;
    height: 100%;
    position: relative;
}
body {
    margin: 0;
    padding: 0;
    background: #DB5B35;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    font-size: 13px;
}
.wrapper {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background: #F5F5F5;
    padding: 0;
    box-shadow: 0 0.2em 0.5em #842E0F;
    position: relative;
}
.header {
    display: block;
    width: 100%;
    height: 3em;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #FFF;
    border-bottom: 0.1em solid #DADADA;
    position: absolute;
    top: 0;
    left: 0;
}
.header-left {
    display: inline-block;
    float: left;
    height: 2.7em;
}
.header-left a {
    display: inline-block;
    float: left;
    line-height: 2.5em;
    margin-left: 0.2em;
    text-decoration: none;
    color: #5A5858;
    padding: 0.5em 0.2em;
    font-size: 0.8em;
}
.header-left a:hover {
    color: #FF3000;
}
.main {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 3em;
    width: 100%;
    height: calc(100% - 4.5em);
    overflow: auto;
}
.footer {
    background: #FFF;
    border-top: 0.1em solid #E8E8E8;
    height: 1.5em;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0;
}
#input {
    display: block;
    width: 48% !important;
    float: left;
    border: 0;
    height: 100%;
    background-color: #eee;
    color: #000;
    resize: none;
    outline: none;
}
#output {
    background-color: #000;
    display: block;
    width: 52% !important;
    float: left;
    border: 0;
    height: 100%;
    background-color: #fff;
    color: #333;
    resize: none;
    outline: none;
}

document.addEventListener('load',cssEdit);
var cssEdit = (function(){
  'use strict';
  
  String.prototype.capitalize = function(lower) {
        return (lower ? this.toLowerCase() : this).replace(/(?:^|\s)\S/g, function(a) {
            return a.toUpperCase();
        });
    };


    var btn = document.querySelector('#controls').getElementsByTagName('a');
    var input = document.querySelector('#input');
    var output = document.querySelector('#output');
    var editor = new Editor(input);
    var controls = {
        //editor.insert('\n#id{\n}');
        //editor.wrap('','');
        'class': function() {
            editor.wrap('.class{\n\t', '\n}\n');
        },
        'id': function() {
            editor.wrap('#id{\n\t', '\n}\n');
        },
        'float': function() {
            editor.insert('float:');
        },
        'width': function() {
            editor.insert('width:');
        },
        'height': function() {
            editor.insert('height:');
        },
        'position': function() {
            editor.insert('position:');
        },
        'display': function() {
            editor.insert('display:');
        },
        'background': function() {
            editor.insert('background:');
        },
        'color': function() {
            editor.insert('color:');
        },
        'transform': function() {
            editor.insert('transform:');
        },
        'translate': function() {
            editor.wrap('translate(', ')');
        },
        'scale': function() {
            editor.wrap('scale(', ');');
        },
        'rotate': function() {
            editor.wrap('rotate(', ')');
        },
        'transition': function() {
            editor.insert('transition:');
        },
        'animation': function() {
            editor.insert('animation:');
        },
        'keyframes': function() {
            editor.wrap('@keyframes foo{\n\tfrom{\n\t\t', '\n\t}\n\tto{\n\t\t\n\t}\n}\n');
        },
        'full': function() {
            editor.insert('100%');
        },
    };


    for (var i = 0, len = btn.length; i < len; ++i) {
        click(btn[i]);
        btn[i].href = '#';
    }


    var pressed = 0;
    editor.area.onkeydown = function(e) {
        if (pressed < 5) {
            pressed++;
        } else {
            editor.updateHistory();
            pressed = 0;
        }
        if (e.keyCode == 9) {
            editor.indent('    ');
            return false;
        }
        if (e.keyCode == 13) {
            editor.indent('\n\t');
            return false;
        }
    };
    
    if(!input.value){ autoprefix(input);}
    input.addEventListener('keyup', function() {
        autoprefix(this);
    });

    input.focus();

    // localStorage
    if (localStorage !== null) {
      input.value = localStorage.getItem('css_saved');
      var t = setInterval(function() {
        localStorage.setItem('css_saved', input.value);
        console.info('save text');
      }, 10000);
    } 

    function autoprefix(el){
      var source = el.value;
      var compiled = autoprefixer().process(source);
      output.value = compiled.css;
    }
    function click(elem) {
        var hash = elem.hash.replace('#', "");
        if (controls[hash]) {
            elem.onclick = function() {
                controls[hash]();
                return false;
            };
        }
    }
})();

<!-- wrapper -->
<div class="wrapper">
    <div class="header">
        <div class="header-left">
            <div id="controls">
                <a href="#class">Class</a>
                <a href="#id">Id</a>
                <a href="#position">Position</a>
                <a href="#width">Width</a>
                <a href="#height">Height</a>
                <a href="#float">Float</a>
                <a href="#display">Display</a>
                <a href="#background">Background</a>
                <a href="#color">Color</a>
                <a href="#transform">Transform</a>
                <a href="#translate">Translate</a>
                <a href="#scale">Scale</a>
                <a href="#rotate">Rotate</a>
                <a href="#transition">Transition</a>
                <a href="#animation">Animation</a>
                <a href="#keyframes">Keyframes</a>
                <a href="#full">100%</a>
            </div>
        </div>
    </div>
    <div class="main">
        <textarea id="input">
.class{
	transform:translate(50%,50%);
	transition:all 1s ease;
	animation: foo 1s infinite ease;
}
	
@keyframes foo{
	from{
		transform:scale(1.1,1.1);
	}
	to{
		transform:scale(1,1);
	}
}

        </textarea>
        <textarea id="output"></textarea>
    </div>
    <div class="footer">

    </div>
</div>