ClassyBlocks - Configuration¶
Configuration¶
CSS frameworks¶
Go to CSS Classes > Settings to enable/disable the frameworks:
| Framework | Recommended use |
|---|---|
| Bootstrap | Sites already using Bootstrap |
| Tailwind CSS | Utility-first, CDN bundle |
| Bulma | Pure Flexbox, lightweight |
| UIkit | Complete components |
| Materialize | Material Design |
| Pure CSS | Minimalist |
| Spectre | Micro-framework |
| Semantic UI | Semantic classes |
| Foundation | Full framework |
Each framework can be enabled separately for Editor, Admin, and Frontend.
Create a class¶
- Go to CSS Classes > Dashboard
- Click Add New Class
- Enter a name and CSS properties (e.g.
color: red; font-size: 18px;) - Add any pseudo-states (:hover, :focus, :active, :visited)
- Save and assign a pack
Use classes in Gutenberg¶
- Open a post/page with Gutenberg
- Select a block
- In the sidebar, open the ClassyBlocks panel
- Check the classes to apply (live preview included)