Bootstrap Cheat Sheet
Our cheat sheet below builds on Bootstrap's excellent documentation, zooming in on our particular customizations ( colors and spacing, namely ). If you are looking for other docs, here's a list of good Bootstrap topics, for convenience:
Background & Text Colors
Bootstrap builds out a bunch of helper classes based on our set colors. Setting background colors follows a predictable bg-{color} format. Setting text uses text-{color}. See the specimens below for examples of both:
<p class="bg-primary text-white">I have .bg-primary and .text-white</p>I have .bg-primary and .text-white
<p class="bg-secondary text-white">I have .bg-secondary and .text-white</p>I have .bg-secondary and .text-white
<p class="bg-success text-white">I have .bg-success and .text-white</p>I have .bg-success and .text-white
<p class="bg-danger text-white">I have .bg-danger and .text-white</p>I have .bg-danger and .text-white
<p class="bg-warning text-white">I have .bg-warning and .text-white</p>I have .bg-warning and .text-white
<p class="bg-info text-white">I have .bg-info and .text-white</p>I have .bg-info and .text-white
<p class="bg-light text-black">I have .bg-light and .text-black</p>I have .bg-light and .text-black
<p class="bg-black text-white">I have .bg-black and .text-white</p>I have .bg-black and .text-white
<p class="bg-white text-black">I have .bg-white and .text-black</p>I have .bg-white and .text-black
Padding and Margins / Spacing
The code for adding both padding and margins is nearly interchangeable. See the Bootstrap documentation on spacing notation for full details.
Padding
Padding adds extra space inside an element.
<p class="bg-secondary p-1">I'm a <p> tag with p-1</p>I'm a <p> tag with p-1
<p class="bg-secondary p-2">I'm a <p> tag with p-2</p>I'm a <p> tag with p-2
<p class="bg-secondary p-3">I'm a <p> tag with p-3</p>I'm a <p> tag with p-3
<p class="bg-secondary p-4">I'm a <p> tag with p-4</p>I'm a <p> tag with p-4
<p class="bg-secondary p-5">I'm a <p> tag with p-5</p>I'm a <p> tag with p-5
<p class="bg-secondary p-8">I'm a <p> tag with p-8</p>I'm a <p> tag with p-8
Margins
Margins add extra space outside the element.
<p class="bg-secondary m-1">I'm a <p> tag with m-1</p>I'm a <p> tag with m-1
<p class="bg-secondary m-2">I'm a <p> tag with m-2</p>I'm a <p> tag with m-2
<p class="bg-secondary m-3">I'm a <p> tag with m-3</p>I'm a <p> tag with m-3
<p class="bg-secondary m-4">I'm a <p> tag with m-4</p>I'm a <p> tag with m-4
<p class="bg-secondary m-5">I'm a <p> tag with m-5</p>I'm a <p> tag with m-5
<p class="bg-secondary m-8">I'm a <p> tag with m-8</p>I'm a <p> tag with m-8
Padding vs. Margin
It's helpful to think of each element ( a column, a paragraph, a row, an image; everything ! ) as a box, with its own dimensions.
Simply put: padding will add that space inside the box, whereas margins are on the outside. This becomes most relevant where background colors are set, so check out this example for the difference:
<p class="bg-warning p-5">I'm a <p> tag, with p-5</p>I'm a <p> tag, with p-5
<p class="bg-warning m-5">I'm a <p> tag, with m-5</p>I'm a <p> tag, with m-5
One subtle distinction worth highlighting — margins also collapse. So two elements, each with margins set, contacting eachother, will condense down to one.
<p class="bg-warning m-5">I'm a <p> tag, with m-5</p><p class="bg-warning m-5">I'm another <p> tag, with m-5</p>I'm a <p> tag, with m-5
I'm another <p> tag, with m-5
Both have margins set, and by design these won't stack to make e.g. an m-10 sized gap between them.
Padding on the other hand, is additive:
<p class="bg-warning p-5">I'm a <p> tag, with p-5</p><p class="bg-warning p-5">I'm another <p> tag, with p-5</p>I'm a <p> tag, with p-5
I'm another <p> tag, with p-5
Both paddings come through ( with some extra margin between them, because that's what the default styles include ).
Certainly no reason you can't combine the two, but there you have it!
Design & Style Guide
Typography
Headings and the logotype are in JetBrains mono, a free & open source typeface available at jetbrains.com/lp/mono.
Body text and anything that requires more lengthy reading is in Linux Biolinum, which is also free & open source and can be downloaded from sourceforge.net/projects/linuxlibertine.
The logotype above embodies several elements of scientist rebellion:
- the warming stripes, a strong visual reminder of the climate crisis
- monospace type in lower case, remeniscent of computer programming: a key element in many scientific disciplines, particularly climate modelling
- the trailing underscore: again, a nod to computer programming and the hacks that allow leaked documents into the public domain
The logotype can be constructed using the typeface and warming stripes graphic, or downloaded as a single image file or an animated gif.
Images
Our key visual design element, in combination with the warming stripes, is half-tone, black-and-white images from photographs. Half-tone imitates cheap newsprint images and is composed of small black and white dots.
Several basic images in half-tone are provided here, and details are provided of a few methods to make your own half-tone graphics.
Colour
Colours are taken from the warming stripes graphic. Primary colours are indicated with asterisks, and their hex codes are given. Non-asterisked colours are secondary colours. The original warming stripes were created by Ed Hawkins and are shared by a CC BY 4.0 license, and can be found and customised by location at showyourstripes.info.
Halftone Images
I've borrowed from a Codepen to create a pretty decent first crack at halftone images. Just wrap it in a div with this class attached:
<div class="halftone">
<img src="https://assets.scientistrebellion.com/media/images/leo-dont-look-up.original.jpg" class="img-fluid" />
</div>