Skip to content

Instantly share code, notes, and snippets.

View kevinmpowell's full-sized avatar

Kevin Powell kevinmpowell

View GitHub Profile
@kevinmpowell
kevinmpowell / dabblet.css
Created October 18, 2012 15:11
Android 2.3.4 2d transform bug when 3d transform rule is given
/**
* Android 2.3.4 2d transform bug when 3d transform rule is given
*/
.rotate-me-working {
position:absolute;
left:50%;
top:50%;
-webkit-transform: rotate(45deg);
}

Easy responsive sprites using grunt-spritesmith and SCSS

Requires grunt-spritesmith which generates a spritesheet from a bunch of images.

This gist passes a custom template for spritesmith to generate the SCSS file.

Gruntfile.js

sprite: {
 src: "images/*.png",
# Input strings like "52 lb 6 oz" or "8 oz"
def weight_string_to_float(weight_string)
/(?<lb>[0-9]*\slb\s)*(?<oz>[0-9]*\soz)/ =~ weight_string
lbs = 0
unless lb.nil?
lbs += lb.to_i
end
unless oz.nil?
lbs += (oz.to_i * 0.0625)
@kevinmpowell
kevinmpowell / hero.twig
Last active November 11, 2016 18:59
Nunjucks component macro - NOTE: Had to use .twig file extension since Github Gists don't support .njk :(
{% macro hero(
title="We Are Awesome",
background_image="http://placehold.it/1000x400",
cta_text="Find Out Why!",
cta_href="/some/awesome-link.html"
) %}
<div class="hero" {% if background_image %} style="background-image:url({{ background_image }})" {% endif %}>
<h1 class="hero__title">{{ title }}</h1>
{% if caller %}
{{ caller() }}
@kevinmpowell
kevinmpowell / GIF-Screencast-OSX.md
Created February 17, 2017 14:15 — forked from dergachev/GIF-Screencast-OSX.md
OS X Screencast to animated GIF

OS X Screencast to animated GIF

This gist shows how to create a GIF screencast using only free OS X tools: QuickTime, ffmpeg, and gifsicle.

Screencapture GIF

Instructions

To capture the video (filesize: 19MB), using the free "QuickTime Player" application:

@kevinmpowell
kevinmpowell / string_from_array.njk
Last active November 6, 2017 21:30
Differentiate a string from an array when looping over mixed values in nunjucks
{% set mixed_object = {
key_1: 'Delta',
key_2: 'Epsilon',
key_3: ['Zeta', 'Eta', 'Theta', 'Iota']
} %}
{% for key, value in mixed_objct %}
{% if value[0].length > 1 %}
{# This is an array, do array stuff with it #}
{{ value | join('<br>') | safe }}
{% else %}
$esds-tokens: (
'color': (
'white': $esds-color-white,
'black': $esds-color-black,
'orange': (
'82': $esds-color-orange-82,
'91': $esds-color-orange-91,
'93': $esds-color-orange-93
),
'neutral': (
@kevinmpowell
kevinmpowell / nunjucks_array_push.njk
Created November 9, 2018 19:42
Nunjucks array push without filter
{% set a = (a.push(3),a) %}
{# Copied from: https://github.com/mozilla/nunjucks/issues/240 and added here for findability #}
@kevinmpowell
kevinmpowell / main.js
Created December 11, 2019 17:50
Simple Router Example For Vue
import Vue from 'vue'
import App from './App.vue'
import Form from './Form.vue'
Vue.config.productionTip = false
const NotFound = { template: '<p>Page not found</p>' }
const routes = {
'/': App,
'/form': Form
@kevinmpowell
kevinmpowell / .stylelint.config.json
Last active July 8, 2020 20:32
My stylelint config
{
"extends": [
"stylelint-config-sass-guidelines",
"stylelint-config-prettier"
],
"rules": {
"color-hex-case": "upper",
"color-hex-length": "long",
"selector-class-pattern": "^(?:(?:o|c|u|t|s|is|has|_|js|qa)-)?[a-z0-9]+(?:-[a-z0-9]+)*(?:__[a-z0-9]+(?:-[a-z0-9]+)*)?(?:--[a-z0-9]+(?:-[a-z0-9]+)*)?(?:\\[.+\\])?$",
"max-nesting-depth": 2