Skip to content

Instantly share code, notes, and snippets.

View rsgranne's full-sized avatar

Scott Granneman rsgranne

36 followers · 7 following
View GitHub Profile
@rsgranne
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
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
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
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
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
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
rsgranne / media-rules-bootstrap-3.css
Created July 26, 2018 21:57
@media rules for Bootstrap 3
@media (min-width: 1200px) {
/* Bootstrap 3 LG Breakpoint only */
}
@media (min-width: 992px) and (max-width: 1199px) {
/* Bootstrap 3 MD Breakpoint ONLY */
}
@rsgranne
rsgranne / oasis-star-wars-bootstrap.html
Last active July 13, 2018 01:28
HTML code for oasis-star-wars-bootstrap
<div class="row">
<div class="col-xs-12">
<div>
<h2 class="h3">Beru Lars</h2>
<p>
<img src="images/beru.jpg" width="95%" title="Aunt Beru Lars" alt="Aunt Beru Lars">
</p>
<table>
<tr>
<th>
@rsgranne
rsgranne / main.js
Created July 5, 2018 23:04
Used with oasis-star-wars-bootstrap
$(document).ready(
function() {
var switcherFunc = function() {
$('> .btn', this.parentNode).addClass('btn-default').removeClass('btn-primary');
$(this).addClass('btn-primary');
};
$('.sex .btn').on('click', switcherFunc);
$('.race .btn').on('click', switcherFunc);
$('.stats .btn').on('click', switcherFunc);
@rsgranne
rsgranne / templates-path.txt
Created June 15, 2018 00:52
Location of Templates for VSCode
# 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"