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
// ---- | |
// Sass (v3.3.0.rc.5) | |
// Compass (v1.0.0.alpha.18) | |
// ---- | |
// Prefixing mixin | |
// ---------- | |
// @param [map] $map: property/value pairs to be prefixed | |
// @param [list] $vendors: vendor prefixes to use | |
// ---------- |
// ---- | |
// libsass (v3.2.5) | |
// ---- | |
$breakpoints: ( | |
small : 570px, | |
medium: 800px, | |
large : 1030px | |
); |
node_modules/ | |
.DS_Store |
/** | |
* The path to the fonts folder, relative to the | |
* compiled stylesheet | |
* | |
* @type String | |
*/ | |
$font-path: "../fonts/" !default; | |
/** |
/**************************\ | |
Basic Modal Styles | |
\**************************/ | |
.modal { | |
font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif; | |
} | |
.modal__overlay { | |
position: fixed; |