Keir iamkeir

## gist:757913
<?php

// TWEED: Twitter feed parser
function Tweed ($user, $limit = NULL) {

	$tweedURL = 'http://search.twitter.com/search.atom?q=from:' . $user; // Twitter RSS feed URL
	$tweedXML = simplexml_load_file($tweedURL); // Convert RSS to XML

	$count = 0; // Set count


## gist:5362365
#!/usr/bin/env ruby
message_file = ARGV[0]
message = File.read(message_file)

def range_rand(min,max)
  min + rand(max-min)
end

bads = [
  "Yeah, bitch! Magnets!",

## _nav.scss
// NAV HELPER
// Use @extend %nav etc. for leaner CSS
@mixin nav($type:null) {
  @if $type == "reset-first" {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }
  @else {
    margin: 0;

## _font-face.scss
// Lazy font-face generator
// @TODO: Consider additional mixin parameter to specify which font filetypes to output, e.g. "eot, woff"
@mixin font-face($label,$font) {
  @font-face {
    font-family: $label;
    src: url('#{$font_path}#{$font}.eot');
    src: url('#{$font_path}#{$font}.eot?#iefix') format('embedded-opentype'),
         url('#{$font_path}#{$font}.woff') format('woff'),
         url('#{$font_path}#{$font}.ttf') format('truetype'),
         url('#{$font_path}#{$font}##{$label}') format('svg');

## _fraction-grid.scss
/*
  FRACTION GRID
  Fixed gutter, fluid width grid - infinite columns, nesting, overrides, etc.
  Inspired by http://builtbyboon.com/blog/proportional-grids
*/

// @OPTIMISE: larger/smaller + fluid gutters...

$w-gutter: 20px !default;
$w-max: 1000px !default;

## section-product.liquid
{% for block in section.blocks %}

  <!-- Could also work with collections, blogs, articles... -->
  {% if product.handle == block.settings.product %}

    <!-- Could also be a snippet include -->
    {{ block.settings.product['some_value'] }}

  {% endif %}
{% endfor %}

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

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


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

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

	<body>

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

	// TWEED: Twitter feed parser
	function Tweed ($user, $limit = NULL) {

	$tweedURL = 'http://search.twitter.com/search.atom?q=from:' . $user; // Twitter RSS feed URL
	$tweedXML = simplexml_load_file($tweedURL); // Convert RSS to XML

	$count = 0; // Set count
	#!/usr/bin/env ruby
	message_file = ARGV[0]
	message = File.read(message_file)

	def range_rand(min,max)
	min + rand(max-min)
	end

	bads = [
	"Yeah, bitch! Magnets!",
	// NAV HELPER
	// Use @extend %nav etc. for leaner CSS
	@mixin nav($type:null) {
	@if $type == "reset-first" {
	margin-left: 0;
	padding-left: 0;
	border-left: 0;
	}
	@else {
	margin: 0;
	// Lazy font-face generator
	// @TODO: Consider additional mixin parameter to specify which font filetypes to output, e.g. "eot, woff"
	@mixin font-face($label,$font) {
	@font-face {
	font-family: $label;
	src: url('#{$font_path}#{$font}.eot');
	src: url('#{$font_path}#{$font}.eot?#iefix') format('embedded-opentype'),
	url('#{$font_path}#{$font}.woff') format('woff'),
	url('#{$font_path}#{$font}.ttf') format('truetype'),
	url('#{$font_path}#{$font}##{$label}') format('svg');
	/*
	FRACTION GRID
	Fixed gutter, fluid width grid - infinite columns, nesting, overrides, etc.
	Inspired by http://builtbyboon.com/blog/proportional-grids
	*/

	// @OPTIMISE: larger/smaller + fluid gutters...

	$w-gutter: 20px !default;
	$w-max: 1000px !default;
	{% for block in section.blocks %}

	<!-- Could also work with collections, blogs, articles... -->
	{% if product.handle == block.settings.product %}

	<!-- Could also be a snippet include -->
	{{ block.settings.product['some_value'] }}

	{% endif %}
	{% endfor %}
	{% 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 %}
	<!DOCTYPE html>
	<html lang="en">

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

	<body>
	{% 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 %}