Skip to content

Instantly share code, notes, and snippets.

@keithdevon
keithdevon / hd-gutenberg-column-fix.css
Last active December 18, 2020 22:26
Gutenberg columns block alignment fix
:root {
--gutter: 32px;
}
@media screen and (min-width: 782px) {
/* For the '25's' in the 25 / 50 / 25 variation */
.wp-block-column[style='flex-basis:25%'] {
flex-basis: calc(var(--gutter) * 2) !important;
@keithdevon
keithdevon / _grid-overlay.scss
Created March 27, 2018 09:39
Styling for the Neat 2 grid overlay
/*
* Layout debugging display
*/
body {
&.env--local {
.grid-overlay {
display: none;
position: fixed;
z-index: 99999999;
@keithdevon
keithdevon / grid-overlay.php
Created March 27, 2018 09:33
Function to append a grid overlay div to the body depending on the environment
<?php
/**
* This function appends a grid overlay div to the body depending on the environment.
*
*/
function tgf_add_grid_overlay_debugging_helper() {
if ( WP_LOCAL ) {
// echo the script
@keithdevon
keithdevon / _layout.scss
Last active March 27, 2018 09:55
Updated _layout.scss file to output all Neat grid settings at each breakpoint
/*
* Layout debugging display
*/
body {
&.env--local {
.site-wrapper {
&:after {
content: 'default';
position: fixed;
<?php
/**
* This function appends a class to the body depending on the environment.
*
* @param array $classes current body classes.
*
* @return array $classes any modification to the class array.
*/
function tgf_add_environment_class( $classes ) {
@keithdevon
keithdevon / _layout.scss
Last active March 27, 2018 09:53
Adds breakpoint debugging output when using Neat 2 grid system
/*
* Layout debugging display
*/
body {
&.env--local {
&:after {
content: 'default';
position: fixed;
bottom: 0;
right: 0;
@keithdevon
keithdevon / plugin-template.php
Created August 20, 2015 10:07
WordPress Plugin template with conditional style/script loading
<?php
/*
Plugin Name: Plugin Name
Description: Description
Version: 0.1
Author: White Rock Design
Author URI: http://keithdevon.com
*/
// block direct access
@keithdevon
keithdevon / svg-img.html
Created May 13, 2015 13:29
SVG image with PNG fallback
<img src="tomato.svg" onerror="this.src='tomato.png'; this.onerror=null;">
@keithdevon
keithdevon / add_link_to_custom_excerpts
Created January 15, 2015 11:02
Add read more link to custom excerpts