Skip to content

Instantly share code, notes, and snippets.

Avatar
💀
calc(dev*design)

Adam Argyle argyleink

💀
calc(dev*design)
View GitHub Profile
@argyleink
argyleink / easings.css
Created Feb 26, 2018
Handy CSS properties for easing functions
View easings.css
:root {
--ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
--ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
--ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
--ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
--ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
--ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
@argyleink
argyleink / tweak-sublime-theme-italics.md
Last active Oct 19, 2020 — forked from lavaldi/tweaks-sublime-italic-operator-mono.md
Operator Mono (or others) & any Sublime Text 3 theme cursive settings
View tweak-sublime-theme-italics.md
  1. Install Package Resource Viewer.
  2. In package control window select ‘Package Resource Viewer: Open Resource’.
  3. Scroll down until you find the option: ‘Color Scheme — Default’ (or your theme with color scheme .tmTheme) and select it.
  4. Add the following to the end of the node to style selected (scope) syntax tokens cursive:
<dict>
	<key>name</key>
	<string>Mono Tweaks</string>
	<key>scope</key>
@argyleink
argyleink / dabblet.css
Created Mar 19, 2012
Pure CSS3 Accordion System inspired by the CSS Ninja
View dabblet.css
/*
Pure CSS3 Accordion System inspired by the CSS Ninja
*/
body{ font-family:sans-serif; background:#f9f9f9; }
dl {
padding: 10px;
}
View hsl-lch-lightness.css
/* HSL's 50% lightness */
/* middle grey */
hsl(0 0% 50%)
lab(53.39% 0 -0.01)
/* 3.94:1 ❌ */
/* lime */
hsl(100 100% 50%)
lab(88.66% -77.99 84.31)
@argyleink
argyleink / vh-fix.js
Created Feb 14, 2016
Fix mobile layout thrashing from using VH's
View vh-fix.js
var els = document.querySelectorAll('.vh-fix')
if (!els.length) return
for (var i = 0; i < els.length; i++) {
var el = els[i]
if (el.nodeName === 'IMG') {
el.onload = function() {
this.style.height = this.clientHeight + 'px'
}
} else {
@argyleink
argyleink / custom.element.js
Last active Dec 12, 2019
custom element with shadow dom
View custom.element.js
export default class CustomElement extends HTMLElement {
constructor() {
super()
this.$shadow = this.attachShadow()
this.$shadow.innerHTML = this.render()
}
connectedCallback() {}
disconnectedCallback() {}
@argyleink
argyleink / is.css
Last active Nov 22, 2019
light intro to the :is() selector syntax and value
View is.css
/* before :is() */
button.focus,
button:focus {
...
}
/* after :is() */
button:is(.focus, :focus) {
...
}
View logical-property-border-example.css
main {
/* writing mode contextual shorthand for border-top and border-bottom respectively */
border-block: 1px solid hotpink;
/* writing mode contextual shorthand for border-left and border-right respectively */
border-inline: 1px solid hotpink;
}
@argyleink
argyleink / immutables.js
Last active Jun 14, 2019
immutable array examples
View immutables.js
const clone = x => [...x]
const push = y => x => [...x, y]
const pop = x => x.slice(0,-1)
const unshift = y => x => [y, ...x]
const shift = x => x.slice(1)
const sort = f => x => [...x].sort(f)
const delete = i => x => [...x.slice(0,i), ...x.slice(i+1)]
const splice = (s,c,...y) => x => [...x.slice(0,s), ...y, ...x.slice(s+c)]
const unique = arr => [...new Set(arr)]
@argyleink
argyleink / css&js.css
Created Dec 26, 2018
css and js doing similar tasks
View css&js.css
foo {
color: hsl(100,80%,75%);
background-color: hsl(100,20%,25%);
}
foo.map(styles => ({
...styles,
color: 'hsl(100,80%,75%)',
background-color: 'hsl(100,20%,25%)',
}))
You can’t perform that action at this time.