Skip to content

Instantly share code, notes, and snippets.

View andyford's full-sized avatar

Andy Ford andyford

23 followers · 4 following
View GitHub Profile
@andyford
andyford / sass-columns.scss
Last active May 25, 2016 12:44
Basic sass column widths for any multiple of columns
$max-columns: 8;
@for $i from 2 through $max-columns {
@for $j from 1 through ($i - 1) {
.col-#{$j}-#{$i} {
width: decimal-floor((($j / $i) * 100%), 3);
}
}
}
@andyford
andyford / color-map-categories.scss
Last active May 25, 2016 13:08
Category classes with corresponding colors using Sass map
$category-colors: (
alpha: red,
bravo: darkorange,
charlie: gold,
delta: yellowgreen,
echo: green,
foxtrot: skyblue,
golf: blue,
hotel: purple,
india: violet,
@andyford
andyford / text-tester.html
Created June 21, 2016 21:14
<h1>abcd efg hijk lmnop qrs tuv wxyz</h1>
<h1>1234567890 ?! $#@%&*() - = + :;""''.,/</h1>
<h1>ABCD EFG HIJK LMNOP QRS TUV WXYZ</h1>
<h2>abcd efg hijk lmnop qrs tuv wxyz</h2>
<h2>1234567890 ?! $#@%&*() - = + :;""''.,/</h2>
<h2>ABCD EFG HIJK LMNOP QRS TUV WXYZ</h2>
<h3>abcd efg hijk lmnop qrs tuv wxyz</h3>
@andyford
andyford / big-ole-password-masks.scss
Last active August 7, 2016 20:07
input[type="password"] {
font-family: Verdana, Impact, serif;
font-weight: bolder;
letter-spacing: 0.1em;
// reset for placeholders (if using them)
// assumes '$font-sans' is the default font for your inputs
&::-webkit-input-placeholder {
font-family: $font-sans;
@andyford
andyford / table-with-border-radius.scss
Last active July 12, 2016 11:13
Because I always forget how to do it...
$table-rounded-border-color-outer: #ccc;
$table-rounded-border-color-inner: #ddd;
$table-rounded-border-radius: 5px;
.table-rounded {
border-collapse: separate;
border: 1px solid $table-rounded-border-color-outer;
border-width: 1px 0 0 1px;
border-radius: $table-rounded-border-radius;
@andyford
andyford / breakpoint-rainbow-box.scss
Last active February 21, 2018 23:25
Breakpoint rainbows for Bootstrap (v4-alpha5) for glaringly obvious breakpoint debugging/development
// puts a little box in the bottom right instead of changing the body bg color
body:after {
content: 'xlg';
position: fixed;
z-index: 99999;
bottom: 0;
right: 0;
padding: 2px 5px;
border: 1px solid;
@andyford
andyford / clear-console.js
Created May 19, 2017 21:32
Clear the dev console on cmd+k
document.addEventListener('keydown', function(e) {
if (e.keyCode == 75 && (e.ctrlKey || e.metaKey)) {
console.clear();
}
});
@andyford
andyford / js-sleep.js
Created February 10, 2020 22:12
// a js/node sleep/delay because I always forget how
// credit: https://stackoverflow.com/a/49139664/17252
await new Promise(resolve => setTimeout(resolve, 2000));
@andyford
andyford / collapse-whitespace-and-newlines.js
Last active September 18, 2020 19:48
collapse whitespace and newlines
// use with CSS rule: 'white-space: pre-wrap;'
const collapsedString = originalString
// remove leading and trailing whitespace
.trim()
// remove spaces before/after newlines - https://stackoverflow.com/a/5568828 (in comment by ridgerunner)
.replace(/^[^\S\r\n]+|[^\S\r\n]+$/gm, "")
// collapse all spaces down to one space - https://stackoverflow.com/a/1981366
.replace(/ +/g, " ")
// collapse 3+ newlines down to 2 newlines (preserving paragraphs) - https://stackoverflow.com/a/10965543
@andyford
andyford / base64-spacer-gif.html
Last active November 23, 2021 15:24
base64 spacer gif
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" />