nathansmith

Recently, I was reminiscing about the <plaintext> tag.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/plaintext

It made me think of trying this silly JS snippet experiment.

Pasting it into the dev tools console will show a "view source" of the page.

document.documentElement.innerHTML =

nathansmith

.wp-block-columns {
	display: flex;
	margin-bottom: $gutter;
	flex-wrap: wrap;
}

@media (min-width: 782px) {
	.wp-block-columns {
		flex-wrap: nowrap;
	}

nathansmith

div.wp-block-buttons {
  /*
    =====
    NOTE:
    =====

    I know this code looks a bit gross.

    But that is more of a reflection upon
    the WordPress block styles themselves.

nathansmith

.flex-parent {
  align-items: center;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;

  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}

nathansmith

import React from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';

// UI.
import SkipLink from '../components/SkipLink';

// Layout.
import AppLayoutFooter from './AppLayoutFooter';
import AppLayoutHeader from './AppLayoutHeader';

nathansmith

Read more here…

https://purgecss.com

---

To install PurgeCSS, run this command.

npm install purgecss --save-dev

nathansmith

html:not([data-has-css-animation='true']) {
	@include remove-css-animation;
}

@media (prefers-reduced-motion: reduce) {
	@include remove-css-animation;
}

nathansmith

import React from 'react';
import { render } from 'react-dom';

// Helper.
const callUseEffect = () => {
  const Noop = () => null;
  const root = document.createElement('div');
  render(<Noop />, root);
};

nathansmith

// ==========================
// `<pre>` and `<code>` tags.
// ==========================

code,
pre,
pre .token[class] {
	font-family: $font-family-mono;
}

nathansmith

// ====================
// Default placeholder.
// ====================

/*
  This is empty by default, but the intent
  is that it would be overwritten by another
  variable for a custom site implementation.
*/