Skip to content

Instantly share code, notes, and snippets.


Scott Granneman rsgranne

  • WebSanity
  • St. Louis, MO
View GitHub Profile
rsgranne / templates-path.txt
Created Jun 15, 2018
Location of Templates for VSCode
View templates-path.txt
# Mac
"fileTemplates.templates_dir": "/Users/YOUR-USER-NAME/Documents/Web Dev Projects/+Templates"
# Windows
"fileTemplates.templates_dir": "C:\Users\YOUR-USER-NAME\Documents\Web Dev Projects\+Templates"
rsgranne / main.js
Created Jul 5, 2018
Used with oasis-star-wars-bootstrap
View main.js
function() {
var switcherFunc = function() {
$('> .btn', this.parentNode).addClass('btn-default').removeClass('btn-primary');
$('.sex .btn').on('click', switcherFunc);
$('.race .btn').on('click', switcherFunc);
$('.stats .btn').on('click', switcherFunc);
rsgranne / oasis-star-wars-bootstrap.html
Last active Jul 13, 2018
HTML code for oasis-star-wars-bootstrap
View oasis-star-wars-bootstrap.html
<div class="row">
<div class="col-xs-12">
<h2 class="h3">Beru Lars</h2>
<img src="images/beru.jpg" width="95%" title="Aunt Beru Lars" alt="Aunt Beru Lars">
View media-rules-bootstrap-3.css
@media (min-width: 1200px) {
/* Bootstrap 3 LG Breakpoint only */
@media (min-width: 992px) and (max-width: 1199px) {
/* Bootstrap 3 MD Breakpoint ONLY */
rsgranne / html5.html
Last active Oct 31, 2018
HTML5 template for Web dev courses
View html5.html
<!doctype html>
<html lang="en">
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="/css/main.css">
rsgranne / bootstrap-4-nav-click-to-activate.html
Last active Dec 3, 2018
Bootstrap 4 nav that shows dropdowns on click
View bootstrap-4-nav-click-to-activate.html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
rsgranne / bootstrap-3-cdn.html
Last active Dec 5, 2018
Bootstrap 3 CDN template for Web dev courses
View bootstrap-3-cdn.html
<!doctype html>
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
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 {
rsgranne / bootstrap-4-cdn.html
Last active Jan 31, 2019
Bootstrap 4 CDN template for Web dev courses
View bootstrap-4-cdn.html
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
View grid-4-column-area-media-queries.scss
// For all @media rules, see
@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;