Debug

Debugger v1.1.0

Utilities for inspecting screen sizes and errors in spacing or overlapping elements.


Class

attributecss
debug="outline"background: rgba(255, 0, 0, 0.1);
box-shadow: 0 0 0 1px red;
outline: 1px solid red
debug="screen" v1.1.0@media (min-width: {screen}) { [debug="screen"]::after { content: "{size}" }}
Note: Utility customizing is unavailable.

Usage

Debug Outline









Lorem Ipsum


Lorem Ipsum




Apply debug="outline" to <html> tag.

<!-- Example -->
<html debug="outline">
...
</html>

Apply debug="outline" to <body> tag.

<!-- Example -->
<body debug="outline">
...
</body>

Apply debug="outline" to almost any elements.

<!-- Example -->
<y debug="outline"> ... </y>
<span debug="outline"> ... </span>

Debug Screen v1.1.0

Apply debug="screen" to inspect the current screen size. The indicator will display at top-left of the browser viewport.

<!-- Example -->
<y debug="screen"></y>

Variant

VariantEnabledResponsive
Default
Dark Theme
hover
group-hover
focus
focus-within
active
visited
checked
disabled