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
Fernando Montoya montogeek
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| svg { width: 400px; height: 400px;}@keyframes circle_top { 0% { /*stroke-dashoffset: 1832.365;*/ } 100% { stroke-dashoffset: 1832.365; /*stroke-dashoffset: 0;*/ }}@keyframes circle_bottom { 0% { stroke-dashoffset: 1829.189; fill: #fff; } 80% { fill: #fff; } 100% { stroke-dashoffset: 0; fill: #1ba1e2; }}@keyframes triangle_top { 0% { stroke-dashoffset: 478.399; fill: #fff; } 80% { fill: #fff; } 100% { stroke-dashoffset: 0; fill: #1ba1e2; }}@keyframes triangle_bottom { 0% { stroke-dashoffset: 479.475; fill: #fff; } 80% { fill: #fff; } 100% { stroke-dashoffset: 0; fill: #1ba1e2; }}.circle_top { animation: circle_top 5s infinite linear; stroke-linecap: round; stroke-width: 10; stroke-dasharray: 0, 0, 150, 1682.365; stroke-dashoffset: 0; stroke-linejoin: round;}.circle_bottom { animation: circle_bot |
montogeek
/ README.md
Created
February 6, 2016 18:40
— forked from addyosmani/README.md
108 byte CSS Layout Debugger
montogeek
/ gist:586459f1a8e31f396032
Last active
January 15, 2016 06:32
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Doing this: | |
| const amountStyles = { | |
| paddingTop: 50 | |
| } | |
| const expenseOptions = { | |
| fields: { | |
| amount: { | |
| stylesheet: amountStyles, |
montogeek
/ gist:288130277bc76b616e98
Created
January 7, 2016 03:14
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| https://codecov.io/#pricing |
montogeek
/ gist:26d6342589ae8d0934d0
Created
January 5, 2016 16:17
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| atom-chai-snippets@0.3.0 | |
| atom-ternjs@0.12.2 | |
| color-picker@2.0.14 | |
| docblockr@0.7.3 | |
| duotone-dark-red-syntax@0.3.2 | |
| duotone-dark-sea-syntax@0.1.0 | |
| editorconfig@1.2.2 | |
| emmet@2.3.17 | |
| file-icons@1.6.13 | |
| git-plus@5.9.0 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .feature-new-design { | |
| > .container { | |
| background-color: @color-white; | |
| .cover { | |
| .entity .cover; | |
| position: relative; | |
| width: 250px; | |
| height: 250px; | |
| margin: 0 auto; |
montogeek
/ gist:9d717656207831866aa0
Created
November 11, 2015 02:03
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $statutes = array( | |
| 'elegible' => array( | |
| 'id' => 0, | |
| 'nombre' => 'Elegible' | |
| ), | |
| 'elegido' => array( | |
| 'id' => 1, | |
| 'nombre' => 'Elegido' | |
| ), | |
| 'no-elegido' => array( |
montogeek
/ Sublime + Dark Blue + Material
Created
October 31, 2015 02:41
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "auto_complete": true, | |
| "auto_complete_triggers": | |
| [ | |
| { | |
| "characters": "<", | |
| "selector": "text.html" | |
| }, | |
| { | |
| "characters": ".", |
montogeek
/ Charlas MedellinJS 2015.md
Last active
October 22, 2015 01:25
montogeek
/ gist:acc1cd69651422cca8f3
Created
October 20, 2015 00:57
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "auto_complete": true, | |
| "auto_complete_triggers": | |
| [ | |
| { | |
| "characters": "<", | |
| "selector": "text.html" | |
| }, | |
| { | |
| "characters": ".", |