Skip to content

Instantly share code, notes, and snippets.

View ralgh's full-sized avatar

Ralph Hansell ralgh

21 followers · 21 following
  • Acxiom
  • Portsmouth, NH
View GitHub Profile
@ralgh
ralgh / RPS.js
Last active December 22, 2015 00:59 — forked from joehinkle/RPS.js
var
choices = ['rock','paper','scissors'], // Classic version
// choices = ['cockroach','foot','nuke'], // Foot crushes cockroach, nuke blows up foot, cockroach survives nuke.
// choices = ['rock','paper','scissors','spock','lizard'], // Rock-Paper-Scissor-Spock-Lizard version
choicesCount = choices.length,
promptString = (function(choices){
var string = '',
c = choicesCount - 1;
for (var i = 0; i <= c; i++) {
string += (i === 0) ? capitalize(choices[i]) : choices[i];
@ralgh
ralgh / dabblet.css
Last active March 27, 2016 16:23
CSS image crop. Forces image to 4:3 aspect ratio cropping at the middle. http://dabblet.com/gist/4711695
/**
* CSS image crop. Forces image to 4:3 aspect ratio cropping at the middle.
* http://dabblet.com/gist/4711695
*/
.img-crop,
.img-crop img{
width: 100%; /* gotta be responsive these days */
}
.img-crop{
background-color: #ededed; /* some background color for short images */
@ralgh
ralgh / dabblet.css
Created February 4, 2013 23:23
CSS image crop. Forces image to 4:3 aspect ratio cropping at the middle.
/**
* CSS image crop. Forces image to 4:3 aspect ratio cropping at the middle.
*/
.img-crop{
background-color: #ededed;
overflow: hidden;
width: 100%;
}
.img-crop img{
@ralgh
ralgh / gist:4532090
Last active September 8, 2017 01:04
Starting this as a collection of useful data-uri strings.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tiny data-uri image strings</title>
<style>
.image-sample{
border: 1px solid;
}
</style>
</head>
@ralgh
ralgh / 2013-01-13T23:18:38.091Z
Created January 13, 2013 23:18
Testing 123
@ralgh
ralgh / dabblet.css
Created December 21, 2012 00:00
testing units
/**
* testing units
*/
body{
text-align: center;
}
#box{
background-color: red;
display: inline-block;
width: 200px;
@ralgh
ralgh / _respond-to.scss
Created December 4, 2012 17:51
Yet another variation of a respond-to mixin.
// sass 3.2 or higher required
@mixin respond-to($min-width, $max-width: null) {
$fix-mqs: false !default;
// If we're outputting for a fixed media query set...
@if $fix-mqs {
// ...and if we should apply these rules...
@if $max-width != null {
@if (($fix-mqs >= $min-width) and ($fix-mqs <= $max-width)) {
// ...output the content the user gave us.
@ralgh
ralgh / block.tpl.php
Created July 14, 2012 20:04 — forked from pixelwhip/block.tpl.php
Modular Stylesheets - Design 4 Drupal
<?php
/**
* @file
* Default theme implementation to display a block.
*
* Available variables:
* - $block->subject: Block title.
* - $content: Block content.
* - $block->module: Module that generated the block.
@ralgh
ralgh / breakpoints_via_css.html
Created April 29, 2012 20:35 — forked from emilbjorklund/breakpoints_via_css.html
Width detection via sneaky CSS rules
<!DOCTYPE html>
<!--[if IE 8]> <html lang="sv-SE" class="no-js ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="sv-SE" class="no-js"> <!--<![endif]-->
<head>
<meta charset="UTF-8">
<title>Breakpoint detection test</title>
<style type="text/css" media="screen">
@media screen and (min-width: 320px) {
#page:after {
content: 'smallest'; /* represent the current width-bracket */
@ralgh
ralgh / dabblet.css
Created April 5, 2012 02:48
CSS Arrow icons
/**
* CSS Arrow icons
*/
.widget {
overflow: hidden;
position:relative;
text-indent: -999em; /* hide text from view */
}
.widget:before,