Donnez du style à vos pages.
Simplement. Instantanément.
Stylisez vos pages en écrivant directement dans le HTML.
Configuration minimale, pas de compilation.
Juste du CSS qui marche.
<button class="bg-[blue] c-[white] px-[2rem] py-[1rem] rounded-[10px]">
Click me
</button>
Cliquez sur le bouton
pour changer le style
Le code à gauche — le résultat à droite. Exactement ce que vous verrez en production.
Vous écrivez dans le HTML. Marssel fait le reste.
Pas de fichier CSS à créer. Pas de compilation. Vous ajoutez une classe, le style apparaît.
2 fichiers à gérer, du contexte à switcher en permanence.
.ma-carte {
padding: 20px;
border-radius: 12px;
background: white;
}
<!-- index.html -->
<div class="ma-carte">...</div>
Un seul fichier. Vous écrivez, vous voyez. C'est tout.
<div class="
p-[20px]
rounded-[12px]
bg-[white]
">...</div>
Installez Marssel
Une commande npm, puis quelques lignes d'initialisation JS — et c'est parti.
Ajoutez des classes
Directement dans votre HTML, comme vous le feriez en CSS.
Marssel génère le CSS
Automatiquement, uniquement pour ce que vous utilisez.
L'esprit Tailwind, la liberté du Runtime
Pas besoin de configurer un fichier tailwind.config.js ou de lancer un watcher. Avec l'option components, vous créez vos propres utilitaires réutilisables instantanément. C'est la puissance des classes atomiques, la flexibilité du JS en plus.
// app.js
new Marssel({
components: {
'btn': 'px-[1.5rem] py-[0.75rem] rounded-[8px]',
'btn:hover': 'transform-[scale(1.05)]'
}
});
// Dans le HTML
<button class="btn">Cliquez</button>C'est pas juste du CSS inline ?
On nous pose souvent la question. Voici pourquoi Marssel est un moteur de style, pas une simple béquille HTML.
Le Responsive sans limites
L'inline CSS est incapable de gérer les états (:hover, :focus) ou les écrans mobiles. Marssel le fait nativement.
Intelligence du Cache
Contrairement à l'inline qui duplique le poids, Marssel mutualise. Une classe utilisée 50 fois = 1 seule règle CSS.
Syntaxe JIT
Oubliez les configs interminables. Les crochets vous donnent accès à tout le spectre CSS instantanément.
Pourquoi Marssel ?
Nous avons supprimé la complexité pour ne garder que la créativité.
Lisible
Plus de classes mystérieuses. p-[20px] fait exactement ce que vous pensez.
Rapide
Génération à la volée. Seules les classes utilisées sont injectées dans le DOM.
Précis
Composants natifs : Modals, Toasts, Tooltips prêts à l'emploi sans JS supplémentaire.
Performant
Cache intelligent + lazyload : styles instantanés au refresh, chargement progressif.
Pensé pour toute l'équipe
Un langage commun qui réconcilie rapidité d'apprentissage et besoins complexes.
Débutants
Connaître le CSS, c'est déjà connaître Marssel. Pas de nouvelle logique à assimiler, juste du style à écrire là où il se trouve.
Développeurs
Productivité maximale. Gérez vos thèmes, vos composants réutilisables et vos animations sans jamais quitter votre fichier HTML.
p-[20px] → padding: 20px
Équipes
Fini le 'CSS Spaghetti'. Marssel impose une structure naturelle et lisible que n'importe quel membre peut reprendre en main.
Performance et légèreté
La performance n'est pas une option, c'est notre fondation. Marssel élimine la dette technique : pas de fichiers inutilisés, pas de compilation. Juste un moteur ultra-léger optimisé pour la vitesse brute.
15 +
Composants natifs
< 50KB
Gzip
0
Dépendances
100%
CSS Valide
Prêt à commencer ?
Rejoignez les développeurs qui ont choisi la simplicité.
# Installation via npm
npm install @marssel-vb/marssel --save
# Ou avec yarn
yarn add @marssel-vb/marssel