Skip to content

Instantly share code, notes, and snippets.

View tomhodgins's full-sized avatar
😍
Writing CSS

Tommy Hodgins tomhodgins

😍
Writing CSS
347 followers · 294 following
View GitHub Profile
@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 / 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
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 / modal-checkbox.html
Last active June 29, 2022 17:01
CSS-only Modals using input[type="checkbox"]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Modal Checkbox</title>
<meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">
<style type="text/css">
p label{color:#00f;text-decoration:underline;cursor:pointer}
.modal,.modal *{box-sizing:border-box;-moz-box-size:border-box;transition:all .2s ease-in-out}
.modal:checked+.modal{opacity:1;pointer-events:all}
@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 / 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">