SimonPadbury

// Example: Set your color variables

$color--gray:          #888888;
$color--blue:          #3366FF;
$color--teal:          #43E7F9;
$color--green:         #5BD642;
$color--orange:        #ffae18;
$color--red:           #FF4732;

// Example: Set a color shade step interval

SimonPadbury

.sticky {
  position: absolute;
  right: 0;
  z-index: 150;
  transform: rotate(5deg);
  width: 200px;
  min-height: 150px;
  margin: -10px 10px 10px;
  padding: 10px;
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", cursive;

SimonPadbury

/* Responsive Container (because Bootstrap 4.0.0 doesn't have this) */

.container-responsive {
	width: 100%;
	max-width: 1140px;
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}

SimonPadbury

<!--
Just put this at the inside your closing </body> tag.
Vanilla JavaScript.
-->

<div id="vp" style="position: fixed; bottom: 0.5rem; right: 0.5rem; z-index: 999; display: inline-block; background: #555; color: #ffffff; padding: 0 0.5rem 0.125rem; border-radius: 0.25rem;"></div>

<script>
  var vp = document.body.querySelector('#vp');
  var viewportWidth = window.innerWidth + 'px';

SimonPadbury

/**
 * Iterating from Andy Bell's full-bleed CSS utility (https://hankchizljaw.com/wrote/creating-a-full-bleed-css-utility/)
 * simply set a max-width for those blocks you want to be wider than your centered prose column.
 * Useful if you have an image (or background image) that doesn't look good on massively wide viewports.
 */

.partial-bleed {
  width: 100vh;
  max-width: 1200px; /* example assumes your main prose max-width is e.g. 800px */
  margin-left: 50%;

SimonPadbury

/*
Navbar "hovernav" dropdown menu - this works only for screen sizes larger than phones.
The Bootstrap CSS is unchanged.
*/
@media (min-width: 768px) {
  .navbar-nav .open ul {
    display: none;
  }
  .navbar-default .navbar-nav > .open > a,
  .navbar-default .navbar-nav > .open > a:hover,

SimonPadbury

Container Query (max-width)

This tiny JavaScript (no jQuery etc. required) looks for every data attribute data-max-width and records its value (that you set, in pixels). Example:

<div data-max-width="1000" class="my-container">
  ...
</div>

SimonPadbury

.container-responsive {
	width: 100%;
	max-width: 1140px;
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}

.navbar > .container-responsive {

SimonPadbury

#your-thing-id.your-toggle-class {
  /*
  Any styling you like can go in here, for example...
  */
  background: yellow;
}

SimonPadbury

<?php

/*
Bootstrap 4.0.0-alpha2 nav walker extension class
=================================================
Add this to your `functions.php`
*/

class bootstrap_4_walker_nav_menu extends Walker_Nav_menu {