Skip to content

Instantly share code, notes, and snippets.

@iamkeir
iamkeir / thing.css
Last active Oct 5, 2021
Fade in/out - CSS only
View thing.css
.thing {
transform: scale(0);
opacity: 0;
/* closing: delay transform scale by the duration of opacity fade */
transition: opacity 0.2s ease-in-out, transform 0s 0.2s;
}
.thing-show {
transform: none;
View fs.js
<script>
(function() {
var createCookie = function() {
var cookVal = Math.floor(Math.random() * 1000); //MAX RANDOM NUMBER TO BE GENERATED
document.cookie = "run_fs_for_user=" + cookVal + ";domain=bowercollective.com;path=/";
return cookVal;
};
var getCookie = function() {
var dc = document.cookie;
var prefix = "run_fs_for_user=";
View thing.html
<!doctype html>
<html class="no-js" lang="en-gb">
<head>
<!--js styling hook-->
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, height=device-height, minimum-scale=1.0, user-scalable=0" />
@iamkeir
iamkeir / gist:5365c05865d98e35afe8a74ba9db7ef1
Created Nov 20, 2019
Example config.yml for use with Themekit
View gist:5365c05865d98e35afe8a74ba9db7ef1
feature-name:
password: XXXXXXXXXX
theme_id: "XXXXXXXXXX"
store: xxxxxx.myshopify.com
timeout: 2m
ignore_files:
# Optiona: Ignore admin-changeable data to keep it safe
- settings_data.json
- locales/*
# Optional: ignore Slate-generated files so we can utilise Themekit commands, e.g. theme download
View section-home-hero.liquid
{% comment %}SECTION{% endcomment %}
{%
include 'hero'
hero_title: section.settings.title
%}
{% schema %}
{
"name": "Product hero",
@iamkeir
iamkeir / product-hero.liquid
Created Nov 20, 2019
Shopify: Dynamic section hack
View product-hero.liquid
{% comment %}Workaround for dynamic sections outside of homepage{% endcomment %}
{% for block in section.blocks %}
{% if product.handle == block.settings.product %}
{%
include 'hero'
hero_title: block.settings.title
%}
{% endif %}
@iamkeir
iamkeir / product-hero.liquid
Created Nov 20, 2019
Shopify: Dynamic section hack
View product-hero.liquid
{% comment %}Workaround for dynamic sections outside of homepage{% endcomment %}
{% for block in section.blocks %}
{% if product.handle == block.settings.product %}
{%
include 'hero'
hero_title: block.settings.title
%}
{% endif %}
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Portfolio</title>
<link href="assets/css/main.css" rel="stylesheet" />
</head>
<body>
@iamkeir
iamkeir / readme.md
Last active Oct 25, 2017
Pattern Library workshop - follow-up resources
View readme.md
View image2.liquid
{% comment %}
image2.liquid
PURPOSE
- Output images in a consistent manner, with optional Shopify filters and srcset responsiveness
- Can be used on both Shopify image objects AND raw image URLs
SETUP
- Place .liquid file in your project snippet folder and call it from anywhere:
{% include 'image' img: product.featured_image %}