Add debugging class - Githubissues

zaydek-old commented 6 years ago

In the recent article, I published: https://medium.freecodecamp.org/learn-this-one-weird-trick-to-debug-css-88529aa5a6a3 I talked about a global CSS debugger. Another method of using this, however, is scoped to an element and its children. E.g.

.debug *:not(path):not(g) {
    color:                    hsla(210, 100%, 100%, 0.9) !important;
    background:               hsla(210, 100%,  50%, 0.5) !important;
    outline:    solid 0.25rem hsla(210, 100%, 100%, 0.5) !important;

    box-shadow: none !important;
}

The difference here is that now whatever is classed as .debug so will it and its children expose the debugger, which could also be customized using CSS variables (such as color).

zaydek-old commented 6 years ago

Pro-tip: do <html class="debug"> then the whole website debugged without a bookmark!

chasestarr commented 5 years ago

i'm into this. would be nice to point to fortune rather than write this debug class from scratch each time it's useful

chasestarr commented 5 years ago

@ZAYDEK do you want to open a pr?

vikramrojo / fortune

Add debugging class #36