Skip to content

Instantly share code, notes, and snippets.

View tomhodgins's full-sized avatar
😍
Writing CSS

Tommy Hodgins tomhodgins

😍
Writing CSS
346 followers · 294 following
View GitHub Profile
@tomhodgins
tomhodgins / countcss.js
Last active August 29, 2015 13:57
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…
function countCSS() {
var results = '';
var log = '';
var total = 0;
if (!document.styleSheets) {
return;
};
@tomhodgins
tomhodgins / placeholder-tooltips.js
Last active August 29, 2015 14:01
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
// 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'
});
@tomhodgins
tomhodgins / paragraph-flow.html
Last active August 29, 2015 14:08
Paragraph Flow
<!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 August 29, 2015 14:10
currentColor Demo
<!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 August 29, 2015 14:11
Demo Animation With Element Queries
<!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 December 20, 2014 19:56
Barebones HTML layout functions for Copy/Paste
<!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 August 29, 2015 14:12
Element-Query Based Web Layout (as-written)
<!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 August 29, 2015 14:12
Element-Query Based Web Layout (Cleaned up)
<!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 / section-template.html
Last active August 29, 2015 14:13
Element Query <section> template
<!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>
@tomhodgins
tomhodgins / myWidget.js
Last active August 29, 2015 14:15
Self Executing JavaScript Widget (HTML + CSS): just place a link to this script in your HTML where you want the content to appear, like <script src="myWidget.js"></script>
(function() {
var myWidget = document.createElement('section'),
widgetStyles = document.createElement('style'),
tag = document.querySelectorAll('[src*="myWidget"]')[0];
myWidget.innerHTML = '\
<!-- Add your HTML here, with line-breaks escaped by a "\" backslash character. -->\
<!-- (Don\'t forget: you can escape any character, like quotes, as well -->\
Hello\
';
widgetStyles.innerHTML = '\