coliff/popover-css-inspector

Displays CSS attributes of elements in a Bootstrap popover. Ideal for design systems and style guides

dev-main 2024-11-01 09:34 UTC

MIT

• Christian Oliff

• css
• bootstrap
• style
• inspector

README

Popover CSS Inspector

Displays CSS attributes of elements in a Bootstrap popover. Ideal for design systems and style guides.

• Easy to use - just add data-bs-custom-class="popover-css-inspector" to the element (requires Bootstrap 5 JavaScript)
• Customizable with your own CSS and Bootstrap's Popover options
• Popover remains static on the document and does not reposition on scroll
• Supports Bootstrap 5 dark mode
• Option to hide CSS elements - e.g. just add data-css-inspector-hide="font-size" to prevent font-size properties from displaying
• Some CSS properties are hidden by default but can be enabled - e.g. just add data-css-inspector-show="border" to show border properties
• Reloads CSS attributes if the theme is changed via the data-bs-theme attribute - perfect for checking color value changes between light and dark mode
• Supports optional title with data-bs-title attribute.
• Only 3 KB minified and gzipped!

Quick start

Several quick start options are available:

• Download the latest release
• Clone the repo git clone https://github.com/coliff/popover-css-inspector.git
• Install with npm npm install popover-css-inspector
• Install with yarn yarn add popover-css-inspector
• Install with Composer composer require coliff/popover-css-inspector

Usage

1. Add the data-bs-custom-class="popover-css-inspector" to the element you'd like to show the popover on. For example, a button.

<button
  type="button"
  class="btn btn-primary"
  data-bs-toggle="popover"
  data-bs-custom-class="popover-css-inspector">
  Button
</button>

1. Load the script (either async or defer is recommended):

<script src="/js/popover-css-inspector.min.js" defer></script>

1. Some CSS properties are opt-in only. For example, to show border properties, add data-css-inspector-show="border" to the element.

2. All CSS properties can be hidden. For example, to hide font-size properties, add data-css-inspector-hide="font-size" to the element.

3. Optional. Consider adding the pe-none class to the element to prevent the popover from being triggered by the user.

How it works

The script will look for any element with the data-bs-custom-class="css-inspector" attribute and add a click event listener to it. When clicked, it will get the element's CSS attributes and display them in a Bootstrap popover.

Demo

Demo page

List of CSS properties

These CSS properties are displayed by default unless their value is null or empty. You can also opt out with a data-attribute if needed.

Note: Most attributes are hidden if the value is none or null.

List of opt-in CSS properties

Browser support

Works well with all the browsers supported by Bootstrap.

Credits

Created by Christian Oliff with help from GitHub Copilot.