Getting Started with Frutjam

Frutjam is a free CSS-only Tailwind CSS v4 UI library. Zero JavaScript, WCAG AA/AAA accessible, framework-agnostic. Build modern interfaces with semantic components that work with Django, HTMX, Laravel, React, and any stack.

Il n'y a pas de configuration compliquée : il utilise la même configuration que Tailwind CSS, vous pouvez donc vous en tenir à ce que vous savez déjà. Et si vous êtes familier avec Bootstrap, les noms des composants vous sembleront intuitifs et faciles à retenir.

Vous pouvez utiliser des préfixes de variantes CSS Tailwind comme dark:, sm:, lg:, xl:, rtl: et ltr: avec n'importe laquelle de nos classes utilitaires.

Ingénierie d’interface utilisateur moderne avec un framework Speed-First

Frutjam est une bibliothèque d'interface utilisateur open source Tailwind CSS v4 - une abstraction de haut niveau conçue pour faciliter le développement Web rapide. Considérez-le comme une boîte à outils qui transforme les classes utilitaires brutes en composants sémantiques prêts pour la production, vous permettant de créer des interfaces modernes avec beaucoup moins de code.

Quels problèmes cela résout-il ?

La plupart des développeurs sont confrontés à une fatigue des utilitaires et passent des heures à écrire de longues chaînes de classes pour des éléments de base tels que les boutons et les entrées. Frutjam élimine ces frictions en fournissant un écosystème plug-and-play.

• Boilerplate redondant : au lieu de réinventer la roue pour chaque projet, vous obtenez des composants prédéfinis qui gèrent les états de focus, les transitions de survol et les comportements réactifs prêts à l'emploi.
• Performance Bloat : contrairement aux frameworks JavaScript lourds, Frutjam donne la priorité à une approche "Pure CSS", garantissant que votre application reste légère et rapide.
• Obstacles à la conformité : créer des interfaces accessibles et optimisées pour le référencement est complexe. La bibliothèque utilise un balisage sémantique et du HTML épuré pour garantir que votre site est intrinsèquement conforme au W3C.

Frutjam est fait pour vous si vous :

• Vous en avez assez d'écrire des milliers de noms de classes utilitaires à plusieurs reprises
• Besoin de livrer des pages de destination et des applications SaaS accessibles et optimisées pour le référencement en un temps record
• Vous souhaitez un système de conception cohérent et entièrement compatible dans n’importe quel environnement ?
• Préférez une solution légère et indépendante du framework, sans aucune dépendance JavaScript obligatoire.

Fonctionnalités de base pour un développement rapide

La boîte à outils suit une philosophie copier, coller et créer, offrant tout ce dont vous avez besoin pour une ingénierie frontend de niveau professionnel.

• Bibliothèque de composants étendue : comprend des éléments essentiels tels que des barres de navigation, des modaux, des accordéons et des tableaux de données raffinés.
• Blocs pré-assemblés : gagnez des heures grâce aux blocs de mise en page pour les sections de tarification, les en-têtes et les zones de héros.
• Système de thème Berry : basculez entre les thèmes intégrés comme Snowberry (clair) et Darkberry (foncé), ou créez le vôtre à l'aide des variables CSS OKLCH.
• Conception axée sur l'accessibilité : chaque composant suit les meilleures pratiques en matière de rôles ARIA et de navigation au clavier. Toutes les paires de couleurs sont des valeurs OKLCH réglées à la main et vérifiées pour passer le contraste WCAG AA – et non des suppositions calculées automatiquement.
• Agnostique du framework : fonctionne de manière transparente, que vous utilisiez React, Next.js, Vue, Django, HTMX, Laravel ou du HTMX statique simple.

Efficacité technique

En utilisant des noms de classe sémantiques, vous pouvez réduire considérablement la taille de votre code HTML par rapport aux flux de travail standard axés sur les utilitaires. Cela se traduit par des bases de code plus propres et plus maintenables, plus faciles à gérer pour les équipes à long terme. La bibliothèque est construite strictement sur Tailwind CSS, vous garantissant de conserver toute la puissance de personnalisation du moteur utilitaire tout en gagnant la vitesse d'un système basé sur des composants.

Prêt à commencer ? Commencez avec l'installation →