Earthwormjimjones earthwormjimjones

:root {
  /* Base color using HSL */
  --hue: 207;
  --saturation: 64%;
  --light: 44%;
  
  /* Base color in variable */
  --primary-color: hsl(var(--hue), var(--saturation), var(--light));
 /* Base color lighten using calc */

Gist markdown examples

A collection of Markdown code and tricks that were tested to work in Gist.

This and all public gists in https://gist.github.com/ww9 are Public Domain. Do whatever you want with it including , no need to credit me.

Todo

Reformat this whole document and assimilate these:

Bootstrap 4 Utilities Cheatsheet

Media Queries

1. up

Bootstrap 4 Mixins	Compiled into
@include media-breakpoint-up(xs)	@media (min-width: 0px)
@include media-breakpoint-up(sm)	@media (min-width: 576px)
@include media-breakpoint-up(md)	@media (min-width: 768px)

It's hard to migrate section themes that rely heavily on images. This bit of code helps you download all the CDN assets of your theme.

Create a cdn_assets folder
Create the download_assets.js file at the root of your project
Edit the download_assets.js file to match the path to your settings_data.json (line 3)
Edit the download_assets.js file to set the "CDN code" of your store. Each file that you upload from /admin/settings/files gets uploaded with the following format: https://cdn.shopify.com/s/files/1/YOUR_CDN_CODE/files/YOURFILE. The format of the code is /\d{4}\/\d{4}/ (four digits, a forward slash, and four digits)

Custom Gutenberg Block

This is a basic custom Gutenberg block. Files explained below.

block.js — We register Custom Gutenberg block here.
editor.css _ Block CSS for the editor.
style.css — Block CSS for the front end.
index.php — Enqueue block's assets for editor and the front end.

Project Title

Simple overview of use/purpose.

Description

An in-depth paragraph about your project and overview of use.

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
	crossorigin="anonymous">

	<?php
	/**
	* @param WP_Query\|null $wp_query
	* @param bool $echo
	* @param array $params
	*
	* @return string\|null
	*
	* UPDATE for Bootstrap 5.0: https://gist.github.com/mtx-z/af85d3abd4c19a84a9713e69956e1507
	*

	{% if product.tags %}
	{% if collection.handle %}
	{% assign collection_scope = collection.handle %}
	{% else %}
	{% assign collection_scope = 'all' %}
	{% endif %}
	<ul class="product-tags">
	<li>Tags: </li>
	{% for tag in product.tags %}
	{% capture url %}/collections/{{ collection_scope }}/{{ tag \| handleize }}{% endcapture %}

	/* Client side, works in Chrome 55 and Firefox 52 without transpilation */
	//https://blogs.msdn.microsoft.com/typescript/2016/11/08/typescript-2-1-rc-better-inference-async-functions-and-more/
	async function fetchURLs() {
	try {
	// Promise.all() lets us coalesce multiple promises into a single super-promise
	var data = await Promise.all([
	/* Alternatively store each in an array */
	// var [x, y, z] = await Promise.all([
	// parse results as json; fetch data response has several reader methods available:
	//.arrayBuffer()