Use autoprefixer to create vendor prefixes for css automatically, eliminating need for vendor prefixes in code.

Makefile

@@ -25,6 +25,7 @@ CONFIG_PATH ?= /etc
 
 VENDOR = "$(CURDIR)/vendor"
 GOPATH = "$(VENDOR):$(CURDIR)"
+
 SYSTEM_GOPATH := /usr/share/gocode/src/
 OUTPUT := $(CURDIR)/bin
 OUTPUT_JS := $(CURDIR)/build/out
@@ -48,6 +49,10 @@ NODEJS_BIN_EXISTS := $(shell [ -x "$(NODEJS_BIN)" ] && echo 1 || echo 0)
 ifneq ($(NODEJS_BIN_EXISTS), 1)
     $(error "Can't find node.js runtime, please install / check your PATH")
 endif
+NPM_BIN_PATH := $(shell npm bin)
+
+# Tools
+AUTOPREFIXER := autoprefixer
 
 build: get binary assets
 
@@ -79,6 +84,7 @@ assets: styles javascript
 styles:
 		sass --compass --scss $(SASSFLAGS) \
 			$(CURDIR)/src/styles/main.scss:$(CURDIR)/static/css/main.min.css
+		$(NPM_BIN_PATH)/$(AUTOPREFIXER) $(CURDIR)/static/css/main.min.css
 		sass --compass --scss $(SASSFLAGS) \
 			$(CURDIR)/src/styles/bootstrap.scss:$(CURDIR)/static/css/bootstrap.min.css
 		sass --compass --scss $(SASSFLAGS) \

README.md

@@ -10,10 +10,11 @@ The latest version of Spreed Speak Freely can be found on GitHub:
 
   - [Go](http://golang.org) >= 1.1.0
   - [NodeJS](http://nodejs.org/)
+      + [autoprefixer](https://www.npmjs.org/package/autoprefixer)
+      + [po2json](https://github.com/mikeedwards/po2json)
   - [Sass](http://sass-lang.com/) >= 3.2.0
   - [Compass](http://compass-style.org/)
   - [Babel](http://babel.pocoo.org/)
-  - [po2json](https://github.com/mikeedwards/po2json)
   - make
 
 

src/styles/global/_mixins.scss

@@ -5,47 +5,6 @@
   }
 }
 
-@mixin user-select($select) {
-  -khtml-user-select: $select;
-  -moz-user-select: $select;
-  -ms-user-select: $select;
-  -o-user-select: $select;
-  -webkit-user-select: $select;
-  user-select: $select;
-}
-
-@mixin touch-callout($callout) {
-  -webkit-touch-callout: $callout;
-}
-
-@mixin box-shadow($shadow) {
-  -webkit-box-shadow: $shadow;
-  box-shadow: $shadow;
-}
-
-@mixin transition-property($property) {
-  transition-property: $property;
-  -webkit-transition-property: $property;
-}
-
-@mixin transition-duration($duration) {
-  transition-duration: $duration;
-  -webkit-transition-duration: $duration;
-}
-
-@mixin transition($transition) {
-  transition: $transition;
-  -moz-transition: $transition;
-  -o-transition: $transition;
-  -webkit-transition: $transition;
-}
-
-@mixin border-radius($radius) {
-  border-radius: $radius;
-  -moz-border-radius: $radius;
-  -webkit-border-radius: $radius;
-}
-
 @mixin linear-gradient($gradient...) {
   background: #9dd53a; /* Old browsers */
   background: linear-gradient(to bottom, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* W3C */

src/styles/global/_variables.scss

@@ -45,6 +45,8 @@ $breakpoint-medium: 700px;
 $breakpoint-large: 1280px;
 
 $font-sans-serif: "Helvetica Neue",Helvetica,Arial,sans-serif;
+
+// compass
 $base-font-size: 13px;
 $base-line-height: 19px;
 

src/styles/main.scss

@@ -22,8 +22,6 @@
 // must set custom compass variables before import of compass
 @import "global/variables";
 @import "compass";
-// auto import of user-interface not in css3 partial of compass 12.2
-@import "compass/css3/user-interface";
 @import "libs/libs";
 
 @import "global/mixins";