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
| watchman watch-del-all && rm -rf node_modules/ && yarn cache clean && yarn install && yarn start -- --reset-cache |
| watchman watch-del-all && rm -rf node_modules/ && yarn cache clean && yarn install && yarn start -- --reset-cache |
| // array utils | |
| // ================================================================================================= | |
| const combine = (...arrays) => [].concat(...arrays); | |
| const compact = arr => arr.filter(Boolean); | |
| const contains = (() => Array.prototype.includes | |
| ? (arr, value) => arr.includes(value) | |
| : (arr, value) => arr.some(el => el === value) |
| // Examples at https://gist.github.com/bendc/9b05735dfa6966859025#gistcomment-1370485 | |
| // array utils | |
| // ================================================================================================= | |
| const combine = (...arrays) => [].concat(...arrays); | |
| const compact = arr => arr.filter(Boolean); |
| /* HOC fundamentally is just a function that accepts a Component and returns a Component: | |
| (component) => {return componentOnSteroids; } or just component => componentOnSteroids; | |
| Let's assume we want to wrap our components in another component that is used for debugging purposes, | |
| it just wraps them in a DIV with "debug class on it". | |
| Below ComponentToDebug is a React component. | |
| */ | |
| //HOC using Class | |
| //it's a function that accepts ComponentToDebug and implicitly returns a Class | |
| let DebugComponent = ComponentToDebug => class extends Component { |
| // Media Queries in Sass 3.2 | |
| // | |
| // These mixins make media queries a breeze with Sass. | |
| // The media queries from mobile up until desktop all | |
| // trigger at different points along the way | |
| // | |
| // And important point to remember is that and width | |
| // over the portrait width is considered to be part of the | |
| // landscape width. This allows us to capture widths of devices | |
| // that might not fit the dimensions exactly. This means the break |
| .navbar | |
| .caret | |
| .label | |
| .table | |
| .img-responsive | |
| .img-rounded | |
| .img-thumbnail | |
| .img-circle | |
| .sr-only | |
| .lead |