https://github.com/guillaumebriday/turbo-frames-debug
Small package to help you debug your turbo-frames.
https://github.com/guillaumebriday/turbo-frames-debug
hotwire hotwire-turbo hotwired postcss
Last synced: 5 months ago
JSON representation
Small package to help you debug your turbo-frames.
- Host: GitHub
- URL: https://github.com/guillaumebriday/turbo-frames-debug
- Owner: guillaumebriday
- License: mit
- Created: 2022-04-09T18:11:15.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-04-19T07:35:01.000Z (over 3 years ago)
- Last Synced: 2025-03-30T18:23:11.874Z (6 months ago)
- Topics: hotwire, hotwire-turbo, hotwired, postcss
- Language: CSS
- Homepage:
- Size: 104 KB
- Stars: 29
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Turbo Frames Debug
[](https://www.npmjs.com/package/turbo-frames-debug)
[](https://www.npmjs.com/package/turbo-frames-debug)
[](https://www.npmjs.com/package/turbo-frames-debug)
[](https://github.com/guillaumebriday/turbo-frames-debug)
Small package to help you debug your turbo-frames.
## 📚 Installation
### Install the package
```bash
$ yarn add turbo-frames-debug
```
### Import it in your styles
If you're using [Sass](https://sass-lang.com/):
```sass
@import '~turbo-frames-debug/dist/turbo-frames-debug'
```
If you're using a module bundler like [Webpack](https://webpack.js.org/) or [esbuild](https://github.com/evanw/esbuild)
```js
import 'turbo-frames-debug/dist/turbo-frames-debug.css'
```
Add the class `debug-turbo` on your body tag, for instance:
```html
```
## 💅 Configuration
You can change the style of debugger by overriding some CSS variables.
| CSS Variables | Default | Description |
|-------------------------------------|-----------|--------------------------------|
| `--turbo-frame-debug-color` | `#3B82F6` | Color of the borders and text |
| `--turbo-frame-debug-z-index` | `9999` | z-index of the debugger. |
| `--turbo-frame-debug-font-size` | `0.75rem` | Font size of the debugger. |
| `--turbo-frame-debug-border-radius` | `0.25rem` | Border radius of the debugger. |
For instance:
```css
:root {
--turbo-frame-debug-color: #22C55E;
}
```
## 👷 Contributing
Do not hesitate to contribute to the controllers by adapting or adding features ! Bug reports or pull requests are welcome.
Don't forget to drop a 🌟 on GitHub to support the project.
## 📢 Mentions
Inspired by [Matt Swanson](https://twitter.com/_swanson).
## 📝 License
This project is released under the [MIT](https://opensource.org/licenses/MIT) license.