Skip to content

Instantly share code, notes, and snippets.

View philwolstenholme's full-sized avatar

Phil Wolstenholme philwolstenholme

View GitHub Profile
{# List out all the classes we *may* want to use, so they are not purged #}
{% set spacing_levels = {
1: 'u-o-1',
2: 'u-o-2',
3: 'u-o-3',
4: 'u-o-4',
5: 'u-o-5',
6: 'u-o-6',
7: 'u-o-7',
8: 'u-o-8',
<img
style="
background: no-repeat center/cover
url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\' viewBox=\'0 0 50 50\'%3e %3cfilter id=\'b\' color-interpolation-filters=\'sRGB\'%3e %3cfeGaussianBlur stdDeviation=\'.9\'%3e%3c/feGaussianBlur%3e %3cfeComponentTransfer%3e %3cfeFuncA type=\'discrete\' tableValues=\'1 1\'%3e%3c/feFuncA%3e %3c/feComponentTransfer%3e %3c/filter%3e %3cimage filter=\'url%28%23b%29\' preserveAspectRatio=\'none\' height=\'100%25\' width=\'100%25\' xlink:href=\'data:image/png%3bbase64%2ciVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAIAAAASFvFNAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAHElEQVQImWNsbulgZPjHzc3PcvvOXYb/f/n4hABJ6gd39LTd2AAAAABJRU5ErkJggg==\'%3e %3c/image%3e %3c/svg%3e');
"
data-blurhash
src="/sites/default/files/2021-03/photo-1485304018316-1ff471aa1369.jpeg"
width="2850"
height="1900"
alt="Fire"
@philwolstenholme
philwolstenholme / example.js
Last active December 23, 2020 20:02
One example of working around the '100vw includes scrollbar width' issue
const width = window.innerWidth - document.documentElement.clientWidth;
const root = document.documentElement;
root.style.setProperty('--scrollbar-width', `${width}px`);
@philwolstenholme
philwolstenholme / ######-phil-wolstenholme-drupalcon-europe-2020-utility-first-css.md
Last active November 1, 2021 09:18
Phil Wolstenholme - DrupalCon Europe 2020 - Utility-first CSS

Hello DrupalCon! 👋

Here's a big dump of code examples from my slides, plus some examples that didn't make it to the final cut.

The snippets should be organised by slide number, e.g. #46--_search.scss is the snippet of search-related SCSS shown on slide 46.

My slides

Here's a PDF of my slides (via Google Drive) for your reference, or if Zoom goes wrong!

(function randomSkinTone() {
const fitzPatrickTones = [
'#ffe2cc',
'#fadbaf',
'#e5bd95',
'#bf8b60',
'#98562e',
'#673929',
];
@philwolstenholme
philwolstenholme / first-time-using-min-aspect-ratio.scss
Created April 16, 2020 19:28
Using a combination of the orientation and min-aspect-ratio media queries to make sure a 16:9 video always fits inside a modal (at all screen sizes and orientations) without any content being cut off
@media (orientation: landscape) {
// 1.77 represents the 16/9 aspect ratio.
// 95vh / 1.77 gives us the max height our video can be to guarantee
// its width won't be too large to fit on some awkward viewport dimensions.
// 95vh / 1.77 = 53.672316384, and 53.672316384 * 1.77 = 95.
// This is <100, so this stops our video ever being too wide to fit on the screen.
width: calc((95vh / 1.77) * 1.77);
height: calc(95vh / 1.77);
}
@philwolstenholme
philwolstenholme / classListToCommaAndNewLineSeparatedString.js
Created July 15, 2019 10:49
Take the CSS classes of the currently selected DOM node in Chrome devtools and output it as a comma and newline separated string ready to paste into an array
$0.classList.toString().split(" ").map(utilityClass => `'${utilityClass.trim()}',`).join('\n')
javascript:window.location=(jQuery("link[rel='shortlink']").attr('href') + '/edit')