Skip to content

Instantly share code, notes, and snippets.

@dsamson
dsamson / gist:6b6dd31a2fab112b77f1
Last active August 29, 2015 14:15
CSS BOOTSTRAP: No Column Gutters
/* Extending Bootstrap */
.row.no-gutters { margin-right: 0; margin-left: 0; }
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] { padding-right: 0; padding-left: 0; }
@dsamson
dsamson / gist:7df26ed7905e4d4d501f
Created December 5, 2014 15:17
CSS: Vertical align any element (Ghost element)
/* Vertical align any element */
.ghostCenter {
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.ghostCenter:before {
content: '';
display: inline-block;
zoom: 1; *display: inline; /* inline-block IE fix */
@dsamson
dsamson / gist:dad98a6e6c19abb3c792
Last active August 29, 2015 14:10
Javascript: Parallax Position
// Parallax
function parallaxPosition() {
var scrollDistance = $(window).scrollTop();
var newDistance = (scrollDistance / 4);
$('.parallax').css('background-position', 'center ' + newDistance + 'px');
console.log('test');
}
@dsamson
dsamson / gist:2af16ca674e64b95f977
Created November 20, 2014 12:39
Javascript: Detect Touch device
/* detect touch */
if("ontouchstart" in window){
document.documentElement.className = document.documentElement.className + " touch";
}
if(!$("html").hasClass("touch")){
// Do stuff
}
/* FIREFOX TWEAKS */
:active {
outline: none;
}
:focus {
-moz-outline-style: none;
}
:-moz-any-link:focus {
outline: none;
}
@dsamson
dsamson / gist:96a4e87781a9202bcf90
Created October 20, 2014 02:52
CSS BOOTSTRAP: Vertically center columns
.row.row-center > div {
display: inline-block;
zoom: 1; *display: inline; /* inline-block IE fix */
margin-right: -4px; /* inline-block whitespace fix */
float: none !important;
vertical-align: middle;
}
@dsamson
dsamson / gist:dbf247fbe4a1dc83e45b
Created October 20, 2014 02:44
CSS: Absolute centering
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
@dsamson
dsamson / responsive-videos.css
Last active August 29, 2015 14:07
CSS: Responsive video
/* ----- Responsive Videos (16:9 ratio) ----- */
.responsive-video {
position: relative;
padding-bottom: 56.25%;
height: 0;
}
.responsive-video iframe,
.responsive-video object,
.responsive-video embed {
position: absolute;
@dsamson
dsamson / gist:56f0f862cda7e23cd52c
Last active August 29, 2015 14:07
CSS: Image Replacement
.ir {
border: 0;
font: 0/0 a;
text-shadow: none;
color: transparent;
background-color: transparent;
}
@dsamson
dsamson / gist:3ff5a1acbb53153adbf1
Last active August 29, 2015 14:07
HTML: Starting template
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title></title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>