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 / 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 / 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')) {
@tomhodgins
tomhodgins / fizzbuzz.html
Last active August 29, 2015 14:21
FizzBuzz in JavaScript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>FizzBuzz in JavaScript</title>
</head>
<body>
<script>
function fizzBuzz() { // Let's create a function called FizzBuzz
var message = '', digit; // We'll start with an empty message, and a placeholder for the digits
@tomhodgins
tomhodgins / Percent & Dollar inputs, linked to a Range Slider.markdown
Created May 28, 2015 16:25
Percent & Dollar inputs, linked to a Range Slider
@tomhodgins
tomhodgins / hide-the-side.js
Created July 3, 2015 01:57
Browser Script: Adds an invisible checkbox to the top-right corner of Reddit.com that hides the sidebar when checked. You can add this code to extstyler.js in Extstyler to use this script in Chrome https://github.com/tomhodgins/extstyler
// Add this code to Reddit.com
/* Hide the Side */
if (document.getElementsByTagName('html')[0].classList.contains('reddit')) {
var input = document.createElement('input'),
inputCSS = document.createElement('style'),
inputJS = document.createElement('script');
input.id = 'hTS';
input.setAttribute('type','checkbox');
input.setAttribute('onclick','hideTheSide()');
@tomhodgins
tomhodgins / youtube-cinema-mode.js
Created July 3, 2015 02:42
Browser Script: Youtube Cinema Mode. Adds an invisible checkbox to the top-right corner of youtube.com that hides everything but the video. You can add this code to extstyler.js in Extstyler to use this script in Chrome https://github.com/tomhodgins/extstyler
// Run code on Youtube.com
/* Youtube Cinema Mode */
if (document.getElementsByTagName('html')[0].classList.contains('youtube')) {
var input = document.createElement('input'),
inputCSS = document.createElement('style'),
inputJS = document.createElement('script');
input.id = 'ytCM';
input.setAttribute('type','checkbox');
input.setAttribute('onclick','cinemaMode()');