This project adds a box and the class names around elements for easier debugging and visualization of the HTML/CSS structure
HTML CSS JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
sass
.gitignore
LICENSE
README.md
gulpfile.js
index.html
package.json

README.md

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:

  1. Fork and clone this repo.
  2. If you don't have nodejs installed, go ahead and install it.
  3. Once inside your folder run npm install
  4. 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.