Skip to content

Instantly share code, notes, and snippets.

<script type="text/javascript">
$( document ).ready(function() {
var theWidth = $( window ).width();
var theSize = theWidth / 100;
$( 'html' ).css( "fontSize", theSize + "px" );
});
$( window ).resize(function() {
var theWidth = $( window ).width();
var theSize = theWidth / 100;
if (theSize >= 8 && theSize <= 14) {
@johncionci
johncionci / wordpress-picturefill.php
Last active August 29, 2015 14:01
Picturefill - WordPress Post Thumbnail
<?php
/**
* Add picturefill support to WordPress
*
* @see scottjehl.github.io/picturefill/
* @author johncionci
*/
/**
@johncionci
johncionci / gist:8418506
Created January 14, 2014 13:45
Post thumbnail Conditional Class
/**
* Checks to see if the Post has a thumbnail, if not give it a class.
*/
function xxx_has_thumbnail_class( $classes ) {
global $post;
if( !has_post_thumbnail() )
$classes[] = 'no-thumbnail';
return $classes;
}
add_filter( 'post_class', 'xxx_has_thumbnail_class' );
@johncionci
johncionci / gist:8303572
Created January 7, 2014 17:57
Toggle individual element containers
<div class="map-toggle">
<a href="#">Map It</a>
</div>
<div class="map-display">
<iframe src="http://mapsengine.google.com/map/embed?mid=z-BEFzFo7gdM.kYdiUKVQpQQI" width="457" height="280"></iframe>
</div>
@johncionci
johncionci / CSS File Comment
Last active January 1, 2016 18:49
Sublime Text Snippets
<snippet>
<content><![CDATA[
/**
* @file
* ${1:this}
*/
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>comment</tabTrigger>
<!-- Optional: Description to show in the menu -->
@johncionci
johncionci / gist:7739484
Created December 1, 2013 19:13
SCSS Mixin Clearfix
/*
* Nicolas Gallagher Micro Clearfix
* @link http://nicolasgallagher.com/micro-clearfix-hack/
*/
@mixin clearfix() {
&:before,
&:after {
content: " ";
display: table;
@johncionci
johncionci / gist:7739422
Last active December 29, 2015 22:58
SCSS Mixin for Link Colors
/* Text Decorations
* Supply a base link color and a hover link color
* Remove the underline, until hover
*
* $link_color - required - string or hex value - the initial link color
* $hover_color - required - string or hex value - the links hover color
*
* @usage a {
* @include text-decoration(#fff,#000);
* }
@johncionci
johncionci / gist:7739150
Created December 1, 2013 18:51
WordPress 320px Responsive Layout
/*
* 320px layout supports: ( max-width 320px )
*
* 10px | 300px | 10px
* Posts are not floated left, can be resized with container eq 300px
*
* 10px | 100% ( 300px ) | 10px
*
* @required
* rem-mixin.scss
@johncionci
johncionci / gist:7739110
Created December 1, 2013 18:47
WordPress 480px Responsive Layout
/*
* 480px layout supports: ( max-width 480px )
*
* 10px | 460px | 10px
* Posts are not floated left, can be resized with container eq 460px
*
* 10px | 100% ( 460px ) | 10px
*
* @required
* rem-mixin.scss
@johncionci
johncionci / gist:7739060
Last active December 29, 2015 22:49
WordPress 640px - 768px Responsive Layout
/*
* 640px - 768px layout supports: ( max-width 768px )
*
* 10px | 214px | 10px | 214px | 10px | 300px | 10px
* Posts floated left, and can be resized with container eq 214px
*
* 10px | 59.893048128342244% ( 448px ) | 40.106951871657756%% ( 300px ) | 10px
*
* @required
* rem-mixin.scss