Scott Granneman rsgranne

## 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"

## main.js
$(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);

## oasis-star-wars-bootstrap.html
      <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>

## 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 */

}

## html5.html
<!doctype html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <link rel="stylesheet" href="/css/main.css">
  </head>

  <body>

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

## bootstrap-3-cdn.html
<!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>

## 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 {

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

## 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;
	# 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"
	$(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);
	<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>
	@media (min-width: 1200px) {
	/* Bootstrap 3 LG Breakpoint only */

	}

	@media (min-width: 992px) and (max-width: 1199px) {
	/* Bootstrap 3 MD Breakpoint ONLY */

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

	<head>
	<meta charset="UTF-8">
	<title>Untitled Document</title>
	<link rel="stylesheet" href="/css/main.css">
	</head>

	<body>
	.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 {
	// 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;