Skip to content

Instantly share code, notes, and snippets.

@lizkaraffa
lizkaraffa / file.js
Last active Aug 14, 2020
IE11 CSS Grid Workaround
View file.js
// Vanilla JS version (only use one)
// this will inject new style rules into the body of the page
// see: https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/
function injectIE11Grid(){
var ieRules = '';
var css = document.createElement('style');
var head = document.head || document.getElementsByTagName('head');
css.type = 'text/css';
for ( var i=1; i <= document.querySelectorAll('.entry-content > *').length; i++){
View _media-queries.scss
/* Be sure to set these in your variables partial for this mixin to work
* $mobile_width
* $tablet_width
* $desktop_width
* $wpadmin_width
*/
@mixin media( $res ) {
@if mobile == $res {
View editor-styles.scss
/* Unfortunately, Gutenberg keeps iterating through and changing their class names
* As of Aug 13, 2020 the following code works in the latest version of the Gutenberg PLUGIN
* See below to find the code that works for the latest version of Gutenberg baked into the latest version of WordPress
*/
/* Gutenberg Plugin Version */
.block-editor-block-list__layout {
// Unfortunately, Gutenberg uses .block-editor-block-list__layout in all blocks too
// We only want to target the main container where all blocks are direct children
// Thus we need :first-of-type
View _post-and-pages.scss
/* This sets the alignment for all Gutenberg regular, wide and full width content in the Front End */
// Change .entry-content to whatever class wraps your content
.entry-content {
@include gridSection();
& > * {
@include regularContentMaxWidth();
&.alignwide {
@lizkaraffa
lizkaraffa / _mixins.scss
Last active Aug 13, 2020
Mixin Partial
View _mixins.scss
@mixin gridSection {
display: grid;
grid-template-columns: $size__mobile-grid;
@include media(tablet) {
grid-template-columns: $size__tablet-grid;
}
@include media(desktop) {
grid-template-columns: $size__desktop-grid;
View _structure.scss
$size__site-gutter-mobile: 20px;
$size__site-gutter-tablet: 50px;
$size__max-site-width: 1600px;
// Site Columns
$site__content-columns-mobile: 2;
$site__content-columns-tablet: 8;
$site__content-columns-desktop: 15;
// Grid Widths
@lizkaraffa
lizkaraffa / travel-time.html
Last active May 15, 2019
Travel Time Markup
View travel-time.html
<section class="tp-travel-time tp-block">
<div class="tp-block__container--full">
<h4 class="tp-travel-time__title">Travel Time to Next Destination</h4>
<div class="tp-travel-time__meta">
<span class="tp-travel-time__bike"><span class="tp-svg-icon"></span><span class="tp-travel-time__content">20 minutes by bike</span></span>
<span class="tp-travel-time__transit"><span class="tp-svg-icon"></span><span class="tp-travel-time__content">14 mintues by <a href="#">transit</a></span></span>
</div>
</div>
</section>
@lizkaraffa
lizkaraffa / compiled.scss
Last active Feb 6, 2019
twentynineteen width and margin code
View compiled.scss
//Why vw instead of percentage?
$columns: (
1: calc(1 * (100vw / 12)),
2: calc(2 * (100vw / 12)),
3: calc(3 * (100vw / 12)),
4: calc(4 * (100vw / 12)),
5: calc(5 * (100vw / 12)),
6: calc(6 * (100vw / 12)),
7: calc(7 * (100vw / 12)),
View site.js
/**
* HB Niagara Ryla-WP Child Theme - v0.1.0 - 2018-01-30
* https://zao.is
*
* Copyright (c) 2018;
* Licensed GPLv2+
*/
window.HNC = window.HNC || {};
View checkout.php
<div class="light-wrapper">
<div class="container inner2">
<div class="hb-checkout col2 row">
<div class="col-sm-8 hb-checkout-content">
<div class="isotope row">
<div class="step-1">
<div class="date-selection">
<div class="section-title">
<h2><?php _e( 'Next Steps:', 'hb-ryla-child-theme' ); ?></h2>
<h3><?php _e( 'Choose a date and Select Ticket Quantity.', 'hb-ryla-child-theme' ); ?></h3>
You can’t perform that action at this time.