This is the README for GrannePack Web Dev Snippets.
GrannePack Web Dev Snippets
This extension pack of HTML-, CSS-, & SCSS-related snippets is aimed at students in Scott Granneman’s beginning Web Development courses. Other languages may be added at later times.
A list of all snippets & their outputs are further below.
Other extension packs focusing on extensions
In addition, I have also created extension packs of extensions, also for students in my beginning Web Development courses:
Snippets
In the following tables, ${0} represents the final cursor position. In most cases, this is the only place the cursor could be, so it is also where your cursor will be immediately after expanding the snippet. If there is more than one cursor position, however, then ${1}, {2}, & so on represent each tab stop, ending at ${0}.
HTML
a:
<a href="${1}">${0}</a>
address:
<address>
${0}
</address>
article:
<article>
${0}
</article>
aside:
<aside>
${0}
</aside>
b:
<b>${1}</b>${0}
blockquote:
<blockquote>
${0}
</blockquote>
caption (for <table>):
<caption>
${0}
</caption>
dd:
<dd>${0}</dd>
div:
<div>
${0}
</div>
dl:
<dl>
${0}
</dl>
dt:
<dt>${0}</dt>
em:
<em>${0}</em>
figcaption:
<figcaption>
${0}
</figcaption>
figure:
<figure>
${0}
</figure>
footer:
<footer>
${0}
</footer>
head:
<head>
${0}
</head>
header:
<header>
${0}
</header>
html:
<html>
${0}
</html>
i:
<i>${0}</i>
img:
<img src="{0}" alt="" width="" height="" srcset="">
li:
<li>${0}</li>
link:
<link rel="stylesheet" href="{0}">
main:
<main>
${0}
</main>
meta:
<meta charset="UTF-8">${0}
nav:
<nav>
${0}
</nav>
ol:
<ol>
${0}
</ol>
ol+:
<ol>
<li>${1}</li>
<li>${2}</li>
<li>${3}</li>${0}
</ol>
option:
<option>${1}</option>${0}
p:
<p>
${0}
</p>
script:
<script src="{0}"></script>
section:
<section>
${0}
</section>
strong:
<strong>${0}</strong>
style:
<style>
${0}
</style>
table:
<table>
${0}
</table>
td:
<td>${0}</td>
th:
<th>${0}</th>
tr:
<tr>
${0}
</tr>
trd:
<tr>
<td>${0}</td>
</tr>
trh:
<tr>
<th>${0}</th>
</tr>
ul:
<ul>
${0}
</ul>
ul+:
<ul>
<li>${1}</li>
<li>${2}</li>
<li>${0}</li>
</ul>
video:
<video src="" poster="" width="" height="" controls></video>
video+:
<video poster="" width="" height="" controls>
<source src="{1}" type="video/webm">
<source src="{2}" type="video/mp4">
</video>
CSS
,1com (Large section comment):
/****************************************
${1}
****************************************/
,2com (Small section comment):
/**********
${1}
**********/
,condensed (Condensed font stack):
Oswald, 'Avenir Next Condensed', AvenirNextCondensed-Medium, HelveticaNeue, sans-serif-condensed, 'Gill Sans Nova Cond', 'Arial Nova Condensed', 'Arial Narrow', sans-serif;${0}
,hx (Headings selector list):
h1, h2, h3, h4, h5, h6
,mono (Monospace fonts stack):
ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Mono', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', Consolas, Courier, 'Courier New', monospace;${0}
,uifonts (Common UI fonts stack):
system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';${0}
SCSS
,1com (Large section comment):
//****************************************
// ${1}
//****************************************
,2com (Small section comment):
//**********
// ${1}
//**********
,condensed (Condensed Font Stack):
Oswald, 'Avenir Next Condensed', AvenirNextCondensed-Medium, HelveticaNeue, sans-serif-condensed, 'Gill Sans Nova Cond', 'Arial Nova Condensed', 'Arial Narrow', sans-serif;${0}
,hx (Headings selector list):
h1, h2, h3, h4, h5, h6
,mono (Monospace fonts stack):
ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Mono', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', Consolas, Courier, 'Courier New', monospace;${0}
,uifonts (Common UI Fonts Stack):
system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';${0}
More to come!
