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
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Box Shadow</title> | |
<style> | |
.box { | |
height: 150px; | |
width: 300px; | |
margin: 20px; |
@-webkit-keyframes bgcolor { 0% { background-color: #ffccf2; } | |
50% { background-color: #ccffcc; } | |
100% { background-color: #ccffff; } } | |
@-moz-keyframes bgcolor { 0% { background-color: #ffccf2; } | |
50% { background-color: #ccffcc; } | |
100% { background-color: #ccffff; } } | |
@-ms-keyframes bgcolor { 0% { background-color: #ffccf2; } | |
50% { background-color: #ccffcc; } |
One-pager / Scroll: | |
- http://www.north2.net/ | |
- http://10x16.com/ | |
- http://www.hm.com/us/kenzo#inspiration | |
- http://www.stinkdigital.com/ | |
- https://nameoflove.com/ | |
- https://www.thened.com/ | |
- https://thecreativeindependent.com/ | |
- http://www.melville-design.com/ | |
- http://designgest.com/ |
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?
Below are a small collection of React examples to get anyone started using React. They progress from simpler to more complex/full featured.
They will hopefully get you over the initial learning curve of the hard parts of React (JSX, props vs. state, lifecycle events, etc).
You will want to create an index.html
file and copy/paste the contents of 1-base.html
and then create a scripts.js
file and copy/paste the contents of one of the examples into it.