Debug
Debugger v1.1.0
Utilities for inspecting screen sizes and errors in spacing or overlapping elements.
Class
attribute | css |
---|---|
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} " }} |
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
Variant | Enabled | Responsive |
---|---|---|
Default | ||
Dark Theme | ||
hover | ||
group-hover | ||
focus | ||
focus-within | ||
active | ||
visited | ||
checked | ||
disabled |