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 / bootstrap.flatten.css
Created June 23, 2013 12:37 — forked from nodesocket/bootstrap.flatten.css
/* Flatten das boostrap */
.well, .navbar-inner, .popover, .btn, .tooltip, input, select, textarea, pre, .progress, .modal, .add-on, .alert, .table-bordered, .nav>.active>a, .dropdown-menu, .tooltip-inner, .badge, .label, .img-polaroid {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
-webkit-border-radius: 0px !important;
-moz-border-radius: 0px !important;
border-radius: 0px !important;
border-collapse: collapse !important;
background-image: none !important;
@tomhodgins
tomhodgins / vertically-responsive.html
Last active September 19, 2022 01:49
Vertically Responsive sidebar playlist widget using jQuery and CSS to check the browser height and automatically shorten the list according to how much screen space is available
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Bootstrap: with responsive, no icons -->
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<!-- FontAwesome -->
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
@tomhodgins
tomhodgins / notepad.html
Last active December 19, 2015 11:39 — forked from jdkanani/notepad.html
data:text/html, <style type="text/css">.e{position:absolute;top:0;right:0;bottom:0;left:0;}</style><div class="e" id="editor"></div><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("editor");e.setTheme("ace/theme/solarized_dark");e.getSession().setMode("ace/mode/html");</script>
<!--
For other language: Instead of `ace/mode/ruby`, Use
Markdown -> `ace/mode/markdown`
Python -> `ace/mode/python`
C/C++ -> `ace/mode/c_cpp`
Javscript -> `ace/mode/javascript`
Java -> `ace/mode/java`
Scala- -> `ace/mode/scala`
@tomhodgins
tomhodgins / startwork.py
Last active December 19, 2015 11:59
Silkuli Script to launch my daily work routine :) Don't forget to add your MAMP password.
#Launch Web Server
openApp("MAMP")
sleep(1)
type('add_your_password_here')
type(Key.ENTER)
sleep(1)
type('h', Key.CMD)
#Launch Source Control and update Git
openApp("SourceTree")
@tomhodgins
tomhodgins / codeview.html
Last active December 21, 2015 02:49
This page contains some fun CSS that displays a number of HTML tags and information about the structure of the markup visually on the page. I'd love to turn this into a bookmarklet or chrome extension and allow your to apply it to websites in the wild too!
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<!-- Bootstrap: with responsive -->
<link href="http://cdn.staticresource.com/bootstrap.css" rel="stylesheet">
<link href="http://cdn.staticresource.com/bootstrap-responsive.css" rel="stylesheet">
<!-- FontAwesome -->
<link href="http://cdn.staticresource.com/font-awesome.min.css" rel="stylesheet">
@tomhodgins
tomhodgins / CodeView.js
Created August 15, 2013 17:52
CodeView bookmarklet for visualizing linked files and inline scripts on web pages, as well as displaying some useful HTML tags to help you see at a glance how a site is structured without having to sift through all the attributes and extraneous code. To use, create a new bookmark and replace the URL (address) of the bookmark with the contents of…
javascript:(function(e,a,g,h,f,c,b,d){if(!(f=e.jQuery)||g>f.fn.jquery||h(f)){c=a.createElement("script");c.type="text/javascript";c.src="http://ajax.googleapis.com/ajax/libs/jquery/"+g+"/jquery.min.js";c.onload=c.onreadystatechange=function(){if(!b&&(!(d=this.readyState)||d=="loaded"||d=="complete")){h((f=e.jQuery).noConflict(1),b=1);f(c).remove()}};a.documentElement.childNodes[0].appendChild(c)}})(window,document,"1.3.2",function($,L){$('<link href="http://cdn.staticresource.com/codeview.css" rel="stylesheet" style="display: none !important">').appendTo("body")});
@tomhodgins
tomhodgins / codeview.css
Created August 15, 2013 17:54
CodeView is a CSS file that helps you visualize the links and scripts that are normally invisible in HTML pages, as well as displaying a useful subset of HTML tags as it runs across them in the content. This makes it really useful to quickly assess the layout of a website you haven't seen before, or to help visualize the formatting in a blog pos…
/*
CodeView CSS - from @innovati, hosted by http://staticresource.com
*/
/* Scripts, styles, and other invisibles */
head, title, link, meta, style, script {
display: block;
}
@tomhodgins
tomhodgins / Pilcrow
Last active January 3, 2016 06:29
Pilcrow aims to be the smallest valid HTML5 page
<!DOCTYPE html><html lang=en><meta charset=utf-8><title>¶</title>
@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 / queryStrip.js
Last active February 12, 2019 20:58
Deeplink to bootstrap modals, tooltips, popovers, and tabs
$(document).ready(function(){
// queryStrip
function queryStrip(string) {
string = string.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
var regex = new RegExp('[\\?&]' + string + '=([^&#]*)'),
results = regex.exec(location.search);
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ''));
}