Skip to content

Instantly share code, notes, and snippets.

View kislovskij's full-sized avatar

Viktor Kislovskij kislovskij

  • Leo Burnett Worldwide
  • Frankfurt am Main
View GitHub Profile
@kislovskij
kislovskij / gist:4b170c9e6797f577d87a
Created September 19, 2014 08:15
Algorithm for a balanced photo gallery
viewport_width = $(window).width()
ideal_height = parseInt($(window).height() / 2)
summed_width = photos.reduce ((sum, p) -> sum += p.get('aspect_ratio') * ideal_height), 0
rows = Math.round(summed_width / viewport_width)
if rows < 1
# (2a) Fallback to just standard size
photos.each (photo) -> photo.view.resize parseInt(ideal_height * photo.get('aspect_ratio')), ideal_height
else
# (2b) Distribute photos over rows using the aspect ratio as weight
@kislovskij
kislovskij / vertical-rhythm.css
Created June 18, 2013 13:02
Vertical Rhythm
h1 {
font-size: 36px;
line-height: 40px;
}
h2 {
font-size: 30px;
line-height: 40px;
}
@kislovskij
kislovskij / reset.css
Created June 18, 2013 13:13
Reset CSS
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
body {
@kislovskij
kislovskij / transparent-png.css
Created June 18, 2013 13:19
Transparent PNG Fix for IE6
.bg {
width:200px;
height:100px;
background: url(/folder/yourimage.png) no-repeat;
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/folder/yourimage.png',sizingMethod='crop');
}
/* 1px gif method */
@kislovskij
kislovskij / opacity.css
Created June 18, 2013 13:25
Opacity Hack
selector {
filter: alpha(opacity=60); /* MSIE/PC */
-moz-opacity: 0.6; /* Mozilla 1.6 and older */
opacity: 0.6;
}
@kislovskij
kislovskij / clearfix.css
Created June 18, 2013 13:14
CSS Clearfix
.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }
/* IE 6/7 */
.clearfix { zoom: 1; }
@kislovskij
kislovskij / blockquote.css
Created June 18, 2013 13:15
Blockquote Template
blockquote {
background: #f9f9f9;
border-left: 10px solid #ccc;
margin: 1.5em 10px;
padding: .5em 10px;
quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
color: #ccc;
content: open-quote;
@kislovskij
kislovskij / requestAnimationFrame.js
Created June 18, 2013 13:31
Request Animation Frame Polyfill
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
|| window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
@kislovskij
kislovskij / geolocation.js
Created June 18, 2013 13:31
Geo Location shim
// geo-location shim
// currentely only serves lat/long
// depends on jQuery
// doublecheck the ClientLocation results because it may returning null results
;(function(geolocation){
if (geolocation) return;