Skip to content

Instantly share code, notes, and snippets.

View sgregson's full-sized avatar
NANA nana nana nana A11Y

Spencer sgregson

NANA nana nana nana A11Y
View GitHub Profile
@sgregson
sgregson / readme.md
Last active July 1, 2021 22:26
Romney Tax Plan code breakdown

came back across this recently and the site is defunkt. Looks like the internet archive captured it all at: https://web.archive.org/web/20121101005518/http://www.romneytaxplan.com/

From an old description on mashable

President Obama has reproached Mitt Romney for not providing details on his alleged "$5 trillion tax cut plan" and how he'd pay for it. Now the Democratic National Committee has launched an interactive website that builds on the Obama campaign's claims that Romney's evading the details. At romneytaxplan.com, under Romney's campaign logo and slogan, you'll read this: "For a detailed explanation of how the Romney-Ryan tax plan is able to cut taxes by $5 trillion without raising taxes on the middle class or exploding the deficit, simply click the button below." A big, red button that reads "get the details" is in the middle of the page. If you try to click it though, or if you even try to just get close to it with your mouse, the button dodges y

@sgregson
sgregson / regex.md
Last active August 29, 2015 14:03
Useful Regular Expressions

CSS/SCSS

Select CSS selector (fast but won't select selectors on line 1 because of initial lookbehind)

(?<=[\},\n])[+#:\.\w -]+(?=[\{,])

Select groups of properties

(?<=[\{,\n])(.+[^,\{]\n)+(?=[\},])
@sgregson
sgregson / SassMeister-input.scss
Last active August 29, 2015 14:07
SCSS Configuration Objects
// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// Sassy Maps (v0.4.0)
// ----
@import "sassy-maps";
////
/// @author Pedr Browne
/// @group support
@sgregson
sgregson / SassMeister-input.scss
Last active August 29, 2015 14:11
LibSass Configuable Objects (syntax 1)
// ----
// libsass (v3.1.0-beta)
// ----
// LibSass Configurable Objects Syntax 1
// uses selector() to include content
//
// @author Spencer Gregson
// @credit http://hugogiraudel.com/2014/05/05/bringing-configuration-objects-to-sass/ - a modular way to build partials with signatures
// @credit map-merge-deep() - Pedr Browne (https://gist.github.com/Undistraction/681818d751b6dd06c0cc), edited for compatibility with libsass 3.0.2, no dependencies
@sgregson
sgregson / SassMeister-input.scss
Last active October 20, 2015 14:30
LibSASS Configurable Objects (Syntax 2)
// ----
// libsass (v3.2.5)
// ----
// LibSass Configurable Objects Syntax 2
// uses actual selector to include configuration
// NOTE: currently unworkable without passing in selector reference due to https://github.com/sass/libsass/issues/548
//
// @author Spencer Gregson
// @credit http://hugogiraudel.com/2014/05/05/bringing-configuration-objects-to-sass/ - a modular way to build partials with signatures
@sgregson
sgregson / SassMeister-input-HTML.html
Last active August 29, 2015 14:20
Negative Border Radius Mixin
<h1>Negative Border Radius Mixin</h1>
<h2>Parameters</h2>
<div class="all"><code>$corners: 1 1 1 1</code></div>
<div class="top"><code>$corners: 1 1 0 0</code></div>
<div class="bottom"><code>$corners: 0 0 1 1</code></div>
<div class="top-left"><code>$corners: 1 0 0 0</code></div>
<div class="top-right"><code>$corners: 0 1 0 0</code></div>
<div class="bottom-right"><code>$corners: 0 0 1 0</code></div>
<div class="bottom-left"><code>$corners: 0 0 0 1</code></div>
<div class="double">double border</div>
@sgregson
sgregson / SassMeister-input-HTML.html
Last active October 9, 2015 16:48
SASS Naming and Nesting approaches
<!-- The .is-expanded is a response to data/user changes -->
<div class="MediaElement MediaElement--featured is-expanded">
<div class="MediaElement-meta">
<img class="MediaElement-img" src="http://placehold.it/150x150" />
<div>some info</div>
</div>
<div class="MediaElement-content">
and wow, i'm both featured and expanded!
</div>
</div>
@sgregson
sgregson / SassMeister-input.scss
Created July 1, 2015 17:18
Bootstrap SASS Grid System
// ----
// libsass (v3.2.5)
// ----
/* Necessary components from https://github.com/twbs/bootstrap-sass
* used to generate the grid system
*/
//== Media queries breakpoints
//
@sgregson
sgregson / SassMeister-input-HTML.html
Last active August 29, 2015 14:26
CSS-only Floating Labels
<body>
<div id="form">
<form id="register_form" action="null">
<fieldset id="personal-details">
<legend>Personal Details</legend>
<div class="input-container" id="first-name">
<input type="text" name="first-name" placeholder="First name"/>
<label for="first-name">First name</label>
</div>
<div class="input-container" id="last-name">
@sgregson
sgregson / SassMeister-input.scss
Created August 4, 2015 19:47
Generated by SassMeister.com.
// ----
// libsass (v3.2.5)
// ----
//
$grid-columns: 12;
//** Padding between columns. Gets divided in half for the left and right.
$grid-gutter-width: 16px;
///////////////////////