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 / 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 / orange-button.html
Last active January 21, 2016 22:33
Orange Button with Element Queries
<!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>
</head>
<body>
@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 = '\
@tomhodgins
tomhodgins / myWidget.js
Last active August 29, 2015 14:15
Self Executing JavaScript Widget (HTML + EQCSS): just place a link to this script in your HTML where you want the content to appear, like <script src="myWidget.js"></script>
(function() {
if (typeof EQCSS === 'undefined') {
var eq = document.createElement('script');
eq.src = 'http://elementqueries.com/EQCSS.js';
document.body.appendChild(eq);
};
var myWidget = document.createElement('section'),
widgetStyles = document.createElement('script'),
tag = document.querySelectorAll('[src*=\'myWidget\']')[0];
myWidget.innerHTML = '\
@tomhodgins
tomhodgins / snippets.md
Last active August 8, 2022 14:27
Snippets.md is my most often used HTML, CSS and JavaScript snippets for front-end web development
@tomhodgins
tomhodgins / what-can-EQCSS-do.md
Last active August 29, 2015 14:15
What can EQCSS Do?

What can EQCSS do?

“When the input has more than 15 characters, make the border red”

@element 'input' and (min-characters: 16) {
  input { border-color: red; }
}

“Increase the height of the textarea the moment is contains more than 3 lines of text”

@tomhodgins
tomhodgins / speedtest.html
Last active August 29, 2015 14:16
Responsive Speed Testing
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SpeedTester</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">
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
@tomhodgins
tomhodgins / micro-speedtest.php
Last active August 29, 2015 14:16
Responsive Speed Testing (optimized, with cross-origin header set via PHP)
<?php header('X-Frame-Options: GOFORIT'); ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SpeedTester</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">
* { box-sizing: border-box; -moz-box-sizing: border-box; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: auto; font-family: 'Source Sans Pro', 'Open Sans', Roboto, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Myriad Pro', 'Segoe UI', Myriad, Helvetica, 'Lucida Grande', 'DejaVu Sans Condensed', 'Liberation Sans', 'Nimbus Sans L', Tahoma, Geneva, Arial, sans-serif; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; cursor: default; }
html { font-size: 10pt; background: #ccc; -webkit-text-size-adjust: 100%; }
@tomhodgins
tomhodgins / parse-powered.html
Last active August 29, 2015 14:16
Parse-powered web page with editor
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title id="site_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">
<link href="style.css" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=PT+Serif:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
@tomhodgins
tomhodgins / data-personas.php
Last active August 29, 2015 14:17
Adding data-personas support to WordPres
data-personas
data-default="<?php $dd = get_field_escaped($field); echo $dd; ?>"
<?php
$field = 'YourTagGoesHere';
if(get_field($field . '_mm')) {
$mm = get_field_escaped($field . '_mm'); echo 'data-persona-marketing-maggie="' . $mm . '" ';
} else {
$mm = get_field_escaped($field); echo 'data-persona-marketing-maggie="' . $mm . '" ';
}
if(get_field($field . '_tt')) {