Web Development – Sublime Custom Snippets

Web Development – Sublime Custom Snippets


Download my Snippets
Download: Sublime Editor
Download: Package Manager

HTML – Anchor

Trigger: a

<a href="$1">$2</a>$3

HTML – Ajax

Trigger: aj

$.ajax({
	url: "ajax/file.php",
	method: "POST",
	data:{variable: variable, variable: variable},
	success: function(data){
		$1
	}
});

HTML – Background Color

Trigger: bc

background-color:$1

HTML – Bootstrap

Trigger: bs

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

HTML – Bootstrap Button

Trigger: bsbu

<button type="button" class="btn btn-primary" onclick="">$1</button><!--btn-secondary btn-success btn-info btn-warning btn-danger-->

HTML – Bootstrap checkbox

Trigger: bscb

<div class="custom-checkbox checkbox-inline">
	<input type="checkbox" id="checkbox1" name="Get_extra_Updates" required="">
	<label for="checkbox1" >$1</label>
</div>
<style>
	.custom-checkbox > [type="checkbox"],
	.custom-checkbox > label{
		margin-bottom:0px !important;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	
	.custom-checkbox > [type="checkbox"]:not(:checked),
	.custom-checkbox > [type="checkbox"]:checked {
		position: absolute;
		left: -9999px;
	}
	.custom-checkbox > [type="checkbox"]:not(:checked) + label,
	.custom-checkbox > [type="checkbox"]:checked + label {
		position: relative;
		padding-left: 22px;
		cursor: pointer;
	}
	.custom-checkbox > [type="checkbox"]:not(:checked) + label:before,
	.custom-checkbox > [type="checkbox"]:checked + label:before {
		content: '';
		position: absolute;
		left:0; 
		top: 50%;
		margin-top:-9px;
		width: 17px; 
		height: 17px;
		border: 1px solid #ddd;
		background: #ffffff;
		border-radius: 2px;
	}
	.custom-checkbox > [type="checkbox"]:not(:checked) + label:after,
	.custom-checkbox > [type="checkbox"]:checked + label:after {
		font: normal normal normal 12px/1 'Glyphicons Halflings';
		content: '\e013';
		position: absolute;
		top: 50%;
		margin-top:-7px;
		left: 2px;
		color: #94C947;
		xtransition: all .2s;
	}
	.custom-checkbox > [type="checkbox"]:not(:checked) + label:after {
		opacity: 0;
		transform: scale(0);
	}
	.custom-checkbox > [type="checkbox"]:checked + label:after {
		opacity: 1;
		transform: scale(1);
	}

	.custom-checkbox > [type="checkbox"][data-indeterminate] + label:after,
	.custom-checkbox > [type="checkbox"][data-indeterminate] + label:after {
		content: '\2212';
		left: 2px;
		opacity: 1;
		transform: scale(1);
	}
	.custom-checkbox > [type="checkbox"]:disabled:not(:checked) + label:before,
	.custom-checkbox > [type="checkbox"]:disabled:checked + label:before {
		box-shadow: none;
		background-color: #eeeeee;
		border-color: #eeeeee;
		cursor: not-allowed;
		opacity: 1;
		color: #dadada;
	}
	.custom-checkbox > [type="checkbox"]:disabled:checked + label:after {
	  color: #dadada; cursor: not-allowed;
	}
	.custom-checkbox > [type="checkbox"]:disabled + label {
	  color: #aaa; cursor: not-allowed;
	}
	.custom-checkbox > [type="checkbox"]:checked:focus + label:before,
	.custom-checkbox > [type="checkbox"]:not(:checked):focus + label:before {
		border: 1px solid #66afe9;
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
	}
	.custom-checkbox > label:hover:before {
		border: 1px solid #88D2FF !important;
	}
	.custom-checkbox > [type="checkbox"]:disabled:not(:checked) + label:hover:before,
	.custom-checkbox > [type="checkbox"]:disabled:checked + label:hover:before{
		border: 1px solid #E4E4E4 !important;
	}

</style>

HTML – Bootstrap divs

Trigger: bsdi

<div class="container">
	<div class="row">
		<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
			1 of 2
		</div>
		<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
			1 of 2
		</div>
		<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
			1 of 3
		</div>
		<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
			1 of 3
		</div>
	</div>
</div>

HTML – Bootstrap footer

Trigger: bsfo

<footer class="footer">
	<div class="container">
		<span class="text-muted">$1</span>
	</div>
</footer>

<style>
	html{
		position: relative;
		min-height: 100%;
	}
	body{
		/* Margin bottom by footer height */
		margin-bottom: 60px;
	}
	.footer{
		text-align:center;
		position: absolute;
		bottom: 0;
		width: 100%;
		/* Set the fixed height of the footer here */
		height: 60px;
		line-height: 60px; /* Vertically center the text there */
		background-color: #f5f5f5;
	}
</style>

HTML – Bootstrap input

Trigger: bsin

<div class="input-group">
	<span class="input-group-addon" id="basic-addon1">$1</span>
	<input id="" type="text" class="form-control" placeholder="$2" aria-describedby="basic-addon1">
</div>

HTML – Bootstrap list

Trigger: bsli

<div class="form-group">
	<label for="sel1">$1</label>
	<select id="" class="form-control">
		<option>1</option>
		<option>2</option>
		<option>3</option>
		<option>4</option>
	</select>
</div>

HTML – Bootstrap textarea

Trigger: bsta

<div class="form-group">
	<label for="comment">$1</label>
	<textarea id="" class="form-control" rows="5"></textarea>
</div>

HTML – class

Trigger: cl

class="$1"$2

HTML – Comment

Trigger: 1

<!-- $1 -->$2

HTML – Comment

Trigger: 2

/* $1 */$2

HTML – console log

Trigger: w

console.log($1);

HTML – div

Trigger: d

<div>$1</div>

HTML – document ready

Trigger: dr

$(document).ready(function(){
	$1
});

HTML – Dummy text

Trigger: lo

One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me? " he thought.

HTML – on

Trigger: fu

function $1($2){
	$3
}

HTML – Height

Trigger: he

height:$1

HTML – Max Height

Trigger: mah

max-height:$1

HTML – Min Height

Trigger: mih

min-height:$1

HTML – HTML foundation

Trigger: h

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>${1:Untitled}</title>
		<meta charset="UTF-8">
		<meta name="h2" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="css/style.css">
		<meta name="author" content="ZIMONH">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	</head>
	<body>
		$2
	</body>
</html>

HTML – ID

Trigger: id

id="$1"$2

HTML – Input:submit

Trigger: sub

<input type="submit" value="$1">

HTML – Input:tel

Trigger: inpt

<input type="tel">$1

HTML – Input:text

Trigger: inp

<input type="text">$1

HTML – .css

Trigger: .cs

.css('backgroundColor','red');

HTML – JQ

Trigger: q

\$('$1')$2

HTML – Include jQuery

Trigger: jq

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

HTML – Margin

Trigger: ma

margin:$1

Trigger: mr

margin-bottom:$1

Trigger: ml

margin-left:$1

Trigger: mr

margin-right:$1

Trigger: mt

margin-top:$1

HTML – Meta tags

Trigger: meta

<meta charset="UTF-8">
<meta name="h2" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<meta name="author" content="ZIMONH">$2

HTML – Ordered list

Trigger: ole

<ol>
	<li>$1</li>
	<li>$2</li>
	<li>$3</li>
	<li>$4</li>
</ol>$5

HTML- on

Trigger: .on

.on('change',function(){
	$1
});

HTML – Padding

Trigger: pa

padding:$1

Trigger: pb

padding-bottom:$1

Trigger: pl

padding-left:$1

Trigger: pr

padding-right:$1

Trigger: pt

padding-top:$1

HTML – Script

Trigger: sc

<script>
	$1
</script>

HTML – setInterval

Trigger: sei

setInterval(function(){$1}, 3000);

HTML – setTimeout

Trigger: set

setTimeout(function(){$1}, 3000);

HTML – Slice

Trigger: .sl

.slice(0, -$1); //remove from end

HTML – Inline Stylesheet

Trigger: st

<style>
	$1
</style>

HTML – Stylesheet link

Trigger: stl

<link rel=stylesheet href="$1">$2

HTML – Substring

Trigger: .su

.substring($1,$2); //from .. to ..

HTML – Substring

Trigger: .su

.substring($1,$2); //from .. to ..

HTML – text align

Trigger: ta

text-align:$1

HTML – transition

Trigger: tr

-webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
     -o-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;

HTML – Unordered list

Trigger: ule

<ul>
	<li>$1</li>
	<li>$2</li>
	<li>$3</li>
	<li>$4</li>
</ul>$5

HTML – Width

Trigger: wi

width:$1

HTML – Max Width

Trigger: maw

max-width:$1

HTML – Min Width

Trigger: miw

min-width:$1

Leave a Reply

Your email address will not be published. Required fields are marked *