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
,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}
,h1com (Large section comment):
/****************************************
${1}
****************************************/
,h2com (Small section comment):
/**********
${1}
**********/
,hx (Headings selector list):
h1, h2, h3, h4, h5, h6
,uifonts (Common UI fonts stack):
system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'${0}
SCSS
,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}
,h1com (Large section comment):
//****************************************
// ${1}
//****************************************
,h2com (Small section comment):
//**********
// ${1}
//**********
,hx (Headings selector list):
h1, h2, h3, h4, h5, h6
,uifonts (Common UI Fonts Stack):
system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;${0}
More to come!
