Skip to content

Instantly share code, notes, and snippets.

View jbrewer's full-sized avatar

Josh Brewer jbrewer

119 followers · 17 following
View GitHub Profile
@jbrewer
jbrewer / _mixins.scss
Created October 28, 2012 16:05 — forked from asimpson/_mixins.scss
SASS Mixin with keyword font-size fallback
@mixin font-size( $decimal-size, $keyword: null ) {
@if $keyword{ font-size: $keyword; }
@else { font-size: $decimal-size * $base-font-multiplier * 16px;}
font-size: $decimal-size * 1rem;
}
@jbrewer
jbrewer / index.html
Created October 28, 2012 04:16 — forked from anonymous/index.html
Transformed letters
<h1>typography</h1>
@jbrewer
jbrewer / index.xml
Created October 23, 2012 05:16 — forked from stammy/index.xml
RSS Feed for Jekyll (feed/index.xml) - paulstamatiou.com
---
layout: nil
---
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title type="text" xml:lang="en">{{ site.root_desc }}</title>
<link type="application/atom+xml" href="http://paulstamatiou.com/feed/" rel="self"/>
<link type="text" href="http://paulstamatiou.com" rel="alternate"/>
<updated>{{ site.time | date_to_xmlschema }}</updated>
@jbrewer
jbrewer / Retina-ready images w SCSS
Created October 22, 2012 19:56
Easy retina-ready images using SCSS
@mixin image-2x($image, $width, $height) {
@media (min--moz-device-pixel-ratio: 1.3),
(-o-min-device-pixel-ratio: 2.6/2),
(-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {
/* on retina, use image that's scaled by 2 */
background-image: url($image);
background-size: $width $height;
}
@jbrewer
jbrewer / gist:3739863
Created September 17, 2012 21:18
Responsive Measure scale
$(document).on('responsiveMeasureUpdated', function(e, data) {
$('.giga').css('fontSize', data.fontRatios[9] + 'px');
$('h1').css('fontSize', data.fontRatios[8] + 'px');
$('h2').css('fontSize', data.fontRatios[7] + 'px');
$('h3').css('fontSize', data.fontRatios[6] + 'px');
$('p').css('fontSize', data.fontRatios[5] + 'px');
$('.').css('fontSize', data.fontRatios[4] + 'px');
});
@jbrewer
jbrewer / getElementsByClassName.polyfill.js
Created August 16, 2012 02:12 — forked from eikes/getElementsByClassName.polyfill.js
Polyfill for getElementsByClassName
// Add a getElementsByClassName function if the browser doesn't have one
// Limitation: only works with one class name
// Copyright: Eike Send http://eike.se/nd
// License: MIT License
if (!document.getElementsByClassName) {
document.getElementsByClassName = function(search) {
var d = document, elements, pattern, i, results = [];
if (d.querySelectorAll) { // IE8
return d.querySelectorAll("." + search);
@jbrewer
jbrewer / lettering.html
Created August 11, 2012 20:34 — forked from adactio/lettering.html
A quick'n'dirty way of doing some lettering.js stuff without jQuery.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<style>
.slogan span:nth-child(odd) {
color: red;
}
</style>
</head>
@jbrewer
jbrewer / mediaquerycolums.html
Created August 11, 2012 20:26 — forked from adactio/mediaquerycolums.html
Multiple columns dependent on media queries that test for height as well as width.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Media Query Multiple Columns</title>
<meta name="viewport" content="width=device-width, intial-scale=1">
<style>
@media all and (min-width: 40em) and (min-height: 36em) {
[role="main"] {
-webkit-column-count: 2;
@jbrewer
jbrewer / gist:3301010
Created August 9, 2012 04:33 — forked from lucasfais/gist:1207002
Sublime Text 2 - Useful Shortcuts

Sublime Text 2 – Useful Shortcuts (Mac OS X)

General

⌘T go to file
⌘⌃P go to project
⌘R go to methods
⌃G go to line
⌘KB toggle side bar
⌘⇧P command prompt
@jbrewer
jbrewer / rem-calibrate.css
Created August 5, 2012 07:29 — forked from brianblakely/rem-calibrate.css
Simulate vw with rems
/* Android stock browser won't let you set font-size smaller than 8px unless you apply this. */
:root {
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
}