A set of custom HTML snippets for Sublime Text
Switch branches/tags
Nothing to show
Clone or download
joshnh Merge pull request #21 from edgarshurtado/master
updates jQuery snippet to work with v1.11.3
Latest commit 3748eef Oct 27, 2015
Permalink
Failed to load latest commit information.
messages add install message Mar 29, 2013
.gitignore add install message Mar 29, 2013
README.md updates jQuery snippet to work with v1.11.3 Oct 5, 2015
a.sublime-snippet Update a.sublime-snippet Nov 28, 2012
comm.sublime-snippet Remove trailing newlines, changed com to comm. Nov 28, 2012
cond.sublime-snippet Update cond.sublime-snippet Jun 14, 2013
css.sublime-snippet feat(css): style tag snippet Oct 19, 2014
dummy.sublime-snippet Remove trailing newlines, changed com to comm. Nov 28, 2012
fig.sublime-snippet Remove trailing newlines, changed com to comm. Nov 28, 2012
ga.sublime-snippet Merged commits from Josh's repo. Nov 28, 2012
ga2.sublime-snippet Update ga2.sublime-snippet Jul 22, 2013
html.sublime-snippet Update html.sublime-snippet Apr 4, 2013
img.sublime-snippet Remove trailing newlines, changed com to comm. Nov 28, 2012
input-checkbox.sublime-snippet add input Feb 7, 2014
input-email.sublime-snippet add input Feb 7, 2014
input-password.sublime-snippet add input Feb 7, 2014
input-radio.sublime-snippet add input Feb 7, 2014
input-submit.sublime-snippet add input Feb 7, 2014
input-tel.sublime-snippet add input Feb 7, 2014
input-text.sublime-snippet add input Feb 7, 2014
jquery.sublime-snippet updates jQuery snippet to work with v1.11.3 Oct 5, 2015
lorem.sublime-snippet Remove trailing newlines, changed com to comm. Nov 28, 2012
messages.json add install message Mar 29, 2013
meta.sublime-snippet Removes unnecessary quotes. Dec 17, 2012
nav.sublime-snippet update nav snippets Mar 27, 2013
nav2.sublime-snippet update nav snippets Mar 27, 2013
ol.sublime-snippet Remove trailing newlines, changed com to comm. Nov 28, 2012
script.sublime-snippet update snippets Nov 28, 2012
shiv.sublime-snippet Fixed missing space between IE and 9 Sep 3, 2013
style.sublime-snippet Removes unnecessary quotes. Dec 17, 2012
ul.sublime-snippet Remove trailing newlines, changed com to comm. Nov 28, 2012

README.md

Sublime Text HTML Snippets

A work in progress.

Type the snippet shortcode and then press Tab to complete the snippet.

The snippets are listed below in alphabetical order. The '$1' indicates the position of the caret/s. Some snippets have been set up so that pressing Tab jumps the caret/s to the next predefined spot. It's a little hard to explain, but any snippet that has a $1/$2/$3/etc. uses this technique.

Feel free to play with, alter, expand, or ruin these snippets as you please. I only ask that if you come up with an incredibly handy snippet, or simply one that I have missed, that you let me know (via email, Twitter or GitHub) so that I can improve these for everybody. Thanks!

IMPORTANT: If you are also using Emmet, add the following to Emmet's user settings file:

"disabled_single_snippets": "fig meta nav ol script style ul"


a

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

comm

<!-- $1 -->

cond

<!--[if ${1:lt IE 9}]>
    <link rel=stylesheet href="${2:css/ie.css">}
<![endif]-->

doctype

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="$1">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>${2:Untitled}</title>
        <link rel="stylesheet" href="css/style.css">
        <link rel="author" href="humans.txt">
    </head>
    <body>
        $3
        <script src="js/main.js"></script>
    </body>
</html>

dummy

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.

fig

<figure>
    <img src="$1" alt="$2">
    <figcaption>$3</figcaption>
</figure>

ga

<script>
    var _gaq = [['_setAccount', '${1:UA-XXXXX-X}'], ['_trackPageview']];
    (function(d, t) {
        var g = d.createElement(t),
            s = d.getElementsByTagName(t)[0];
        g.src = '//www.google-analytics.com/ga.js';
        s.parentNode.insertBefore(g, s);
    }(document, 'script'));
</script>

ga2

<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', '${1:UA-XXXX-X}');
    ga('send', 'pageview');
</script>

img

<img src="$1" alt="$2">

jquery

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

lorem

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.

meta

<meta charset=utf-8>
<meta name=description content="$1">
<meta name=viewport content="width=device-width, initial-scale=1">

nav

For when using inline-block.

<nav class="$1">
    <ul>
        <li><a href="#">$2</a></li><!--
     --><li><a href="#">$3</a></li><!--
     --><li><a href="#">$4</a></li><!--
     --><li><a href="#">$5</a></li>
    </ul>
</nav>

nav2

<nav class="$1">
    <ul>
        <li><a href="#">$2</a></li>
        <li><a href="#">$3</a></li>
        <li><a href="#">$4</a></li>
        <li><a href="#">$5</a></li>
    </ul>
</nav>

ol

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

script

<script src="$1"></script>

shiv

<!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

style

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

ul

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

inp:text

<input type="text">

inp:tel

<input type="tel">

inp:radio

<input type="radio">

inp:check

<input type="checkbox">

inp:email

<input type="email">

inp:pass

<input type="password">

inp:submit

<input type="submit">
<style type="text/css">$1</style>