Skip to content

Instantly share code, notes, and snippets.

View bkardell's full-sized avatar

Brian Kardell bkardell

132 followers · 12 following
View GitHub Profile
@bkardell
bkardell / nth-activated filter v2
Created February 10, 2012 19:11
nth-activated pseudos
/**
{
"title": "Nth-Activated State Filters",
"type": "selector",
"description": "Provides pseudo-classes for selecting elements based on the number of times activated",
"package": "bkardell.nth-activated",
"version": "2"
}
==========
<h2>Nth-Activated State pseudo-class filters</h2>
@bkardell
bkardell / carsmarkup.html
Created February 22, 2012 14:19
cars example
<div class="cars">
<div class="domestic">
<div class="new" id="a">
<div class="cheap small efficient"><p class="car">2012 Ford Fiesta</p></div>
<div class="quality efficient"><p class="car">2012 Chrysler 300</p></div>
<div class="quality fast"><p class="car">2012 Dodge Charger</p></div>
</div>
<div class="used" id="b">
<div class="cheap small efficient"><p class="car">2009 Ford Fiesta</p></div>
<div class="cheap"><p class="car">2004 Chevy Malibu</p></div>
@bkardell
bkardell / tagcloud.js
Created March 1, 2012 03:57
tag cloud
/**
{
"title": "Goat 1000 Tag Cloud Widget",
"type": "html",
"description": "Custom hitch which allows you to use the <a href=\"http://www.goat1000.com/tagcanvas.php\">goat 1000 HTML5 canvas tag cloud via vendor attributes as a standard Hitch widget.",
"package": "bkardell.goat",
"version": "1"
}
==========
<h2>Goat Tag Cloud Attributes</h2>
@bkardell
bkardell / math-selector-hitches.js
Created May 15, 2012 16:42
My math hitches with name changes proposed by Mike Wilcox
Hitch.add([
{
name: '-math-gt',
filter: function(match,argsString){
var args = argsString.split(",");
var value = match.getAttribute(args[0]);
if(!isNaN(value) && !isNaN(args[1])){
return (value > parseInt(args[1],10));
}
return false;
@bkardell
bkardell / mediatime
Created August 4, 2012 00:41
jorra.mediatime.1
(function(){
var granularity = 250,
matches = [],
farFuture = new Date().getTime() + (1000 * 60 * 60 * 24 * 2),
test;
test = function(el,o){
cTime = el.currentTime * 1000;
if(cTime >= o.start){
if(o.end === ':-media-end' && !el.ended){ return true; }
@bkardell
bkardell / caniuse-gaps-2-2013.html
Last active December 12, 2015 05:48
The gaps: Properties Supported By At Least 3 Evergreen Browsers but Lacking in Some IE
<!DOCTYPE html><html><head><style>h2{ font-size: 1.2em; } cite{ display: block; border-bottom: 1px solid gray; } .true{ background-color: green; } .false{ background-color: red; }</style></head><body><h1>The Gaps</h1><h2>109 Properties Supported By At Least 3 Evergreen Browsers but Lacking in Some IE</h2><cite>Of 134 features reported by <a href="http://www.caniuse.com">caniuse.com</a></cite><table><tr><td>Feature</td><td>Chrome</td><td>Firefox</td><td>Opera</td><td>Safari</td><td>IE-10</td><td>IE-9</td><td>IE-8</td><td>IE-7</td><td>IE-6</td></tr><tr><td>png-alpha</td><td class="true">true</td><td class="true">true</td><td class="true">true</td><td class="true">true</td><td class="true">true</td><td class="true">true</td><td class="true">true</td><td class="true">true</td><td class="false">false</td></tr><tr><td>video</td><td class="true">true</td><td class="true">true</td><td class="true">true</td><td class="true">true</td><td class="true">true</td><td class="true">true</td><td class="false">false</td><td cl
@bkardell
bkardell / ideas.md
Last active December 14, 2015 13:58
some locale ideas 
<script>
  var suchiConfig = suchiConfig || [];
  
  // EACH OF THE BELOW IS A SUCHI CONFIG... I JUST REMOVED THE NOISE

  // Move related configs into their relevant objects
  var exampleA = {
    "prompt": {
      "id": "notice",
@bkardell
bkardell / cars.html
Created March 7, 2013 01:12
logical markup
<div class="cars">
<div class="domestic">
<div class="new" id="a">
<div class="cheap small efficient"><p class="car">2012 Ford Fiesta</p></div>
<div class="quality efficient"><p class="car">2012 Chrysler 300</p></div>
<div class="quality fast performance"><p class="car">2012 Dodge Charger</p></div>
</div>
<div class="used" id="b">
<div class="cheap small efficient"><p class="car">2009 Ford Fiesta</p></div>
<div class="cheap"><p class="car">2004 Chevy Malibu</p></div>
@bkardell
bkardell / cars.css
Last active December 14, 2015 14:59
cars css
/* Style the cars that are new and have quality as well as domestic and peformance */
.cars div:allof(.new .quality, .domestic .performance) p {
color: red;
}
/* Style the cars that are foreign and used or domestic, new and effiecient. */
.cars div:anyof(.foreign .used, .domestic .new .efficient) p {
color: blue;
}
@bkardell
bkardell / logical-prollyfill-example.html
Created March 7, 2013 01:34
<style type="text/css" data-hitch-interpret>
/* Style the cars that are foreign and used or domestic, new and effiecient. */
.cars div:-hitch-anyof(.foreign .used, .domestic .new .efficient) p {
color: blue;
}
</style>