Keir iamkeir

## 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;

## 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=";

## 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" />

## 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 %}

## 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

## section-home-hero.liquid
{% comment %}SECTION{% endcomment %}

{%
  include 'hero'
    hero_title: section.settings.title
%}

{% schema %}
  {
    "name": "Product hero",

## 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 %}

## 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 %}

## index.html
<!DOCTYPE html>
<html lang="en">

	<head>
		<title>My Portfolio</title>
		<link href="assets/css/main.css" rel="stylesheet" />
	</head>

	<body>

## readme.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              1 star
            
          
                iamkeir
                / readme.md
            
            
              Last active
              October 25, 2017 11:29
            
              
                Pattern Library workshop - follow-up resources
              
          
    Pattern Library workshop - follow-up resources:

My pattern library talk:


https://speakerdeck.com/iamkeir/pattern-libraries-how-to-make-your-backend-love-your-frontend
https://www.youtube.com/watch?v=Ah6_w6aVho8

My pattern library basis to play with:


https://bitbucket.org/iamkeir/pattern-library-workshop-base

Pattern library frameworks
	.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;
	<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=";
	<!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" />
	{% 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 %}
	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
	{% comment %}SECTION{% endcomment %}

	{%
	include 'hero'
	hero_title: section.settings.title
	%}

	{% schema %}
	{
	"name": "Product hero",
	{% 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 %}
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<title>My Portfolio</title>
	<link href="assets/css/main.css" rel="stylesheet" />
	</head>

	<body>