rsgranne’s gists

rsgranne / bootstrap-4-npm.scss

Created April 16, 2019 19:01

Bootstrap 4 NPM SCSS template for Web dev courses

	// Override Bootstrap 4 variables below

	// Bootstrap 4
	@import "../node_modules/bootstrap/scss/bootstrap.scss";

	// Site SCSS below

rsgranne / bootstrap-4-npm.html

Last active April 16, 2019 19:00

Bootstrap 4 NPM HTML template for Web dev courses

	<!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 / scss-user-snippet.json

Last active December 1, 2021 21:10

SCSS user snippet used with VSCode

	{
	/*
	// 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": [

rsgranne / grid-4-column-area-media-queries.scss

Last active April 6, 2019 16:33

	// 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 / css-user-snippet.json

Last active August 29, 2023 18:56

CSS user snippet used with VSCode

	{
	/*
	// 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 / jumbotron-video.css

Created December 15, 2018 16:06

Bootstrap 4 Jumbotron Video

	.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-nav-click-to-activate.html

Last active December 3, 2018 23:51

Bootstrap 4 nav that shows dropdowns on click

	<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>
	</button>

	<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-4-cdn.html

Last active January 31, 2019 22:32

Bootstrap 4 CDN template for Web dev courses

	<!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="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

rsgranne / bootstrap-3-cdn.html

Last active December 5, 2018 01:15

Bootstrap 3 CDN template for Web dev courses

	<!doctype html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>Untitled</title>

rsgranne / html5.html

Last active December 26, 2024 22:05

HTML5 template for Web dev courses

	<!doctype html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="description" content="">

	<title>Untitled</title>

	<link rel="stylesheet" href="/css/main.css">

Scott Granneman rsgranne