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

// 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

/**
 * 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

<!--
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';