Styles

The components are HTML with the classes of Bootstrap 5, the icons of Font Awesome 6 and the CSS of the package. A page that shows them needs the three.

What the Page Needs

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
<link rel="stylesheet" href="/path/to/components.css">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

The CDN is one way to have Bootstrap and Font Awesome; use the one that your application uses.

The CSS of the Package

resources/css/components.css imports the CSS of every component, which is in resources/css/components, one file per component (block-alert.css, block-card-grid.css…). Link components.css after Bootstrap and the @import of it are resolved relative to its path, so the directory components has to be next to it.

How the file gets to the page depends on the application: reference it in the CSS of the application (@import '../../vendor/derafu/twig-components/resources/css/components.css';), copy the directory to where the application serves its assets, or give it to the asset system that the application has.

Customizing

The CSS of the components reads the CSS variables of Bootstrap (--bs-primary, --bs-body-color, --bs-border-color…), so the theme of Bootstrap, and the variables that you set for it, are the ones of the components.

The JavaScript

Twelve components use the JavaScript of Bootstrap through data-bs-* attributes, so they need bootstrap.bundle.min.js in the page:

block-accordion, block-alert, block-gallery, block-header, block-image-grid, block-modal, block-offcanvas, block-scrollspy, block-table, block-tabs, block-testimonials and block-toast.

The others are only HTML and CSS.