Classbxr

This project adds a box and the class names around elements for easier debugging and visualization of the HTML/CSS structure

Generate Convert Improve

Install / Use

/learn @srambach/Classbxr

About this skill

Quality Score

0/100

README

classbxr

This project adds a box and the class names around elements for easier debugging and visualization of the HTML/CSS structure.

classbxr in action

How to use it

It's easy, just load classbxr CDN on your HTML <head> and add the .classbxr on your <body> or any other element.

1. Load classbxr CDN

<!DOCTYPE html>
<html>
  <head>
    ...
    <link rel="stylesheet" href="https://cdn.rawgit.com/srambach/classbxr/5456df40/css/classbxr.css">
  </head>
  ...

2. Add classbxr class to the body

<body class="classbxr">

3. Enjoy!

Contribute to classbxr

You can help improve classbxr by reporting an issue or sending a PR.

To build the project locally:

Fork and clone this repo.
If you don't have nodejs installed, go ahead and install it.
Once inside your folder run npm install
Now run gulp

A browser window will open with the test page on http://localhost:3000/.

Edit the classbxr.scss and never the css directly.

Related Skills

node-connect

350.8k

Diagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps

frontend-design

110.4k

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

openai-whisper-api

350.8k

Transcribe audio via OpenAI Audio Transcriptions API (Whisper).

qqbot-media

350.8k

QQBot 富媒体收发能力。使用 <qqmedia> 标签，系统根据文件扩展名自动识别类型（图片/语音/视频/文件）。