README

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

Example webpage

Explore the variety of components default webpage, run:

php -S localhost:9000 -t public

Basic Usage

Create the Twig environment with TwigService or register the components with ComponentRegistrar:

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 project is licensed under the MIT License - see the LICENSE file for details.

Happy coding! ✨

derafu / twig

Maintainers

Details