Skip to content

Instantly share code, notes, and snippets.

@cecilemuller
Last active November 21, 2020 10:59
Show Gist options
  • Save cecilemuller/11099714 to your computer and use it in GitHub Desktop.
Save cecilemuller/11099714 to your computer and use it in GitHub Desktop.
HTML & Stylus boilerplate snippets for Emmet (ST3)
{
"autodetect_xhtml": false,
"snippets": {
"html": {
"snippets": {
"meta:viewport": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no\">",
"meta:ua": "<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">",
"js:html5":"<!--[if lt IE 9]>\n<script src=\"\/\/html5shiv.googlecode.com/svn/trunk/html5.js\"></script>\n<![endif]-->",
"js:empty": "<script>\n(function(){\n\t'use strict';\n\t\/\/\n\t\/\/ TODO\n\t\/\/\n})();\n</script>",
"js:webfont2": "<script>\nWebFont.load({\n\tgoogle: {\n\t\tfamilies: ['Droid Sans:n4:i4:n7', 'Droid Serif']\n\t}\n});\n</script>",
"spaces": "\n\n",
"todo": "<!-- TODO -->",
// Because the matching abbreviations no longer work for some reason
"js:bootstrap": "<script src=\"\/\/netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js\"></script>",
"js:jquery": "<script src=\"\/\/ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\"></script>",
"js:webfont1": "<script src=\"\/\/ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js\"></script>",
},
"abbreviations": {
"link:bootstrap": "link:css[href=\/\/netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css]",
"link:fontawesome": "link:css[href=\/\/netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css]",
"link:brickfont": "link:css[href=\/\/brick.a.ssl.fastly.net/Lato:400/Open+Sans:400,700]",
"link:stylus": "link:css[href=styles.styl]",
// Basic HTML5 + Brick Font + Web Font Loader + Empty Script
"!": "!!!+html[lang=en]>(head>meta[charset=utf-8]+title{${1:Untitled}}+meta:viewport+meta:ua+link:brickfont+link:stylus)+body>spaces+js:webfont1+js:webfont2+js:empty+spaces",
// + jQuery 1.11.1 + Bootstrap 2.3.2 + FontAwesome 4.1.0
"!bootstrap": "!!!+html[lang=en]>(head>meta[charset=utf-8]+title{${1:Untitled}}+meta:viewport+meta:ua+js:html5+link:bootstrap+link:fontawesome+link:brickfont+link:stylus)+body>spaces+js:jquery+js:bootstrap+js:empty+spaces+js:webfont1+js:webfont2+spaces"
}
},
"stylus": {
"snippets": {
"!typography": "\t-webkit-font-smoothing subpixel-antialiased\n\t-moz-osx-font-smoothing grayscale\n\ttext-rendering optimizeLegibility\n\np\n\thyphens auto\n\thyphenate-limit-lines 2\n\thyphenate-limit-chars 6 3 2\n\thyphenate-limit-zone 4em\n\n",
"!": "\n*, *:before, *:after\n\tbox-sizing border-box\n\nbody\n\tfont-family \"Open Sans\", sans-serif\n\tfont-size 16px\n\tline-height 1.5\n\n\tcolor #333\n\tbackground #fafafa\n\n\t-webkit-font-smoothing subpixel-antialiased\n\t-moz-osx-font-smoothing grayscale\n\ttext-rendering optimizeLegibility\n\np\n\thyphens auto\n\thyphenate-limit-lines 2\n\thyphenate-limit-chars 6 3 2\n\thyphenate-limit-zone 4em\n\nh1\n\tfont-style normal\n\tfont-family Lato, serif\n\tfont-weight 400\n\tfont-size 64px\n\na\n\ttransition all 100ms\n\n"
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment