Download the PHP package coliff/popover-css-inspector without Composer
On this page you can find all versions of the php package coliff/popover-css-inspector. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
FAQ
After the download, you have to make one include require_once('vendor/autoload.php');. After that you have to import the classes with use statements.
Example:
Example:
If you use only one package a project is not needed. But if you use more then one package, without a project it is not possible to import the classes with use statements.
In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
Some PHP packages are not free to download and because of that hosted in private repositories.
In this case some credentials are needed to access such packages.
Please use the auth.json textarea to insert credentials, if a package is coming from a private repository.
You can look here for more information.
- Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
- To use Composer is sometimes complicated. Especially for beginners.
- Composer needs much resources. Sometimes they are not available on a simple webspace.
- If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
- Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Please rate this library. Is it a good library?
Informations about the package popover-css-inspector
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-themeattribute - perfect for checking color value changes between light and dark mode - Supports optional title with
data-bs-titleattribute. - 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
-
Add the
data-bs-custom-class="popover-css-inspector"to the element you'd like to show the popover on. For example, a button. -
Load the script (either async or defer is recommended):
-
Some CSS properties are opt-in only. For example, to show border properties, add
data-css-inspector-show="border"to the element. -
All CSS properties can be hidden. For example, to hide font-size properties, add
data-css-inspector-hide="font-size"to the element. - Optional. Consider adding the
pe-noneclass 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
List of CSS properties
These CSS properties are displayed by default unless their value is null or empty. You can opt out of these rows with data-css-inspector-hide.
| Property | Opt-out attribute |
|---|---|
animation-duration |
data-css-inspector-hide="animation-duration" |
animation-name |
data-css-inspector-hide="animation-name" |
background-color |
data-css-inspector-hide="bg-color" |
border-radius |
data-css-inspector-hide="b-radius" |
color |
data-css-inspector-hide="color" |
font-size |
data-css-inspector-hide="font-size" |
font-style |
data-css-inspector-hide="font-style" |
font-weight |
data-css-inspector-hide="font-weight" |
height |
data-css-inspector-hide="height" |
margin |
data-css-inspector-hide="margin" |
max-height |
data-css-inspector-hide="max-height" |
max-width |
data-css-inspector-hide="max-width" |
opacity |
data-css-inspector-hide="opacity" |
padding |
data-css-inspector-hide="padding" |
text-align |
data-css-inspector-hide="text-align" |
text-transform |
data-css-inspector-hide="text-transform" |
width |
data-css-inspector-hide="width" |
Note: Most attributes are hidden if the value is none or null.
List of opt-in CSS properties
These CSS properties are hidden by default and are only shown when included in data-css-inspector-show.
| Property | Opt-in attribute |
|---|---|
accent-color |
data-css-inspector-show="accent-color" |
align-content |
data-css-inspector-show="align-content" |
align-items |
data-css-inspector-show="align-items" |
align-self |
data-css-inspector-show="align-self" |
animation |
data-css-inspector-show="animation" |
animation-delay |
data-css-inspector-show="animation-delay" |
animation-direction |
data-css-inspector-show="animation-direction" |
animation-fill-mode |
data-css-inspector-show="animation-fill-mode" |
animation-iteration-count |
data-css-inspector-show="animation-iteration-count" |
animation-play-state |
data-css-inspector-show="animation-play-state" |
animation-timing-function |
data-css-inspector-show="animation-timing-function" |
appearance |
data-css-inspector-show="appearance" |
aspect-ratio |
data-css-inspector-show="aspect-ratio" |
backdrop-filter |
data-css-inspector-show="backdrop-filter" |
background-blend-mode |
data-css-inspector-show="background-blend-mode" |
background-image |
data-css-inspector-show="bg-image" |
background-position |
data-css-inspector-show="bg-position" |
background-repeat |
data-css-inspector-show="bg-repeat" |
background-size |
data-css-inspector-show="bg-size" |
border |
data-css-inspector-show="border" |
border-bottom-color |
data-css-inspector-show="b-bottom-color" |
border-bottom-width |
data-css-inspector-show="b-bottom-width" |
border-color |
data-css-inspector-show="b-color" |
border-left-width |
data-css-inspector-show="b-left-width" |
border-style |
data-css-inspector-show="b-style" |
border-width |
data-css-inspector-show="b-width" |
box-shadow |
data-css-inspector-show="box-shadow" |
box-sizing |
data-css-inspector-show="box-sizing" |
clip-path |
data-css-inspector-show="clip-path" |
column-gap |
data-css-inspector-show="column-gap" |
color-scheme |
data-css-inspector-show="color-scheme" |
cursor |
data-css-inspector-show="cursor" |
display |
data-css-inspector-show="display" |
filter |
data-css-inspector-show="filter" |
float |
data-css-inspector-show="float" |
flex-direction |
data-css-inspector-show="flex-direction" |
flex-wrap |
data-css-inspector-show="flex-wrap" |
font-family |
data-css-inspector-show="font-family" |
font-variant |
data-css-inspector-show="font-variant" |
gap |
data-css-inspector-show="gap" |
grid-auto-flow |
data-css-inspector-show="grid-auto-flow" |
grid-column |
data-css-inspector-show="grid-column" |
grid-row |
data-css-inspector-show="grid-row" |
grid-template-columns |
data-css-inspector-show="grid-template-columns" |
grid-template-rows |
data-css-inspector-show="grid-template-rows" |
hyphens |
data-css-inspector-show="hyphens" |
isolation |
data-css-inspector-show="isolation" |
justify-items |
data-css-inspector-show="justify-items" |
justify-self |
data-css-inspector-show="justify-self" |
letter-spacing |
data-css-inspector-show="letter-spacing" |
line-break |
data-css-inspector-show="line-break" |
line-height |
data-css-inspector-show="line-height" |
list-style |
data-css-inspector-show="list-style" |
margin-bottom |
data-css-inspector-show="margin-bottom" |
margin-left |
data-css-inspector-show="margin-left" |
margin-right |
data-css-inspector-show="margin-right" |
margin-top |
data-css-inspector-show="margin-top" |
mix-blend-mode |
data-css-inspector-show="mix-blend-mode" |
min-height |
data-css-inspector-show="min-height" |
min-width |
data-css-inspector-show="min-width" |
object-fit |
data-css-inspector-show="object-fit" |
object-position |
data-css-inspector-show="object-position" |
overflow |
data-css-inspector-show="overflow" |
overflow-wrap |
data-css-inspector-show="overflow-wrap" |
outline |
data-css-inspector-show="outline" |
outline-offset |
data-css-inspector-show="outline-offset" |
place-content |
data-css-inspector-show="place-content" |
place-items |
data-css-inspector-show="place-items" |
pointer-events |
data-css-inspector-show="pointer-events" |
position |
data-css-inspector-show="position" |
row-gap |
data-css-inspector-show="row-gap" |
text-decoration |
data-css-inspector-show="text-decoration" |
text-decoration-thickness |
data-css-inspector-show="text-decoration-thickness" |
text-indent |
data-css-inspector-show="text-indent" |
text-overflow |
data-css-inspector-show="text-overflow" |
text-shadow |
data-css-inspector-show="text-shadow" |
text-underline-offset |
data-css-inspector-show="text-underline-offset" |
text-wrap |
data-css-inspector-show="text-wrap" |
transform |
data-css-inspector-show="transform" |
transform-origin |
data-css-inspector-show="transform-origin" |
transition |
data-css-inspector-show="transition" |
transition-delay |
data-css-inspector-show="transition-delay" |
transition-duration |
data-css-inspector-show="transition-duration" |
transition-property |
data-css-inspector-show="transition-property" |
transition-timing-function |
data-css-inspector-show="transition-timing-function" |
user-select |
data-css-inspector-show="user-select" |
vertical-align |
data-css-inspector-show="vertical-align" |
white-space |
data-css-inspector-show="white-space" |
will-change |
data-css-inspector-show="will-change" |
writing-mode |
data-css-inspector-show="writing-mode" |
word-break |
data-css-inspector-show="word-break" |
word-spacing |
data-css-inspector-show="word-spacing" |
word-wrap |
data-css-inspector-show="word-wrap" |
z-index |
data-css-inspector-show="z-index" |
Browser support
Works well with all the browsers supported by Bootstrap.
Credits
Created by Christian Oliff with help from GitHub Copilot.
All versions of popover-css-inspector with dependencies
PHP Build Version
Package Version
No informations.
The package coliff/popover-css-inspector contains the following files
Loading the files please wait ...