Skip to content

Instantly share code, notes, and snippets.

View jordandobson's full-sized avatar
🥽

Jordan Dobson jordandobson

🥽
142 followers · 192 following
View GitHub Profile
@jordandobson
jordandobson / vignette.css
Created November 25, 2010 09:28
Examples of adding a Vignette to Photos with CSS3 Gradients. Code sampled from: http://cl.ly/3Nxc
/* Border & Vignette Setup */
figure{
position: relative;
display: block;
line-height: 0;
width: 500px;
height: 333px;
margin-bottom: 2em;
border: 1em solid #fff;
@jordandobson
jordandobson / CLS.js
Created June 8, 2011 00:15
Mobile JavaScript Library for HTML Class Attribute Manipulation
(function(document){
window.CLS = window.CLS || {};
CLS.add = function(el, cn){
if(!CLS.exists(el, cn)){
el.className = el.className ? el.className + ' ' + cn : cn;
}
}
@irae
irae / _Stay_standalone.md
Last active April 17, 2025 15:49 — forked from kylebarrow/example.html
Stay Standalone: Prevent links in standalone web apps opening Mobile Safari

#Stay Standalone

A short script to prevent internal links to a "webapp" added to iPhone home screen to open in Safari instead of navigating internally.

@marcedwards
marcedwards / high-dpi-media.css
Last active September 24, 2025 23:32
A CSS media query that captures almost all high DPI aware devices.
/* ---------------------------------------------------------- */
/* */
/* A media query that captures: */
/* */
/* - Retina iOS devices */
/* - Retina Macs running Safari */
/* - High DPI Windows PCs running IE 8 and above */
/* - Low DPI Windows PCs running IE, zoomed in */
/* - Low DPI Windows PCs and Macs running Firefox, zoomed in */
/* - Android hdpi devices and above */
@MikeMcChillin
MikeMcChillin / Full Height & width background video or image
Last active May 31, 2017 10:18
Full height background video / image from FiftyThree Paper
Set inline width & height.
Video, img alternative natural width & height: 1920 x 1080
21mb video O_O
http://codepen.io/MikeMcChillin/pen/wKGFz
@sskylar
sskylar / default.html
Last active October 21, 2017 05:31
Front end site translations with Siteleaf v2 (http://www.siteleaf.com) and jquery.localize.js (https://github.com/coderifous/jquery-localize).
<html>
<body>
<h1 data-localize="{{page.id}}.title">{{page.title}}</h1>
<div data-localize="{{page.id}}.body">
{{content}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
@koenbok
koenbok / qc-framer.js
Created May 14, 2014 15:04
QC Spring Value Converter
var QcValueConverter = {
tensionFromQcValue: function(qcValue) {
return (qcValue - 30.0) * 3.62 + 194.0;
},
qcValueFromTension: function(tension) {
return (tension - 194.0) / 3.62 + 30.0;
},
frictionFromQcValue: function(qcValue) {
@elliottkember
elliottkember / stateAnimationOptions.coffee
Last active March 14, 2019 14:11
Framer.js per-transition animationOptions!
myLayer.states.stateAnimationOptions =
'a-b':
time: 0.1
'b-c':
time: 0.8
'c-d':
time: 0.5
myLayer.states.add
a: opacity: 1
@jordandobson
jordandobson / - Detect Resize
Last active August 29, 2015 14:06
Detect Resize and OS / Device Type
$(window).bind('resize', function(){
var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
if (size.indexOf("break2") !=-1){
// Do stuff for breakpoint 2
} else if (size.indexOf("tablet") !=-1){
// Do stuff for tablet
@stakes
stakes / frameless.coffee
Last active April 14, 2017 21:08
Framer.js module to open prototypes in Frameless
# Add the following line to your project in Framer Studio.
# `frameless = require "frameless"`
frameless = {}
# Directly opens the prototype in Frameless
frameless.open = ->
intent = "frameless://"
url = intent + window.location.host + window.location.pathname + "/"
window.location.replace url