Skip to content

Instantly share code, notes, and snippets.

View allanwhite's full-sized avatar

Allan White allanwhite

View GitHub Profile
@allanwhite
allanwhite / G+ metadata
Last active May 6, 2024 05:18
A Jade snippet for spitting out Open Graph meta tags based on a simple array. Note: various social networks have different requirements about images, etc.
- var site = {title: 'site name', url: 'http:site.com', image: '/images/thumbnail-site-square.jpg', favicon: '/favicon.ico', description: 'Site Description'}
each val, key in site // Open Graph metadata
meta(property='og:'+'#{key}', content='#{val}')
@allanwhite
allanwhite / Iterate text layer, save to png
Last active May 6, 2024 05:19
This is a Photoshop .jsx script that will iterate & change a number in a text layer, and save-to-web files in a preset path.
function sfwPNG24(saveFile){
var pngOpts = new ExportOptionsSaveForWeb;
pngOpts.format = SaveDocumentType.PNG
pngOpts.PNG8 = false;
pngOpts.transparency = true;
pngOpts.interlaced = false;
pngOpts.quality = 100;
activeDocument.exportDocument(new File(saveFile),ExportType.SAVEFORWEB,pngOpts);
}
@allanwhite
allanwhite / HSQ-brand-colors-2015.markdown
Last active May 6, 2024 05:19
HSQ Brand colors, 2015

HSQ Brand colors, 2015

Current as of Dec. 29 2014. These colors are going to drive the new healthsparq.com, which will be launched in early 2015.

A Pen by Allan White on CodePen.

License.

@allanwhite
allanwhite / _dynamic-color-list.scss
Last active August 29, 2015 14:19
Generated by SassMeister.com.
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
$gray-base: hsl(30, 7%, 0%);
$steps: 12;
@for $c from 1 through $steps{
$theColor: adjust-color($gray-base, $lightness: ($c * (100 / $steps)));
// can we generate global variables at this stage?
@allanwhite
allanwhite / font-stack-generator.jade
Last active August 29, 2015 14:20
Generated by SassMeister.com.
- var fontlist = [{name: 'Black', style: 'normal', weight: 900},{name: 'BlackItalic', style: 'italic', weight: 900},{name: 'Heavy', style: 'normal', weight: 800},{name: 'HeavyItalic', style: 'italic', weight: 800},{name: 'Bold', style: 'normal', weight: 700},{name: 'BoldItalic', style: 'italic', weight: 700},{name: 'Semibold', style: 'normal', weight: 600},{name: 'SemiboldItalic', style: 'italic', weight: 600},{name: 'Medium', style: 'normal', weight: 500},{name: 'MediumItalic', style: 'italic', weight: 500},{name: 'Regular', style: 'normal', weight: 400},{name: 'Italic', style: 'italic', weight: 400},{name: 'Light', style: 'normal', weight: 300},{name: 'LightItalic', style: 'italic', weight: 300},{name: 'Thin', style: 'normal', weight: 100},{name: 'ThinItalic', style: 'italic', weight: 100},{name: 'Hairline', style: 'normal', weight: 100},{name: 'HairlineItalic', style: 'italic', weight: 100}]
each font, n in fontlist
p(class='Lato-'+fontlist[n].name) #{fontlist[n].name} #{fontlist[n].weight}
@allanwhite
allanwhite / share.html
Last active May 6, 2024 05:19
Lean Share Icons (a partial for Statamic CMS)
<h2 class="subhead">Share this!</h2>
<p class="icons"><!-- there's some styling for icons here; lots of ways to solve this. See font-awesome for icons -->
<a href="https://twitter.com/intent/tweet?text={{ site_name }}: {{ title|truncate:100 }}&url={{ permalink }}&related={{ twitteruser }}" target="_blank"><i class="icon-twitter"></i> </a>
<a href="http://www.facebook.com/sharer.php?s=100
&p[url]={{ permalink }}
{{ if image_featured_thumb }}&p[images][0]={{ image_featured_thumb }}{{ endif }}
&p[title]={{ site_name }}: {{ title }}
&p[summary]={{ summary|truncate:200 }}"><i class="icon-facebook"></i> </a>
<a href="https://plus.google.com/share?url={{ permalink }}"><i class="icon-google-plus"></i></a>
<a href="http://www.linkedin.com/shareArticle?mini=true&url={{ permalink }}&title={{ title }}|{{ site_name }}&summary={{ summary|truncate:100 }}" title="_blank"><i class="icon-linkedin"></i> </a>
@allanwhite
allanwhite / hsq-settings.scss
Last active August 29, 2015 14:23
A list of sass variables, mixins, extends, and global settings for codepens.
$gray-1: hsl(30, 4%, 8%);
$gray-2: hsl(30, 4%, 16%);
$gray-3: hsl(30, 4%, 25%);
$gray-4: hsl(30, 4%, 33%);
$gray-5: hsl(30, 4%, 41%);
$gray-6: hsl(30, 4%, 50%);
$gray-7: hsl(30, 4%, 58%);
$gray-8: hsl(30, 4%, 66%);
$gray-9: hsl(30, 4%, 75%);
$gray-10: hsl(30, 4%, 83%);
@allanwhite
allanwhite / numbers.jade
Created October 1, 2015 18:00
Generate numbers 1-N
- for (var c = 1; c < 500; c++)
if c < 10
div 00#{c}
else if c <100
div 0#{c}
else
div #{c}
$gray-1: hsl(225, 4%, 8%);
$gray-2: hsl(225, 4%, 16%);
$gray-3: hsl(225, 4%, 25%);
$gray-4: hsl(225, 4%, 33%);
$gray-5: hsl(225, 4%, 41%);
$gray-6: hsl(225, 4%, 50%);
$gray-7: hsl(225, 4%, 58%);
$gray-8: hsl(225, 4%, 66%);
$gray-9: hsl(225, 4%, 75%);
$gray-10: hsl(225, 4%, 83%);
@allanwhite
allanwhite / boilerplate-proof.scss
Last active February 18, 2016 18:37
Basic SASS variables & functions for a page mockup (Proof).
$gray-1: hsl(248, 3%, 8%);
$gray-2: hsl(248, 3%, 16%);
$gray-3: hsl(248, 3%, 25%);
$gray-4: hsl(248, 3%, 33%);
$gray-5: hsl(248, 3%, 41%);
$gray-6: hsl(248, 3%, 50%);
$gray-7: hsl(248, 3%, 58%);
$gray-8: hsl(248, 3%, 66%);
$gray-9: hsl(248, 3%, 75%);
$gray-10: hsl(248, 3%, 83%);