Skip to content

Instantly share code, notes, and snippets.

View JTLR's full-sized avatar

Joe Taylor JTLR

2 followers · 9 following
View GitHub Profile
@JTLR
JTLR / equal-heights.js
Created January 23, 2014 12:42
Equal heights JS function using css height inheritance for child elements
var height;
$(window).bind('load resize', function() {
height = 0;
$('.equal-height').each(function() {
$(this).css('height', 'auto');
$(this).children().each(function() {
if($(this).height() > height) {
height = $(this).height();
@JTLR
JTLR / stylable-list-bullets.scss
Created February 3, 2014 15:29
Styleable UL and OL bullets, works in IE8+
ul {
li {
&:before {
content: "• ";
color: #FF0000;
}
}
}
ol {
li{
@JTLR
JTLR / ie-conditional-classes.html
Created February 4, 2014 13:04
Conditional HTML classes for IE
<!--[if lt IE 7]> <html class="ie ie6 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 7]> <html class="ie ie7 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 8]> <html class="ie ie8 lte9 lte8"> <![endif]-->
<!--[if IE 9]> <html class="ie ie9 lte9"> <![endif]-->
<!--[if gt IE 9]> <html> <![endif]-->
<!--[if !IE]><!--> <html> <!--<![endif]-->
@JTLR
JTLR / responsive-circle.html
Created February 6, 2014 11:56
Perfect responsive circle with centered text
<time>
<div class="spacer"></div>
<div class="outer-container">
<div class="inner-container">
<p>22nd</p>
<p>September</p>
<p>1991</p>
</div>
</div>
</time>
@JTLR
JTLR / lazy-load.js
Created February 10, 2014 11:05
Lazy load external stylesheets (include before closing body tag)
window.onload = function() {
var head = document.getElementsByTagName('head')[0];
var link;
var stylesheets = [
{
href: '/path/to/stylesheet.css',
rel: 'stylesheet',
type: 'text/css'
},
{
@JTLR
JTLR / easydropdown.scss
Created February 11, 2014 11:48
easyDropdown default them scss conversion
/* --- EASYDROPDOWN DEFAULT THEME --- */
/* PREFIXED CSS */
.dropdown,
.dropdown div,
.dropdown li,
.dropdown div::after{
-webkit-transition: all 150ms ease-in-out;
-moz-transition: all 150ms ease-in-out;
@JTLR
JTLR / simple-parallax.js
Created February 11, 2014 14:33
Really simple jquery parallax background
var body;
var backgroundPosition;
var scrollPosition;
var parallaxAmount = 6;
$(document).ready(function () {
body = $('body');
});
$(window).scroll(function () {
@JTLR
JTLR / ie.scss
Created February 13, 2014 22:26
Sass mixin for rem sizing with IE8 and below fallback using HTML IE conditional stylesheets
$stylesheet: 'ie';
@import 'rem-function';
.element {
margin: rem(20);
}
@JTLR
JTLR / font-stacks.css
Created February 14, 2014 18:26
Base CSS font stacks
body {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-family: Georgia, Times, "Times New Roman", serif;
}
@JTLR
JTLR / font-smoothing.css
Created February 17, 2014 10:09
CSS font smoothing
.element {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}