HTML and CSS snippets to jazz up your site

November 06 2019
HTML and CSS snippets to jazz up your site


Tabs are a great way to display information that you might want to compare side-by-side. The horizontal layout also helps to save on space. I always opt for the Bootstrap tabsets, as they are very easy and consistent to implement:

To make this:

<div class="container">
<!-- Nav tabs -->
<ul class="nav nav-pills nav-justified" role="tablist">

<li class="nav-item active">
<a class="nav-link active" data-toggle="tab" href="#tab1"><font size="+2"><b>Tab 1</b></font></a>

<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab2"><font size="+2"><b>Tab 2</b></font></a>

<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab3"><font size="+2"><b>Tab 3</b></font></a>


<!-- Tab panes -->
<div class="tab-content">
<div id="tab1" class="container tab-pane active">
Tab 1 content

<div id="tab2" class="container tab-pane fade">
Tab 2 content

<div id="tab3" class="container tab-pane fade">
Tab 3 content


Floating page outline

When the page has a lot of content, it is very helpful to include a floating table of contents on the side of the page that shows the reader where they are. You can see an example of this on the left!

After experimenting with a few options, I found that the steps outlined here by Aidan Feldman work most easily and the best for Blogdown sites:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>

<body data-spy="scroll" data-target="#toc"> 
<div class="container">
<div class="row">
<!-- sidebar, which will move to the top on a small screen -->
<div class="col-sm-2">
<nav id="toc" data-toggle="toc" class="sticky-top" style='padding-top:40px'></nav>
<!-- main content area -->
<div class="col-sm-10">

<!-- Page content -->


If there are headings that you do not want to be included in the outline, you can change the header HTML tag, like <h2>, to <h2 data-toc-skip>.

Style code blocks

I love the ability to use both Python and R code in a single Rmarkdown post on Blogdown sites. With that, it would be nice to be able to easily visually distinguish Python and R code blocks. Here are the CSS stylings that I use in my sites:

code{                /* Base styling for all code blocks */
  padding: 3px 5px;
  background: #ffffff; 
  border: 1px solid $border-color;
  border-radius: 3px;
  color: $text-color-dark;

.python {              /* This can be any other language, ex. R, HTML, CSS */
  background: #ffffff; 
  border-color:  #F6B156;
  border-style: dotted;
  page-break-inside: avoid;
  font-family: monospace;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1em 1.5em;
  display: block;
  word-wrap: break-word;