A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.
One-line version to paste in your DevTools
Use $$
if your browser aliases it:
~ 108 byte version
# Compiled source # | |
################### | |
*.com | |
*.class | |
*.dll | |
*.exe | |
*.o | |
*.so | |
# Packages # |
Hello, visitors! If you want an updated version of this styleguide in repo form with tons of real-life examples… check out Trellisheets! https://github.com/trello/trellisheets
“I perfectly understand our CSS. I never have any issues with cascading rules. I never have to use !important
or inline styles. Even though somebody else wrote this bit of CSS, I know exactly how it works and how to extend it. Fixes are easy! I have a hard time breaking our CSS. I know exactly where to put new CSS. We use all of our CSS and it’s pretty small overall. When I delete a template, I know the exact corresponding CSS file and I can delete it all at once. Nothing gets left behind.”
You often hear updog saying stuff like this. Who’s updog? Not much, who is up with you?
const I = x => x | |
const K = x => y => x | |
const A = f => x => f (x) | |
const T = x => f => f (x) | |
const W = f => x => f (x) (x) | |
const C = f => y => x => f (x) (y) | |
const B = f => g => x => f (g (x)) | |
const S = f => g => x => f (x) (g (x)) | |
const S_ = f => g => x => f (g (x)) (x) | |
const S2 = f => g => h => x => f (g (x)) (h (x)) |