Skip to content

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

License

Notifications You must be signed in to change notification settings

srambach/classbxr

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published