Sublime Text snippets for common .js, css and html tasks
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md
ascii-skull.sublime-snippet
bootstrap_alert.sublime-snippet
bootstrap_button.sublime-snippet
bootstrap_column.sublime-snippet
bootstrap_dropdown.sublime-snippet
bootstrap_grid.sublime-snippet
bootstrap_icon.sublime-snippet
bootstrap_jumbotron.sublime-snippet
bootstrap_media_object.sublime-snippet
bootstrap_navbar.sublime-snippet
bootstrap_pagination.sublime-snippet
bootstrap_panel.sublime-snippet
bootstrap_progress_bar.sublime-snippet
bootstrap_tabs.sublime-snippet
bp_.sublime-snippet
cdn_bootstrap_css.sublime-snippet
cdn_bootstrap_js.sublime-snippet
cdn_font_awesome.sublime-snippet
cdn_jquery.sublime-snippet
css_animation.sublime-snippet
css_animation_short.sublime-snippet
css_bezier.sublime-snippet
css_box.sublime-snippet
css_box_sizing.sublime-snippet
css_breakpoint.sublime-snippet
css_common_properties.sublime-snippet
css_font.sublime-snippet
css_hover.sublime-snippet
css_keyframes.sublime-snippet
css_media_query.sublime-snippet
css_rule.sublime-snippet
css_transition.sublime-snippet
font_awesome.sublime-snipppet
font_awesome_icon.sublime-snippet
html.sublime-snippet
html_audio.sublime-snippet
html_body.sublime-snippet
html_comment.sublime-snippet
html_dl.sublime-snippet
html_document.sublime-snippet
html_head.sublime-snippet
html_image.sublime-snippet
html_img.sublime-snippet
html_jquery_cdn.sublime-snippet
html_link.sublime-snippet
html_list.sublime-snippet
html_marquee.sublime-snippet
html_prerender.sublime-snippet
html_quote.sublime-snippet
html_script.sublime-snippet
html_style.sublime-snippet
html_table.sublime-snippet
html_tag.sublime-snippet
html_ul.sublime-snippet
html_video.sublime-snippet
html_youtube.sublime-snippet
jq_ajax.sublime-snippet
jq_click.sublime-snippet
jq_dr.sublime-snippet
jq_fn.sublime-snippet
jq_on.sublime-snippet
jq_plugin.sublime-snippet
jq_publish.sublime-snippet
jq_submit.sublime-snippet
jq_subscribe.sublime-snippet
js_DomContentLoaded.sublime-snippet
js_array_sort.sublime-snippet
js_class.sublime-snippet
js_comment.sublime-snippet
js_days.sublime-snippet
js_filter.sublime-snippet
js_fn.sublime-snippet
js_for.sublime-snippet
js_forin.sublime-snippet
js_function.sublime-snippet
js_ga.sublime-snippet
js_iffe.sublime-snippet
js_iife.sublime-snippet
js_log.sublime-snippet
js_module.sublime-snippet
js_months.sublime-snippet
js_promise.sublime-snippet
js_querySelectorAll.sublime-snippet
js_random_between.sublime-snippet
js_singleton.sublime-snippet
js_switch.sublime-snippet
js_ternary.sublime-snippet
js_then.sublime-snippet
js_timeout.sublime-snippet
js_try.sublime-snippet
misc_gitignore.sublime-snippet
misc_ip.sublime-snippet
misc_server.sublime-snippet
ng_try.sublime-snippet
regex_alphanumeric.sublime-snippet
regex_decimal.sublime-snippet
regex_email.sublime-snippet
regex_url.sublime-snippet
tb_alert.sublime-snippet
tb_carousel.sublime-snippet
tb_grid.sublime-snippet
tb_modal.sublime-snippet
tb_table.sublime-snippet
tb_tooltip.sublime-snippet

README.md

Front End Snippets For Sublime Text

These docs are old. Use these

basic js

Multiline comment

Tab Trigger: _*
/*
* message
*/

console.log()

Tab Trigger: _log
console.log();

for loop

Tab Trigger: _for
var len = array.length;
for(var ii = 0; ii < len; ii++){
  var cur = array[ii];
  /* code ... */
}

for-in loop

Tab Trigger: _forin
for (var key in object){
 if (object.hasOwnProperty(key)){
   var value = object[key];
 }
}

Google Analytics

Tab Trigger: _ga
var _gaq = _gaq || [];
  _gaq.push(['_setAccount', '${1:UA-XXXXX-X}']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

switch statement

Tab Trigger: _switch
switch(var){
  case :
    /* code ... */
  break;
  case :
    /* code ... */
  break;
  default:
    /* code ... */
  break;
}

ternary statement

Tab Trigger: _?
condition ? true : false;

try / catch / finally

Tab Trigger: _try
try {
  /* code... */
} 
catch (e) {
   /* code... */
}
finally (e) {
   /* code... */
}

Array.filter()

Tab Trigger: _filter
var filtered = array.filter(
    function(element){ 
      return true|false; 
    }
  );  

Array.sort()

Tab Trigger: _sort
items.sort(function (a, b) {
  if (${1:a > b}){
    return 1;
  }
  if (${2:a < b}){
    return -1;
  }
  // a must be equal to b
  return 0;
});  

setTimeout

Tab Trigger: _timeout
setTimeout(function(){},delay);

named function

Tab Trigger: _function
function method(arguments){
  /* code ... */
}

advanced js

iife

Tab Trigger: _iife
(function(){
  /* code */
})();

Class boilerplate

Tab Trigger: _class
    function ClassName (param) {

      this.publicVar = 'foo';
      var privateVar = 'bar';

      var that = this;

      function privateMethod(){
        /* 
        * this method can be accessed by
        * privileged methods but not by
        * public methods.
        */
      }

      this.privilegedMethod = function(){
        /* 
        * this method has access to both
        * the public and private properties
        * of the object
        */
      }
    }

    ClassName.prototype.publicMethod = function() {};

Singleton

Tab Trigger: _singleton
     var ClassName;
    (function() {
        var instance;

        ClassName = function ClassName() {
            if (instance) {
                return instance;
            }

            instance = this;

            /* code */
        };
    }());

Promise

Tab Trigger: _promise
   var promise = new Promise(function(resolve, reject) {

    var success;

    /* code */

    if (success) {
      resolve();
    }
    else {
      reject(Error());
    }
  });

  promise.then(
    function(result) {
      console.log(result);
    },
    function(err) {
      console.log(err);
    }
  );

Promise (then)

Tab Trigger: _then
   promise.then(
    function(result) {
      console.log(result);
    },
    function(err) {
      console.log(err);
    }
  );

jQuery snippets

$.ajax()

Tab Trigger: _$ajax
 $.ajax({
   url: '',
   data: {}
 })
 .done(function ( data ) {
   /* code ... */
 })
 .fail(function(jqXHR,textStatus){
   /* code ... */
 })
 .always(function(jqXHR,textStatus){
   /* code ... */
 });

$(document).ready()

Tab Trigger: _$dr
 ```js
$(document).ready(function(e){
  /* code ... */
});
``` 

$(function)

Tab Trigger: _$fn
 ```js
$(function() {
  /* code ... */
});
``` 

$('.selector').on()

Tab Trigger: _$on
 ```js
$('selector').on('event', function(e){
  /* code ... */
});
```

jQuery Plugin boilerplate

Tab Trigger: _plugin
   (function($){

      var ClassName = function (element, options){

        this.$element  = $(element);

        // plugin options
        this.options   = $.extend({}, ClassName.DEFAULTS, options);

        var that = this;

      };

      ClassName.DEFAULTS = {};

      var old = $.fn.pluginName;

      $.fn.pluginName = function (option) {
        return this.each(function () {
          var $this   = $(this);
          var data    = $this.data('pluginName');
          var options = typeof option === 'object' && option;
          if (!data){
            $this.data('pluginName', (data = new ClassName(this, options)));
          }
        });
      };

      $.fn.pluginName.Constructor = ClassName;

      $.fn.pluginName.noConflict = function() {
        $.fn.pluginName = old;
        return this;
      };

    })(jQuery);

publish (tiny pub/sub)

Tab Trigger: _publish
 ```js
  $.publish('whatever.event.name',payload);
``` 

subscribe (tiny pub/sub)

Tab Trigger: _subscribe
```js
  function handlerFunction(){
    return function(_,data){
      console.log('subscribe ',data);
    };
  }

  $.subscribe('whatever.event.name',handlerFunction());
```        

html snippets

.html page

Tab Trigger: _html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>page</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">

  <link rel="stylesheet" href="">

  </head>
  <body>
    <main>

    </main>
    <script type="text/javascript" src=""></script>
</body>
</html>

video tag

Tab Trigger: _video
<video controls preload="auto" width="640" height="264" poster="PATH_TO_ASSETS.png">
 <source src="PATH_TO_ASSETS.mp4" type='video/mp4' />
 <source src="PATH_TO_ASSETS.webm" type='video/webm' />
 <source src="PATH_TO_ASSETS.ogv" type='video/ogg' />
</video>

css snippets

responsive breakpoint

Tab Trigger: _breakpoint
@media all and (min-width: 50em) {

}

animation @keyframes

Tab Trigger: _keyframes
    @-webkit-keyframes ANIMATION_NAME {
      0%   {  }
      100% {  }
    }
    @-moz-keyframes ANIMATION_NAME {
      0%   {  }
      100% {  }
    }
    @-o-keyframes ANIMATION_NAME {
      0%   {  }
      100% {  }
    }
    @keyframes ANIMATION_NAME {
      0%   {  }
      100% {  }
    }

transition

Tab Trigger: _transition
    -webkit-transition-property: all;
    transition-property: all;

    -webkit-transition-duration: 750ms;
    transition-duration: 750ms;

    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;

    -webkit-transition-delay: 500ms;
    transition-delay: 500ms;

regular expression snippets

alphanumeric

Tab Trigger: _regex_alphanumeric
/^[0-9a-zA-Z]+$/

email

Tab Trigger: _regex_email
/^\s*[\w\-\+_]+(\.[\w\-\+_]+)*\@[\w\-\+_]+\.[\w\-\+_]+(\.[\w\-\+_]+)*\s*$/;

url

Tab Trigger: _regex_url
/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/

misc. snippets

.gitignore

Tab Trigger: _gitignore
# osx noise
.DS_Store

# svn & cvs
.svn
CVS

*.log
node_modules
bower_components

# project specific