Tommy Hodgins tomhodgins

😍

Writing CSS

Frontend Developer & Designer

363 followers · 294 following

http://tomhodgins.com
Toronto, Canada
http://codepen.io/tomhodgins

View GitHub Profile

Recently created

Least recently created

Recently updated

Least recently updated

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 / hexgrid.html

Last active January 21, 2016 22:08

This is a representation of the numbers 00-FF in hexadecimal, arranged in a grid, with pattern highlighting. Demo at http://staticresource.com/grid.html

	<!DOCTYPE html>
	<html>
	<head manifest=hexgrid.manifest>
	<meta charset=utf-8>
	<meta name=apple-mobile-web-app-capable content=yes>
	<meta name=apple-mobile-web-app-status-bar-style content=black>
	<meta name=viewport content="user-scalable=yes, initial-scale=1, minimum-scale=1">
	<title>HexGrid</title>
	<style>
	* {

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 / 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 / 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 / modal-checkbox.html

Last active June 29, 2022 17:01

CSS-only Modals using input[type="checkbox"]

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 / 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 / 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 / adaptive-nav.html

Last active February 20, 2022 01:40

Element Query Navigation Demo

	<!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">

Older Newer