Skip to content

Instantly share code, notes, and snippets.

😍
Writing CSS

Tommy Hodgins tomhodgins

😍
Writing CSS
Block or report user

Report or block tomhodgins

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@tomhodgins
tomhodgins / countcss.js
Last active Aug 29, 2015
This is a function to count the total number of CSS rules being displayed on a page. Internet Explorer versions 6–9 only read the first 4096 CSS rules and disregard anything further [ http://support.microsoft.com/kb/262161 ]. countCSS() displays the number of rules being displayed on your page and totals it for you. Simply link this file into yo…
View countcss.js
function countCSS() {
var results = '';
var log = '';
var total = 0;
if (!document.styleSheets) {
return;
};
@tomhodgins
tomhodgins / placeholder-tooltips.js
Last active Aug 29, 2015
Display an input's placeholder="" text as a Bootstrap Tooltip on :focus of non-empty form inputs. See this in action at: http://jsfiddle.net/tomhodgins/LEz3Z/2
View placeholder-tooltips.js
// Display placeholder="" text as tooltip for :focused, non-empty inputs
$('form input').blur(function() {
var inputVal = $(this).val(),
titleText = $(this).attr('placeholder');
if ( inputVal != '' ) {
$(this).tooltip({
title: titleText,
trigger: 'focus',
container: 'form'
});
View paragraph-flow.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Paragraph Flow</title>
<style class="text/css">
@import url('http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900,300italic,400italic,600italic,700italic,900italic');
/* Base Font Size */
html {
font-size: 11pt;
@tomhodgins
tomhodgins / currentColor.html
Last active Aug 29, 2015
currentColor Demo
View currentColor.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>currentColor Demo</title>
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic" rel="stylesheet" type="text/css">
<link href="http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css" rel="stylesheet">
<style type="text/css">
* {
@tomhodgins
tomhodgins / demo-animation.html
Last active Aug 29, 2015
Demo Animation With Element Queries
View demo-animation.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo Animation with Element Queries</title>
<link href="//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" type="text/css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css" type="text/css" rel="stylesheet">
<style type="text/css">
* {
box-sizing: border-box;
@tomhodgins
tomhodgins / building-blocks.html
Created Dec 20, 2014
Barebones HTML layout functions for Copy/Paste
View building-blocks.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Barebones HTML</title>
<style>
* {box-sizing:border-box;-moz-box-size:border-box;transition:all .5s ease-in-out}
html {background:#eee;font-family:'Open Sans','Helvetica Neue','Myriad Pro',Roboto,Myriad,'Segoe UI',Arial,sans-serif}
body {margin:30px auto;border-left:10px solid #eee;border-right:10px solid #eee;max-width:750px;background:#fff;padding:30px}
label {-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;cursor:pointer;display:inline-block;padding:5px;box-shadow:inset #ccc 0 0 0}
@tomhodgins
tomhodgins / widget-demo.html
Last active Aug 29, 2015
Element-Query Based Web Layout (as-written)
View widget-demo.html
<!DOCTYPE html><html><head><title>EQCSS Layout Demo</title><meta charset="utf-8"><meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"><link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet"><link href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css" rel="stylesheet"></head><body>
<!-- Nav -->
<section id="nav">
<a href="#"><strong>EQCSS Demo</strong></a>
<label for="sidebarToggle">Toggle Sidebar</label>
<script type="text/eqcss">
@element '#nav' and (min-width: 0px) {
body { padding-top: 75px; }
@tomhodgins
tomhodgins / widget-demo-inlined.html
Last active Aug 29, 2015
Element-Query Based Web Layout (Cleaned up)
View widget-demo-inlined.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>EQCSS Layout Demo</title>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet">
<link href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css" rel="stylesheet">
</head>
<body>
@tomhodgins
tomhodgins / adaptive-nav.html
Last active Aug 29, 2015
Element Query Navigation Demo
View adaptive-nav.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive Nav</title>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, minimal-ui">
<style>html{opacity:0;-webkit-text-size-adjust: 100%;}body{margin:0}</style>
</head>
<body>
<nav class="eqNav">
@tomhodgins
tomhodgins / section-template.html
Last active Aug 29, 2015
Element Query <section> template
View section-template.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, minimal-ui">
<style type="text/css">
html { -webkit-text-size-adjust: 100%; opacity: 0; }
body { margin: 0; }
</style>
You can’t perform that action at this time.