{"id":21543239,"url":"https://github.com/visuellverstehen/statamic-classify","last_synced_at":"2025-04-10T04:38:10.306Z","repository":{"id":42082645,"uuid":"288400565","full_name":"visuellverstehen/statamic-classify","owner":"visuellverstehen","description":"A useful helper to add CSS classes to all HTML tags generated by the bard editor.","archived":false,"fork":false,"pushed_at":"2024-05-22T13:32:01.000Z","size":225,"stargazers_count":15,"open_issues_count":3,"forks_count":4,"subscribers_count":7,"default_branch":"main","last_synced_at":"2024-05-22T13:53:31.394Z","etag":null,"topics":["laravel","php","statamic","statamic-addon","statamic-bard","statamic-v3","tailwindcss"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/visuellverstehen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-08-18T08:35:45.000Z","updated_at":"2024-05-22T05:13:57.000Z","dependencies_parsed_at":"2024-01-19T09:13:45.867Z","dependency_job_id":"d3f5a31b-174e-4554-960c-3a2bae32c462","html_url":"https://github.com/visuellverstehen/statamic-classify","commit_stats":{"total_commits":64,"total_committers":10,"mean_commits":6.4,"dds":0.453125,"last_synced_commit":"46bbcb66f52132137b03697d62eb126e9f09fac7"},"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/visuellverstehen%2Fstatamic-classify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/visuellverstehen%2Fstatamic-classify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/visuellverstehen%2Fstatamic-classify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/visuellverstehen%2Fstatamic-classify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/visuellverstehen","download_url":"https://codeload.github.com/visuellverstehen/statamic-classify/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248159786,"owners_count":21057385,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["laravel","php","statamic","statamic-addon","statamic-bard","statamic-v3","tailwindcss"],"created_at":"2024-11-24T05:13:36.280Z","updated_at":"2025-04-10T04:38:10.288Z","avatar_url":"https://github.com/visuellverstehen.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Statamic 4](https://img.shields.io/badge/Statamic-v4-FF269E?style=for-the-badge\u0026link=https://statamic.com)](https://statamic.com/addons/visuellverstehen/classify) \n[![Statamic 5](https://img.shields.io/badge/Statamic-v5-FF269E?style=for-the-badge\u0026link=https://statamic.com)](https://statamic.com/addons/visuellverstehen/classify) \n[![Latest version on Packagist](https://img.shields.io/packagist/v/visuellverstehen/statamic-classify.svg?style=for-the-badge)](https://packagist.org/packages/visuellverstehen/statamic-classify)\n\n# Classify\nClassify is a useful helper to add CSS classes to all HTML tags generated by the Statamic [Bard](https://statamic.dev/fieldtypes/bard) editor. \n\n# Installation\n\n## Requirements\n\n- Statamic v4 || v5\n- Laravel 10 || 11\n- PHP 8.2+\n\n## Installation\n\nInstall Classify via composer:\n\n```bash\ncomposer require visuellverstehen/statamic-classify\n```\n\n## Publish config file\n\nThe installation process will automatically publish the `classify.php` file into the `config` folder.\n\n## Usage\n\n### Configuration\nTo add or change style sets, simply add or change an array with classes that should be added to the HTML tag.\n```php\n'default' =\u003e [\n    'h1' =\u003e 'text-2xl',\n    'a'  =\u003e 'link hover:text-blue',\n    'p' =\u003e 'mb-5',\n    'li p' =\u003e 'mb-2 ml-4',\n],\n```\n*This example uses TailwindCSS, but you can use whatever kind of CSS you want.*\n\n### Example Output\n```html\n\u003ch1 class=\"text-2xl\"\u003eA headline\u003c/h1\u003e\n\u003cp class=\"mb-5\"\u003eSome text\u003c/p\u003e\n\n\u003cul\u003e\n    \u003cli\u003e\u003cp class=\"mb-2 ml-4\"\u003eA list item\u003c/p\u003e\u003c/li\u003e\n    \u003cli\u003e\u003cp class=\"mb-2 ml-4\"\u003eA list item\u003c/p\u003e\u003c/li\u003e\n    \u003cli\u003e\u003cp class=\"mb-2 ml-4\"\u003e\u003ca class=\"link hover:text-blue\" href=\"#\"\u003eClick me\u003c/a\u003e\u003c/p\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cp class=\"mb-5\"\u003eAnother text\u003c/p\u003e\n```\n\n### Usage\n\nIf you want to use the default style set, use the `classify` modifier. \n```php\n{{ bard_text | classify }}\n```\n\nIf you want to add multiple style sets, you can define those in the config file:\n```php\n'default' =\u003e [\n    // \n],\n'blog' =\u003e [\n    'a'  =\u003e 'link hover:underline',\n    'li p' =\u003e 'ml-3 font-bold',\n    'p' =\u003e 'mb-5',\n],\n\n// Antlers view\n{{ bard_text | classify:blog }}\n```\n\nIf you want to get the defined classes for a certain element, you can get them straight from your config or use the `classify` tag:\n```\n{{ classify:h1 }}\n// output: text-2xl\n\n{{ classify element=\"li p\" }}\n// output: mb-2 ml-4\n\n{{ classify:a styleset=\"blog\" }}\n// output: link hover:underline\n```\n\n## Nested selectors\nYou can nest your selectors to style elements differently in varying contexts. \n\nLet's assume you want to style links inside lists differently to a general link, you can make use of nesting:\n\n```php\n`ul li p a` =\u003e 'my-secial-css-class-for-nested-links-in-lists`,\n`a` =\u003e `a-general-link-class`,\n```\n\nClassify will take care of the order, so you don't need to define the nested selector before the general selector.\n\n## Working with CSS frameworks (like TailwindCSS)\n\nSome CSS frameworks utilize JIT compiling, or have some other means of purging CSS classes from production builds to reduce file size. Your classify CSS classes may not appear anywhere else in your template files, as they will be added dynamically. To make sure that your classes will be considered for compiling, you have to include the classify config file as content:\n\n```js\nmodule.exports = {\n  content: [\n    // all of your content files\n    // './pages/**/*.{html,js}'\n    // './components/**/*.{html,js}',\n    './config/classify.php',\n  ],\n}\n```\n\n# More about us\n- [www.statamic-agency.com](https://statamic-agency.com)\n- [www.visuellverstehen.de](https://visuellverstehen.de)\n\n# License\nThe MIT License (MIT). Please have a look at our [license file](LICENSE.md) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvisuellverstehen%2Fstatamic-classify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvisuellverstehen%2Fstatamic-classify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvisuellverstehen%2Fstatamic-classify/lists"}