Documentation - Syntaxe.
Découvrez Marssel : un framework CSS intelligent, configuration minimale, conçu pour des interfaces rapides et une expérience développeur simplifiée.
Démarrage
Concepts de base
Utilitaires
Syntaxe
Marssel utilise une syntaxe intuitive basée sur des classes utilitaires pour styliser vos éléments HTML. Cette page explique toutes les conventions et formats disponibles.
Format de base : Syntaxe standard
La syntaxe de base suit le pattern : propriété-[valeur]
<div class="bg-[0B63F3]">Fond bleu</div>
<p class="c-[ff0000]">Texte rouge</p>
<button class="p-[20px]">Padding de 20px</button>Propriétés abrégées
Marssel propose des raccourcis pour les propriétés courantes :
<!-- Couleurs -->
<div class="bg-[blue]">background-color</div>
<p class="c-[red]">color</p>
<!-- Espacements -->
<div class="p-[10px]">padding</div>
<div class="m-[20px]">margin</div>
<div class="px-[15px]">padding-left et padding-right</div>
<div class="py-[15px]">padding-top et padding-bottom</div>
<!-- Dimensions -->
<div class="w-[100px]">width</div>
<div class="h-[200px]">height</div>
<!-- Typographie -->
<p class="fs-[16px]">font-size</p>
<p class="fw-[700]">font-weight</p>Valeurs et unités : Unités CSS standard
<!-- Pixels -->
<div class="w-[200px]">Largeur de 200 pixels</div>
<!-- Pourcentages -->
<div class="w-[50%]">Largeur de 50%</div>
<!-- Em / Rem -->
<p class="fs-[1.5rem]">Taille de police de 1.5rem</p>
<p class="m-[2em]">Marge de 2em</p>
<!-- Viewport -->
<div class="h-[100vh]">Hauteur de la fenêtre</div>
<div class="w-[50vw]">Largeur de la fenêtre</div>Classes de Base Automatiques
Lorsque vous utilisez la syntaxe de composant (`---`), Marssel est suffisamment intelligent pour ajouter automatiquement la classe de base pour vous.
Par exemple, si vous écrivez class="btn-primary---[bg-[blue]]", la logique `autoAddBaseClasses` de Marssel analysera le nom et ajoutera automatiquement la classe `btn-primary` à l'élément. Si vous écrivez md--btn---[bg-[red]], il ajoutera la classe `btn` en responsive.
<button class="btn-primary---[bg-[blue]+c-[white]]">Mon Bouton</button>Syntaxe Compacte (Groupée)
Pour styliser une variante de composant, vous pouvez regrouper plusieurs utilitaires entre crochets [...] en les séparant par des +.
La syntaxe est [breakpoint]--[composant]---[utilitaire1+utilitaire2].
<div class="card---[bg-[white]+p-[1rem]+rounded-[8px]]">
Contenu de la carte
</div>
<button class="md--btn1---[bg-[blue]+c-[white]]:hover">
Bouton
</button>
<div class="menu---[bg-[gray]+c-[white]]>span menu---[fw-[700]]>a">
<span>Titre</span>
<a>Lien</a>
</div>
<div class="alert---[bg-[red]!+c-[white]]!">
Alerte importante
</div>Groupes de Styles Racine
Si vous n'avez pas besoin d'une classe de base mais que vous souhaitez simplement regrouper des utilitaires sous une seule classe (pour la clarté ou la réutilisation), vous pouvez omettre la partie `component---`.
La classe entière devient le sélecteur.
Survolez-moi (L'enfant devient vert au survol du parent)
Survolez-moi Le span devient rouge à l'hover
Survolez-moi Avec une classe
Survolez-moi Avec le reponsive lg--
Survolez-moi Avec le reponsive mmd-- et une classe
<div class="[p-[2rem]+bg-[white]+border-[1px_solid_eee]]">
Boîte
</div>
<div class="[c-[red]+fw-[700]]!">
Texte important
</div>
<p class="fs-[40px] c-[green]>span:hover">
<span>Survolez-moi (L'enfant devient vert au survol du parent)</span>
</p>
<p class="[fs-[20px]+c-[red]!]>span:hover">
Survolez-moi
<span>Le span devient rouge à l'hover</span>
</p>
<p class="a---[fs-[40px]+c-[green]>span]!:hover ">
Survolez-moi
<span>Avec une classe</span>
</p>
<p class="lg--[fs-[13px]+c-[orange]]!>span">
Survolez-moi
<span>Avec le reponsive lg--</span>
</p>
<p class="mmd--a22---[fs-[14px]+c-[purple]]>span">
Survolez-moi
<span>Avec le reponsive mmd-- et une classe</span>
</p>Priorité avec !important
Pour forcer la priorité d'un style, ajoutez le symbole ! à la fin de votre classe. Cela ajoute !important à toutes les déclarations CSS générées.
Style Simple
Ajoutez ! après les crochets de valeur pour rendre le style important.
<div class="bg-[red]! c-[white] p-[1rem]">
Background rouge avec !important
</div>
<div class="fs-[24px]! fw-[700]!">
Texte avec taille et poids importants
</div>Syntaxe Compacte
Dans la syntaxe compacte, vous pouvez rendre important soit des styles individuels, soit le groupe entier.
<!-- Style individuel important -->
<div class="card---[bg-[blue]!+c-[white]+p-[2rem]]">
Seul le background est important
</div>
<!-- Groupe entier important -->
<div class="alert---[bg-[red]+c-[white]+p-[1rem]]!">
Tous les styles sont importants
</div>Avec Pseudo-classes
Le ! fonctionne également avec les pseudo-classes comme :hover, :focus, etc.
<!-- Hover normal -->
<button class="btn2---[bg-[blue]+c-[white]]:hover">
Hover normal
</button>
<!-- Hover important -->
<button class="btn21---[bg-[red]+c-[white]]!:hover p-[1rem] ml-[1rem]">
Hover important
</button>Groupes Racine
Dans les groupes racine (sans composant de base), ajoutez le ! après le crochet fermant final.
<!-- Styles normaux -->
<div class="[p-[2rem]+bg-[yellow]+c-[black]]">
Styles normaux
</div>
<!-- Tous les styles importants -->
<div class="[p-[3rem]+bg-[orange]+c-[white]]!">
Tous les styles importants
</div>Gestion des Espaces et des Virgules
Pour gérer les valeurs CSS qui contiennent des espaces ou des virgules, Marssel utilise deux conventions simples.
Espaces (Remplacés par _)
Les noms de classe CSS ne peuvent pas contenir d'espaces. Par conséquent, chaque fois que votre valeur CSS nécessite un espace, vous devez utiliser un underscore _. Marssel le convertira automatiquement en espace lors de la génération du CSS.
<div class="border-[2px_solid_0B63F3] p-[1rem]">
border: 2px solid #0B63F3
</div>
<div class="font-[Open_Sans] fw-[700] mt-[1rem]">
font-family: 'Open Sans'
</div>
<div class="[content-[Bonjour_le_monde!]+c-[red]]:before mt-[1rem]">
content: "Bonjour le monde!"
</div>Virgules (Utilisées telles quelles ,)
Pour les fonctions CSS qui nécessitent des virgules (comme `rgba()`, `linear-gradient()`, `box-shadow`, etc.), vous pouvez utiliser la virgule , directement à l'intérieur des crochets []. Marssel la reconnaît et l'inclut correctement dans la valeur générée.
<div class="c-rgba-[255,100,50,0.8]">...</div>
<div class="bg-linear-[to_right,blue,red]">...</div>
<div class="box-shadow-[0_20px_6px_rgba(0,0,0,0.1)]">...</div>