Skip to content

Instantly share code, notes, and snippets.

Avatar

Scott Granneman rsgranne

  • WebSanity
  • St. Louis, MO
View GitHub Profile
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>
@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">
@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"
],
@rsgranne
rsgranne / bootstrap-4-npm-package.json
Created Apr 16, 2019
Bootstrap 4 NPM package.json template for Web dev courses
View bootstrap-4-npm-package.json
{
"name": "bootstrap-4",
"version": "1.0.0",
"description": "Bootstrap 4",
"main": "index.js",
"scripts": {},
"author": "",
"license": "ISC",
"dependencies": {
"bootstrap": "^4.3.1",
@rsgranne
rsgranne / bootstrap-4-npm.scss
Created Apr 16, 2019
Bootstrap 4 NPM SCSS template for Web dev courses
View bootstrap-4-npm.scss
// Override Bootstrap 4 variables below
// Bootstrap 4
@import "../node_modules/bootstrap/scss/bootstrap.scss";
// Site SCSS below
@rsgranne
rsgranne / bootstrap-4-npm.html
Last active Apr 16, 2019
Bootstrap 4 NPM HTML template for Web dev courses
View bootstrap-4-npm.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 rel="stylesheet" href="/css/main.css">
@rsgranne
rsgranne / scss-user-snippet.json
Last active Nov 20, 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 grid-4-column-area-media-queries.scss
// For all @media rules, see http://chnsa.ws/1a5
@media (min-width: 992px) and (max-width: 1199px) {
// Bootstrap 3 MD Breakpoint ONLY
.creatures-container {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, auto);
grid-gap: 0 25px;
.img-4 {
grid-row: 3 / 4;
@rsgranne
rsgranne / css-user-snippet.json
Last active Nov 20, 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 / jumbotron-video.css
Created Dec 15, 2018
Bootstrap 4 Jumbotron Video
View jumbotron-video.css
.jumbotron-video {
/* must set this so we can use position: absolute next */
position: relative;
/* don’t let video exceed the boundaries we set */
overflow: hidden;
/* show users more of page below the hero */
height: 80vh;
}
.jumbotron-video video {