Skip to content

Instantly share code, notes, and snippets.

View taupecat's full-sized avatar

Tracy Rotton taupecat

90 followers · 21 following
View GitHub Profile
@taupecat
taupecat / sass-modernizr.scss
Last active October 12, 2015 21:38
Use Sass to compensate for deficiencies detected by Modernizr.js
// For example, use "no-cssanimations" for a browser that lacks CSS3 animation support
@mixin modernizr($test) {
html.#{$test} & {
@content;
}
}
@taupecat
taupecat / hover-state.scss
Created February 8, 2013 14:47
I'm tired of writing a { &:hover, &:active, &:focus { [blah blah blah] } } all the time in my SCSS. So I wrote a mixin. I can probably make this better. Later.
@mixin hover-state {
&:hover, &:active, &:focus {
@content;
}
}
a {
text-decoration: none;
@include hover-state {
@taupecat
taupecat / _griddr.scss
Last active December 20, 2015 22:09
griddr: formulae and mixins to create flexible, semantic grids in Sass by setting your desired number of columns, margin width (in pixels), and container context width (in pixels). TODO: prepend and append functionality.
/**
* Formulae and mixins to create any kind of evenly-spaced flexible grid
* you can possibly imagine.
*/
/**
* Our grid settings. Change as desired for your project
*/
$columns: 12; // Desired number of columns
@taupecat
taupecat / stupid-chrome.scss
Created September 18, 2013 20:00
*,
*:before,
*:after {
box-sizing: border-box;
}
body.demo-6 {
background-color: #195f80;
.wrapper {
@taupecat
taupecat / highlight.scss
Created May 8, 2014 15:28
@mixin highlight($adjustment: 0) {
$color-test: rgba(255, 0, 255, 0.2);
background-color: adjust-hue($color-test, $adjustment * 1deg);
}
@taupecat
taupecat / SassMeister-input-HTML.html
Created September 29, 2014 13:33
Generated by SassMeister.com.
<div class="leadership__container">
<div class="leadership__person">
<div class="leadership__photo">
<img src="http://placekitten.com/g/150/150">
</div>
<div class="leadership__content">
<h2 class="leadership__name">Beth Johnson</h2>
@taupecat
taupecat / SassMeister-input.scss
Last active August 29, 2015 14:16
Generated by SassMeister.com.
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// Breakpoint (v2.5.0)
// ----
@import "breakpoint";
/** Breakpoint settings */
@taupecat
taupecat / prepare-commit-msg
Last active December 31, 2016 22:04
Automattically prepend the branch name to the git commit. Useful for integrations with JIRA, Slack, etc. When working with git flow, this will ignore the word before the slash (feature/hotfix/release).
#!/bin/sh
#
# Prepend the Branch Name to the commit
BRANCH_NAME=$(git rev-parse --abbrev-ref HEAD | sed 's/.*\///')
if [ -n "$BRANCH_NAME" ] && [ "$BRANCH_NAME" != "master" ] && [ "$BRANCH_NAME" != "develop" ]; then
echo "[#$BRANCH_NAME] $(cat $1)" > $1
fi
@taupecat
taupecat / _get-color.scss
Last active March 15, 2022 21:01
A Sass color getter that also handles transparency
// Color names come from https://www.color-blindness.com/color-name-hue/
// The color values can be any valid color format: hex, rgb, hsl, CSS color names,
// etc. But probably best _not_ to use CSS color names.
$palette: (
'black': #000,
'cornflower-blue': #55abf2,
'grey': #808080,
'fire-engine-red': #d12118,
'forest-green': #20a037,
'limeade': #56b02c,
@taupecat
taupecat / replace.js
Created April 11, 2021 13:29
function replaceFileNames() {
let c = document.getElementById('included-files-fie-on-wp-footer').innerHTML;
const includedFilesList = document.getElementById('included-files-list');
if ( null === includedFilesList ) return;
includedFilesList.innerHTML = c;
}
jQuery( function() {
replaceFileNames();
});