Blocs et sections de l'interface utilisateur – Construisez plus rapidement
Blocs et sections de l'interface utilisateur CSS Tailwind uniquement en CSS. Pas de JavaScript, WCAG AA accessible, indépendant du framework. Copiez-collez des héros, des en-têtes, des sections de tarification et des blocs de fonctionnalités. Fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Les blocs sont des sections de pages prêtes à la production, assemblées à partir de composants Frutjam. Chaque bloc est un HTMX autonome : déposez-le dans n'importe quel modèle Django, fichier Laravel Blade, page HTMX ou composant React et il fonctionne immédiatement. Les blocs héritent automatiquement de votre thème Frutjam actif, donc basculer entre un thème clair, sombre ou personnalisé ne nécessite aucune modification du code HTMX du bloc. Tous les blocs sont uniquement CSS, accessibles aux WCAG AA et construits pour Tailwind CSS v4 – pas de JavaScript, pas de pipeline de construction au-delà de Tailwind lui-même.
En-tête
Blocs d'en-tête CSS Tailwind uniquement CSS avec barre de navigation, image de marque et tiroir mobile. Variantes de mise en page collantes, transparentes et réactives. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Héros
Blocs de héros CSS Tailwind uniquement CSS : sections de page de destination prêtes à l'emploi avec des mises en page centrées, divisées et d'images. Aucun JavaScript requis, WCAG AA accessible. Fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Tarifs
Blocs de tarification CSS Tailwind uniquement CSS construits avec des composants de carte et de bouton. Copiez-collez les tableaux de prix avec les niveaux, les listes de fonctionnalités et les CTA. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
Que sont les blocs ?
Les blocs sont des sections de page plus grandes et prêtes à l'emploi, construites en composant ensemble des composants Frutjam. Là où un composant est un élément unique de l’interface utilisateur (un bouton, une carte, un badge), un bloc est une section de mise en page complète – un héros, un tableau de prix, un en-tête de site – prête à être copiée et collée dans votre projet.
CSS uniquement
Chaque bloc est construit avec des composants Frutjam et des utilitaires CSS Tailwind – zéro JavaScript, pas de dépendances supplémentaires.
Copier-coller prêt
Chaque bloc est du HTMX autonome. Collez-le dans n'importe quel modèle Django, Laravel Blade, page HTMX ou composant React.
Conscient du thème
Les blocs héritent automatiquement de votre thème Frutjam actif : changez de thème et tous les blocs sont mis à jour sans aucune modification nécessaire.
Quelle est la différence entre un bloc et un composant ?
Un composant est un élément d'interface utilisateur unique et réutilisable : un bouton, une carte, un badge. Un bloc est une section de page complète qui compose plusieurs composants dans une mise en page : une section héros, un tableau de prix, un en-tête de site avec barre de navigation et tiroir mobile. Utiliser des composants pour créer des mises en page personnalisées ; utilisez des blocs pour un assemblage rapide des pages.
Les blocs fonctionnent-ils avec Django, HTMX et Laravel ?
Oui – les blocs sont en HTMX simple utilisant les classes de composants Frutjam. Ils fonctionnent dans n'importe quel système de modèles : Django, HTMX, Laravel Blade, Rails ERB, Jinja2 ou HTMX statique. Pas de framework JavaScript, pas d'étape de construction au-delà de Tailwind CSS lui-même.
D'autres blocs sont-ils ajoutés ?
Oui, de nouveaux blocs sont ajoutés régulièrement. Les forfaits Pro et Team incluent l'accès à des blocs premium, notamment des sections de fonctionnalités, des témoignages, des CTA et des modèles de page complète.