HTML and CSS snippets to jazz up your site
Having made a few websites/web apps using Django, Blogdown and Shiny, some HTML and CSS snippets have turned out to be useful time and time again. Not being professional front-end developers, we thought it would probably be a good idea to create an easy-to-reference repository of them for future projects.
Navigation
Tabs
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>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab2"><font size="+2"><b>Tab 2</b></font></a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab3"><font size="+2"><b>Tab 3</b></font></a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="tab1" class="container tab-pane active">
Tab 1 content
</div>
<div id="tab2" class="container tab-pane fade">
Tab 2 content
</div>
<div id="tab3" class="container tab-pane fade">
Tab 3 content
</div>
</div>
</div>Floating 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:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link
rel="stylesheet"
href="https://cdn.rawgit.com/afeld/bootstrap-toc/v1.0.1/dist/bootstrap-toc.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/afeld/bootstrap-toc/v1.0.1/dist/bootstrap-toc.min.js"></script>
</head>
<body>
<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>
</div>
<!-- main content area -->
<div class="col-sm-10">
<!-- Page content -->
</div>
</div>
</div>
</body>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>.
Styling
Font size
The font size of specific sections of text can be altered, either by relative change:
<font size="+2">This is bigger text.</font>Or by setting the absolute size (1-7):
<font size="1">This is really tiny text.</font>Code blocks
We 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 some CSS stylings used on this site:
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 {
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;
}
.r {
background: #ffffff;
border-color: #03d944;
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;
}