Derafu: Twig - UI Component and Extension Library
Derafu Twig is a comprehensive UI component library for Twig, designed to work standalone or with any PHP framework. Built with Bootstrap 5 and Font Awesome 6, it provides a collection of reusable, customizable components for rapid web development.
Features
- π¨ Rich Component Library: Extensive collection of UI components including headers, footers, cards, grids, and more.
- π― Framework Agnostic: Works with any PHP framework or standalone Twig.
- π§ Highly Customizable: Theme support with CSS variables for easy styling.
- π± Responsive Design: All components are mobile-first and fully responsive.
- 𧩠Modular Architecture: Components can be used independently or combined.
- π Theme System: Built-in theme support with easy customization.
- π¦ Bootstrap 5 Integration: Leverages Bootstrapβs grid system and utilities.
- ποΈ Font Awesome 6: Integrated icon support.
- π·οΈ MIT License: Open-source and free to use.
Component Categories
Block Components
- Layout: Header, Footer, Grid.
- Content: Cards, Features (Grid, List, Icon, Table), Text with Image/Video.
- Navigation: Tabs, Steps, Timeline.
- Interaction: Accordion, CTA (Call to Action).
- Showcasing: Team, Testimonials, Hero, Image.
- Comparison: Tables, Boxes, Comparison grids.
Extensions
- Markdown: render markdown content with
markdown
filter.
Installation
Install the library using Composer:
composer require derafu/twig
Basic Usage
- Create the Twig environment with
TwigService
or register the components withComponentRegistrar
:
use Derafu\Twig\Service\TwigService;
$options = [
'paths' => [
__DIR__ . '/../templates', // Path to the derafu-twig templates.
__DIR__ . '/pages', // Path to your templates.
],
];
$twigService = new TwigService($options);
echo $twigService->render('example.html.twig');
- Use components in your Twig templates:
{# Example using a card grid component #}
<twig:block-card-grid
:cols="3"
:cards="[
{
'image': 'path/to/image.jpg',
'title': 'Card Title',
'description': 'Card description text',
'button_text': 'Learn More',
'button_url': '#'
}
]"
/>
Key Concepts
Theme System
Components support theming through CSS variables:
.derafu-theme-default {
--color-primary: #0d6efd;
--color-secondary: #6c757d;
--color-tertiary: #198754;
}
Component Structure
Each component follows a consistent structure:
- PHP Class: Defines component properties and logic.
- Twig Template: Handles component rendering.
- CSS: Component-specific styles.
Documentation
Visit our documentation site for:
- Live demos.
- Detailed component examples.
- List of themes and predefined colors.
Roadmap
- π More component variations.
- π± Enhanced mobile optimizations.
- π¨ Additional theme presets.
- π Internationalization features.
Contributing
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
License
This package is open-sourced software licensed under the MIT license.
Happy coding! β¨