diff --git a/.vimrc b/.vimrc
index b24824d..53b174d 100644
--- a/.vimrc
+++ b/.vimrc
@@ -387,6 +387,7 @@ nnoremap <Left> xhP
 
 " Maps the semi colon to colon in normal mode
 nnoremap ; :
+nnoremap : ;
 
 " Move lines up/down/left/right using arrow keys
 nnoremap <Down> ddp
@@ -474,7 +475,7 @@ iabbrev @@@ jonathan@lunarweb.co.uk
 "Make web files fold on indent {{{2
 augroup file_web
 	autocmd!
-	autocmd FileType html,xhtml,css,less,javascript,php setlocal foldmethod=indent foldenable
+	autocmd FileType html,xhtml,css,less,javascript,php setlocal foldmethod=indent "foldenable
 augroup END
 
 " js maps {{{2
@@ -528,19 +529,19 @@ augroup END
 " Make vim fold using markers {{{2
 augroup file_i3
 	autocmd!
-	autocmd FileType i3config setlocal foldmethod=marker foldenable
+	autocmd FileType i3config setlocal foldmethod=marker "foldenable
 augroup END
 
 " Make vim fold using markers {{{2
 augroup file_vim
 	autocmd!
-	autocmd FileType vim setlocal foldmethod=marker foldenable
+	autocmd FileType vim setlocal foldmethod=marker "foldenable
 augroup END
 
 " Make json fold using syntax {{{2
 augroup file_json
 	autocmd!
-	autocmd FileType json setlocal foldmethod=syntax foldenable
+	autocmd FileType json setlocal foldmethod=syntax "foldenable
 augroup END
 
 " Make md  files use spellcheck{{{2
diff --git a/UltiSnips/css.snippets b/UltiSnips/css.snippets
new file mode 100644
index 0000000..dd5ea70
--- /dev/null
+++ b/UltiSnips/css.snippets
@@ -0,0 +1,52 @@
+snippet centerm "centers an object by adding auto margin left and right"
+margin-left: auto;
+margin-right: auto;
+endsnippet
+
+snippet d-block "Adds display block" Ab
+display: block;
+$0
+endsnippet
+
+snippet d-iblock "Adds display inline-block" Ab
+display: inline-block;
+$0
+endsnippet
+
+snippet d-inline "Adds display inline" Ab
+display: inline;
+$0
+endsnippet
+
+snippet d-none "Adds display none" Ab
+display: none;
+$0
+endsnippet
+
+snippet d-flex "Adds flex properties" Ab
+display: flex;
+flex-direction: ${1:row};
+flex-wrap: ${2:nowrap};
+justify-content: ${3:flex-start};
+align-items: ${4:stretch};
+$0
+endsnippet
+
+snippet d-iflex "Adds inline flex properties" Ab
+display: inline-flex;
+flex-direction: ${1:row};
+flex-wrap: ${2:nowrap};
+justify-content: ${3:flex-start};
+align-items: ${4:stretch};
+$0
+endsnippet
+
+snippet mleft "Margin Left" Ab
+margin-left: $1;
+$0
+endsnippet
+
+snippet mright "Margin right" Ab
+margin-right: $1;
+$0
+endsnippet
diff --git a/UltiSnips/javascript.snippets b/UltiSnips/javascript.snippets
new file mode 100644
index 0000000..5da476a
--- /dev/null
+++ b/UltiSnips/javascript.snippets
@@ -0,0 +1,39 @@
+priority 1000
+snippet class "Adds a class"
+class ${1:class_name}{
+	/**
+	 * this function is run as soon as possible.
+	 * the dom isn't neccessarily loaded / parsed
+	**/
+	constructor(){
+		//Bind this in the following functions to the class
+		this.domloaded = this.domloaded.bind(this);
+
+		//check to see if the dom has loaded yet
+		if(document.readystate == "loading"){
+			//if the dom hasn't loaded, wait until it is
+			document.addeventlistener("readystatechange",this.domloaded);
+			return;
+		} else {
+			//if it has, run the domloaded function
+			this.domloaded();
+		}
+	}
+	
+	
+	/**
+	 * this function is run as soon as the dom is loaded
+	**/
+	domloaded(){
+		//make sure we don't run this twice
+		document.removeEventListener("readystatechange",this.domloaded);
+	}
+
+}
+new $1();
+$0
+endsnippet
+
+snippet bind "creates a bind statement"
+this.${1:functionName} = this.$1.bind(this);
+endsnippet
diff --git a/UltiSnips/less.snippets b/UltiSnips/less.snippets
new file mode 100644
index 0000000..3a6a413
--- /dev/null
+++ b/UltiSnips/less.snippets
@@ -0,0 +1 @@
+extends css