Skip to content

Instantly share code, notes, and snippets.

@bendc
bendc / easing.css
Created September 23, 2016 04:12
Easing CSS variables
:root {
--ease-in-quad: cubic-bezier(.55, .085, .68, .53);
--ease-in-cubic: cubic-bezier(.550, .055, .675, .19);
--ease-in-quart: cubic-bezier(.895, .03, .685, .22);
--ease-in-quint: cubic-bezier(.755, .05, .855, .06);
--ease-in-expo: cubic-bezier(.95, .05, .795, .035);
--ease-in-circ: cubic-bezier(.6, .04, .98, .335);
--ease-out-quad: cubic-bezier(.25, .46, .45, .94);
--ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
https://github.com/Snugug/eq.js
https://github.com/tysonmatanich/elementQuery
http://eqcss.github.io/eqcss/
$ = jQuery
$.fn.lineHeight or= ->
if height = @data('lineHeight')
return height
# Create a hidden div with the same font
# properties, then measure its height
$shadow = $('<span />')
$shadow.css({
@mikedidthis
mikedidthis / no-frills-social-sharing-urls.md
Last active May 3, 2024 19:39
No Frills Social Sharing URLs

###No Frills Social Sharing URLs

Not a huge fan of share buttons in general, but people seem to like them. Below is a list of social networks and their respective, good ol' fashion, URLs for sharing content.

[TITLE] indicates where to add your own title, url, description etc. Do not include the square brackets.

Feel free to add / update them, either in the comments or a fork.

Facebook
@dypsilon
dypsilon / frontendDevlopmentBookmarks.md
Last active May 7, 2024 01:27
A badass list of frontend development resources I collected over time.
@toddmotto
toddmotto / gist:5477991
Created April 28, 2013 18:56
Center Google Maps Marker positioning on window.resize
google.maps.event.addDomListener(window, 'resize', function() {
var center = map.getCenter()
google.maps.event.trigger(map, "resize")
map.setCenter(center)
})
@stinoga
stinoga / index.html
Last active December 16, 2015 10:48
Responsive Google Maps
<section class="map cf">
<header>
<h3>Super Responsive Map</h3>
</header>
<div class="map" id="map"></div>
<ul class="mapinfo"></ul>
</section>
@roboshoes
roboshoes / _cover-background.scss
Last active December 13, 2015 22:09
This let's you set a background image with background-size set to cover and have it working down to IE8 (I believe also IE7?!). It's based on SCSS and uses Compass (http://compass-style.org/). There is one little flaw: while the `url()` is reltive to the css file the filter is relative to the HTML document. The whole "../../" is not really clean…
@mixin cover-background( $path ) {
background-image: url( "../../" + $path );
@include background-size( cover );
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + $path + "', sizingMethod='scale')";
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="", sizingMethod="scale");
}
@madrobby
madrobby / gist:3161015
Created July 22, 2012 20:43
Detect retina support. Tested on iOS, Android 2.x, Chrome for Android, Safari on MacBook Pro Retina, Firefox mobile (beta) for Android, Opera Mobile (Android)
function isRetina(){
return (('devicePixelRatio' in window && devicePixelRatio > 1) ||
('matchMedia' in window && matchMedia("(min-resolution:144dpi)").matches))
}
@scottjehl
scottjehl / getViewportSize.js
Created March 16, 2012 19:25
Reliably get viewport dimensions in JS
/*!
An experiment in getting accurate visible viewport dimensions across devices
(c) 2012 Scott Jehl.
MIT/GPLv2 Licence
*/
function viewportSize(){
var test = document.createElement( "div" );
test.style.cssText = "position: fixed;top: 0;left: 0;bottom: 0;right: 0;";