visuellverstehen / statamic-classify
A useful helper to add CSS classes to all HTML tags generated by the bard editor.
Installs: 54 105
Dependents: 0
Suggesters: 0
Security: 0
Stars: 14
Watchers: 7
Forks: 2
Open Issues: 2
Type:statamic-addon
Requires
- php: ^7.4 || ^8.0
- illuminate/support: ^8.0 || ^9.0 || ^10.0
- statamic/cms: ^3.0.38 || ^4.0
- symfony/css-selector: ^5.4 || ^6.0
- symfony/dom-crawler: ^5.4 || ^6.0
Requires (Dev)
- orchestra/testbench: ^6.0 || ^7.0 || ^8 || ^9
- phpunit/phpunit: ^9.3 || ^10.0
README
Classify
Classify is a useful helper to add CSS classes to all HTML tags generated by the Statamic Bard editor.
Installation
Requirements
- Statamic v3 || v4
- Laravel 9 || 10
- PHP 8
Version compatibility
Classify | Statamic | Laravel |
---|---|---|
^1.0 | 3.0 | ^7.0 |
^2.0 | 3.0 | ^8.0 |
^2.1 | 3.1 | ^8.0 |
^2.2 | 3.1 | ^8.0 |
^2.3 | 3.2 | ^8.0 |
^2.4 | ^3.0 | ^9.0 |
^2.5 | ^3.0 || ^4.0 | ^9.0 |
^2.6 | ^3.0 || ^4.0 | ^9.0 || ^10.0 |
Installation
Install Classify via composer:
composer require visuellverstehen/statamic-classify
Publish config file
The installation process will automatically publish the classify.php
file into the config
folder.
Usage
Configuration
To add or change style sets, simply add or change an array with classes that should be added to the HTML tag.
'default' => [ 'h1' => 'text-2xl', 'a' => 'link hover:text-blue', 'p' => 'mb-5', 'li p' => 'mb-2 ml-4', ],
This example uses TailwindCSS, but you can use whatever kind of CSS you want.
Example Output
<h1 class="text-2xl">A headline</h1> <p class="mb-5">Some text</p> <ul> <li><p class="mb-2 ml-4">A list item</p></li> <li><p class="mb-2 ml-4">A list item</p></li> <li><p class="mb-2 ml-4"><a class="link hover:text-blue" href="#">Click me</a></p></li> </ul> <p class="mb-5">Another text</p>
Usage
If you want to use the default style set, use the classify
modifier.
{{ bard_text | classify }}
If you want to add multiple style sets, define those in the config file. For example:
'default' => [ // ], 'blog' => [ 'a' => 'link hover:underline', 'li p' => 'ml-3 font-bold', 'p' => 'mb-5', ], // Antlers view {{ bard_text | classify:blog }}
If you want to get the defined classes for a certain element, you can get them straight from your config or use the classify
tag:
{{ classify:h1 }}
// output: text-2xl
{{ classify element="li p" }}
// output: mb-2 ml-4
{{ classify:a styleset="blog" }}
// output: link hover:underline
Nested selectors (min version 2.2)
You can nest your selectors to flexible style elements in different contexts.
Let's assume you want to style links inside lists differently than a general link, you can make use of nesting:
`ul li p a` => 'my-secial-css-class-for-nested-links-in-lists`, `a` => `a-general-link-class`,
The order doesn't matter. Classify will take care of that for you.
Working with CSS frameworks (like TailwindCSS)
Some CSS frameworks utilize JIT compiling, or have some other means of purging CSS classes from production builds to reduce file sizes.
Make sure to include your CSS classes as content, so TailwindCSS can include those in the compiled file. This is important, as your classify CSS classes may not be in your template files, as they will be added dynamically.
module.exports = { content: [ // all of your content files // './pages/**/*.{html,js}' // './components/**/*.{html,js}', './config/classify.php', ], }
More about us
License
The MIT License (MIT). Please have a look at our license file for more information.