Skip to content

Instantly share code, notes, and snippets.

Avatar

Scott Granneman rsgranne

  • WebSanity
  • St. Louis, MO
View GitHub Profile
@rsgranne
rsgranne / css-user-snippet.json
Last active Dec 1, 2021
CSS user snippet used with VSCode
View css-user-snippet.json
{
/*
// Place your snippets for CSS here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// ${1}, ${2} for tab stops, ${0} for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
"Print to console": {
"prefix": "log",
"body": [
@rsgranne
rsgranne / scss-user-snippet.json
Last active Dec 1, 2021
SCSS user snippet used with VSCode
View scss-user-snippet.json
{
/*
// Place your snippets for SCSS here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
"Print to console": {
"prefix": "log",
"body": [
View system-fonts.css
font-family: 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;
@rsgranne
rsgranne / grannepack-html-vscode-settings.json
Last active Nov 8, 2021
VSCode settings for the extensions installed via GrannePack HTML
View grannepack-html-vscode-settings.json
// Place your settings in this file to overwrite the default settings
// Last updated 2021-11-08
{
"breadcrumbs.enabled": true,
// Color Picker
"colorHelper.formatsOrder": [
"hsl",
"hex",
"named"
],
View bootstrap-5-nav-sample.html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
View VSCode Settings
// Place your settings in this file to overwrite the default settings
{
"breadcrumbs.enabled": true,
"editor.acceptSuggestionOnEnter": "on",
"editor.detectIndentation": false,
"editor.fontFamily": "'Source Code Pro', Menlo, Consolas, Courier, monospace",
"editor.fontSize": 11,
"editor.formatOnSave": true,
"editor.multiCursorModifier": "ctrlCmd",
"editor.quickSuggestions": {
@rsgranne
rsgranne / bootstrap-5-cdn.html
Created Oct 5, 2021
Bootstrap 5 CDN template for Web dev courses
View bootstrap-5-cdn.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Untitled</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
View VSCode HTML Snippets
{
/*
// Place your snippets for HTML here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// ${1}, ${2} for tab stops, ${0} for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
"Print to console": {
"prefix": "log",
"body": [
View Emmet - snippets.json
{
"html": {
"filters": "html, e",
"abbreviations": {},
"snippets": {
"!": "!!!+html>(head>meta[charset=UTF-8]+title+link[rel=stylesheet href=/css/${1:main}.css])+body",
"boot3": "!!!+html>(head>meta[charset=UTF-8]+meta[http-equiv=X-UA-Compatible content=${bootstrap-ie-meta}]+meta[name=viewport content=${bootstrap-vp-meta}]+{\n}+title+{\n}+link[rel=stylesheet href=/css/${1:bootstrap}.css]+link[rel=stylesheet href=/css/${1:main}.css])+(body>h1+{\n}+{\n}+script[src=${jquery-cdn}]+script[src=/js/bootstrap.min.js])",
"boot3cdn": "!!!+html>(head>meta[charset=UTF-8]+meta[http-equiv=X-UA-Compatible content=${bootstrap-ie-meta}]+meta[name=viewport content=${bootstrap-vp-meta}]+{\n}+title+{\n}+link[rel=stylesheet href=${bootstrap-css-cdn} integrity=${bootstrap-css-cdn-integrity} crossorigin=anonymous]+link[rel=stylesheet href=/css/${1:main}.css])+(body>h1+{\n}+{\n}+script[src=${jquery-cdn}]+script[src=${bootstrap-js-cdn} integrity=${boostrap-js-cdn-integri
View lovecraft-scss-10
html {
font-size: 16px;
}
body {
padding: 1em;
font-family: "Georgia Pro", Georgia, serif;
line-height: 1.3;
}