caycefischer’s gists

caycefischer / framelessFontMath

Created December 7, 2011 07:44

Proper column widths for elements with font-size !=1em in Frameless Grid

	.element {
	font-size: 1.5em;

	max-width: @7cols; /* can't say this because the font-size skews the calculation */

	/* Basically, reverse the ratio to get the number back to 1em: (1 * 1.5 = 1.5), (1.5 * 0.66666666667 = 1) */
	max-width: (( 7 * (@column + @gutter) * 0.66666666667) - @gutter * 0.66666666667) / @em;
	}

caycefischer / imagelessGrid.css

Created February 27, 2012 04:18

generate a custom grid overlay on any element with linear-gradient and :before

	/* really can't remember where I saw this, sorry someone out there! :( */
	.grid:before {
	background-size: 20px 20px;
	position: absolute;
	left: 0; top: 0; right: 0; bottom: 0;
	content: '';

	background:
	-webkit-linear-gradient(left, #5FB7ED 1px, transparent 1px),
	-webkit-linear-gradient(#5FB7ED 1px, transparent 1px);

caycefischer / betterhelvetica.css

Created February 29, 2012 18:56

Use a better helvetica

	/* http://css-tricks.com/snippets/css/better-helvetica */

	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: 300;

caycefischer / ligatures.html

Created February 29, 2012 21:09

consistency in the rendering of ligatures with typekit

	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>ligature test</title>
	<meta name="description" content="consistency in the rendering of ligatures with typekit">

	<script type="text/javascript">
	TypekitConfig = {
	kitId: 'ruj3whd',
	scriptTimeout: 3000

caycefischer / dabblet.css

Created March 3, 2012 17:56 — forked from LeaVerou/dabblet.css

Move in a circle without wrapper elements

	/**
	* Move in a circle without wrapper elements
	* Idea by Aryeh Gregor, simplified by Lea Verou
	*/

	@keyframes rot {
	from {
	transform: rotate(0deg)
	translate(-150px)
	rotate(0deg);

caycefischer / dabblet.css

Created March 12, 2012 04:53

Light Simple Grid

caycefischer / wp-stuff.html

Created March 13, 2012 09:33

Wordpress custom taxonomy calls and misc filter stuff

	<!-- http://codex.wordpress.org/Function_Reference/single_term_title -->
	<h1 class="kilo">All entries in <b><?php single_term_title(); ?></b>.</h1>

	<!-- http://wp.smashingmagazine.com/2012/01/04/create-custom-taxonomies-wordpress -->
	<?php $term = get_term_by( 'slug', get_query_var( 'term' ), get_query_var( 'taxonomy' ) ); ?>

	<!-- apply filters to hook into it later... for some reason -->
	<h1><?php echo apply_filters( 'the_title', $term->name ); ?></h1>

	<!-- escape_html because its an html text block -->

caycefischer / mqreporter.css

Created March 13, 2012 19:03

simple media query reporter

	/*
	* simple media query reporter
	* http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/a-basic-responsive-grid-plus-handy-css3-media-query-reporter/
	*/

	body:after {
	content: "less than 320px";
	font-size: 300%;
	font-weight: bold;
	position: fixed;

caycefischer / iOS-webapp.html

Created March 14, 2012 01:20

iOS web app <head> tags

	<!-- http://davidwalsh.name/hide-address-bar -->

	<!-- iOS web app, deletable if not needed -->
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">

	<!-- Prevent links in standalone web apps opening Mobile Safari. https://gist.github.com/1042026 -->
	<script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a\|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")\|\|~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script>

	<!-- iOS startup images: http://miniapps.co.uk/blog/post/ios-startup-images-using-css-media-queries -->

caycefischer / typographic-lists

Created April 1, 2012 17:12

custom list markers, properly hung and with nesting

Cayce caycefischer