Ce framework me permet de mettre en place rapidement une base de css commune à mes projets.
Il est est inspié du tutoriel de Thibaud d'Arros publié sur laConsole.dev et completé par mes besoins et inspirations.
Le but est d'avoir des composants de base sans devenir aussi gros que Bootstrap avec des classes utilitaire à la manière de TailWind.

📁 CSS
    ├── 📁 Compoments
    │   ├── 📄_alerts.css
    │   ├── 📄_badges.css
    │   ├── 📄_buttons
    │   ├── 📄_cards
    │   ├── 📄_carousel
    │   ├── 📄_forms
    │   └── 📄compoments.css
    ├── 📁 Bases
    │   ├── 📄reset.css
    │   ├── 📄typo.css
    │   ├── 📄layout.css
    │   ├── 📄spacing.css
    │   └── 📄utilities.css
    ├── 📄app.css
    ├── 📄config.css
    └── 📄style.css

• Le répertoire Compoments contients les différents composants préfixés d'un underscore
  • compoments.css gèrent les importations des composants
• Le répertoire Bases définit les styles de base
  • reset.css est utilisé pour réinitialiser et normaliser les styles par défauts.
  • typo.css va permettre de gérer les polices et tailles d'écriture.
  • layout.css définit les classes utilisées pour la mise en page responsive.
  • spacing.css définit des classes utilitaires qui gérent le margin, padding et gap.
  • utilities.css définit des classes utilitaires pour position, flex et autres...
• app.css est le fichier principal qui est appelé par index.php
• config.css va nous permettre de personnaliser le style générale (fonts, colors , etc)
• style.css est le fichier ou on va écrire tout ce qui est spécifique a l'application en cours.

Mode d'emploi à créer...

Code PHP :

$flashKeys = ['generic', 'auth', 'profile', 'menus'];
foreach ($flashKeys as $key) {
    $flash = Session::getFlash($key);
    if ($flash) {
        echo '<div class="flash ' . Security::escapeHtml($flash['type']) . '">';
        echo Security::escapeHtml($flash['message']);
        echo '</div>';
    }
}

Code HTML :

<div class="card">
  <div class="card-header">
    <img
      src="./path"
      alt="Description de l'image"
    />
    <div class="badge"></div>
    <div class="badge"></div>
  </div>
  <div class="card-body">
    <h3 class="card-title">Titre</h3>
    <p class="card-description">Texte</p>
    <div class="card-actions">
      ...
    </div>
  </div>
  </div>

Les chemins des images sont contenus dans un tableau indexé ou chaque image est défini par une url et un texte.
$images = [[image_url => 'url', alt_txt => 'texte'], [image_url => 'url', alt_txt => 'texte'], ...]; Code PHP :

$carousel = '';
if (!empty($images)) {
    $carousel .= '
        <div class="carousel" data-carousel>
        <div class="carousel-track">
    ';

    foreach ($images as $index => $image) {
        $carousel .= '<div class="carousel-slide ';
        $carousel .= $index === 0 ? 'active' : '';
        $carousel .= '">
            <img src="" alt="">
            </div>
        ';
    }
    unset($image);
    unset($index);

    $carousel .= '
        </div>
        <button class="carousel-btn prev" data-carousel-prev>⮜</button>
        <button class="carousel-btn next" data-carousel-next>⮞</button>
        <div class="carousel-position">
    ';

    foreach ($images as $index => $image) {
        $carousel .= '<button class="carousel-dot ';
        $carousel .= $index === 0 ? 'active' : '';
        $carousel .= '" data-carousel-dot="'. $index .'"></button>';
    }
    unset($image);
    unset($index);

    $carousel .= '</div></div>';
}

const carousels = document.querySelector("[data-carousel]");

carousels?.forEach((carousel) => {
	const slides = carousel.querySelectorAll(".carousel-slide");
	const dots = carousel.querySelectorAll("[data-carousel-dot]");
	const prevBtn = carousel.querySelector("[data-carousel-prev]");
	const nextBtn = carousel.querySelector("[data-carousel-next]");

	let currentIndex = 0;

	function showSlide(index) {

		slides.forEach((s) => {
			s.classList.remove("active");
		});
		dots.forEach((d) => {
			d.classList.remove("active");
		});

		slides[index].classList.add("active");
		dots[index].classList.add("active");

		currentIndex = index;
	}

	// Slides buttons
	prevBtn?.addEventListener("click", () => {
		const newIndex = currentIndex === 0 ? slides.length - 1 : currentIndex - 1;
		showSlide(newIndex);
	});

	nextBtn?.addEventListener("click", () => {
		const newIndex = currentIndex === slides.length - 1 ? 0 : currentIndex + 1;
		showSlide(newIndex);
	});

	// Dots
	dots.forEach((dot, index) => {
		dot.addEventListener("click", () => showSlide(index));
	});
});

Ce framework est disponible sous license MIT et donc utilisable pour tout type d'usage.

• Rodolphe Dervaux