Skip to content

Instantly share code, notes, and snippets.

@rgdonohue

rgdonohue/README.md

Last active May 22, 2019 19:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rgdonohue/0cf1d6c771fb3454e5024ae07368969d to your computer and use it in GitHub Desktop.
Save rgdonohue/0cf1d6c771fb3454e5024ae07368969d to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap web map template
Raw
README.md

Bootstrap web map template

Raw
index.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>MAP673 Lesson 06</title>
<link href="https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/cerulean/bootstrap.min.css" rel="stylesheet"
integrity="sha384-C++cugH8+Uf86JbNOnQoBweHHAe/wVKN/mb0lTybu/NZ9sEYbd+BbbYtNpWYAsNP" crossorigin="anonymous">
<style>
#map {
width: 100%;
height: calc(40vh);
}
#about {
max-height: calc(80vh);
overflow-y: scroll;
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
#map {
height: calc(60vh);
}
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
#map {
height: calc(80vh);
}
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}
</style>
</head>
<body>
<div class="container-fluid">
<header class="row py-3 bg-dark text-white">
<div class="col mx-2">
<h1 class="h1">Map title</h1>
</div>
</header>
<section class="row bg-secondary">
<div class="col-12 col-md-7 col-lg-8 px-0">
<div id="map" class="bg-light position-relative"></div>
</div>
<aside id="about" class="col-12 col-md-5 col-lg-4 text-dark py-2">
<section>
<h2 class="h2 text-dark">About this map</h2>
<p>A fan brush is a fantastic piece of equipment. Use it. Make friends with it. We're not trying to teach you
a thing to copy. We're just here to teach you a technique, then let you loose into the world. We'll put a
happy little sky in here.</p>
<p>We'll paint one happy little tree right here. The secret to doing anything is believing that you can do it.
Anything that you believe you can do strong enough, you can do. Anything. As long as you believe. Let's make
a nice big leafy tree.</p>
<p>Lorem Ipsum by <a href="https://www.bobrosslipsum.com/index.html">Bob Ross quotes generator</a>.</p>
<p>Everything's not great in life, but we can still find beauty in it. I'll go over the colors one more time
that we use: Titanium white, Thalo green, Prussian blue, Van Dyke brown, Alizarin crimson, Sap green, Cad
yellow, and Permanent red. Only think about one thing at a time. Don't get greedy. In painting, you have
unlimited power. You have the ability to move mountains. You can bend rivers. But when I get home, the only
thing I have power over is the garbage. I get carried away with this brush cleaning.</p>
</section>
</aside>
</section>
<footer class="row bg-dark text-white py-3">
<div class="col mx-2">
<ul class="list-unstyled">
<li>author</li>
<li>date</li>
<li><a href="#">meta data</a></li>
</ul>
</div>
</footer>
</div> <!-- end .container-fluid -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<script src="https://d3js.org/d3.v5.js"></script>
<script src="https://unpkg.com/topojson@3"></script>
<script>
// custom ES6 JavaScript
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment