Documentation - Syntax.
Discover Marssel: an intelligent, minimal configuration CSS framework designed for fast interfaces and a simplified developer experience.
Startup
Concepts de base
Utilitaires
Syntax
Marssel uses an intuitive syntax based on utility classes to style your HTML elements. This page explains all the conventions and formats available.
Basic format: Standard syntax
The basic syntax follows the pattern: property-[value]
<div class="bg-[0B63F3]">Blue background</div>
<p class="c-[ff0000]">Red text</p>
<button class="p-[20px]">20px padding</button>Abbreviated Properties
Marssel offers shortcuts for common properties:
<!-- Colors -->
<div class="bg-[blue]">background-color</div>
<p class="c-[red]">color</p>
<!-- Spacings -->
<div class="p-[10px]">padding</div>
<div class="m-[20px]">margin</div>
<div class="px-[15px]">padding-left and padding-right</div>
<div class="py-[15px]">padding-top and padding-bottom</div>
<!-- Dimensions -->
<div class="w-[100px]">width</div>
<div class="h-[200px]">height</div>
<!-- Typography -->
<p class="fs-[16px]">font-size</p>
<p class="fw-[700]">font-weight</p>Values and units: Standard CSS units
<!-- Pixels -->
<div class="w-[200px]">200 pixel width</div>
<!-- Percentages -->
<div class="w-[50%]">50% width</div>
<!-- Em/Rem -->
<p class="fs-[1.5rem]">1.5rem font size</p>
<p class="m-[2em]">2nd margin</p>
<!-- Viewport -->
<div class="h-[100vh]">Window height</div>
<div class="w-[50vw]">Window width</div>Automatic Base Classes
When you use component syntax (`---`), Marssel is smart enough to automatically add the base class for you.
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]]">My Button</button>Compact Syntax (Grouped)
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]]">
Card content
</div>
<button class="md--btn1---[bg-[blue]+c-[white]]:hover">
Button
</button>
<div class="menu---[bg-[gray]+c-[white]]>span menu---[fw-[700]]>a">
<span>Title</span>
<a>Link</a>
</div>
<div class="alert---[bg-[red]!+c-[white]]!">
Important alert
</div>Root Style Groups
If you don't need a base class but just want to group utilities under a single class (for clarity or reuse), you can omit the `component---` part.
The entire class becomes the selector.
Hover over me (Child turns green on parent hover)
Hover over me The span turns red in winter
Hover over me With a class
Hover over me With responsive lg--
Hover over me With the mmd-- response and a class
<div class="[p-[2rem]+bg-[white]+border-[1px_solid_eee]]">
Box
</div>
<div class="[c-[red]+fw-[700]]!">
Important text
</div>
<p class="fs-[40px] c-[green]>span:hover">
<span>Hover over me (Child turns green on parent hover)</span>
</p>
<p class="[fs-[20px]+c-[red]!]>span:hover">
Hover over me
<span>The span turns red in winter</span>
</p>
<p class="a---[fs-[40px]+c-[green]>span]!:hover ">
Hover over me
<span>With a class</span>
</p>
<p class="lg--[fs-[13px]+c-[orange]]!>span">
Hover over me
<span>With responsive lg--</span>
</p>
<p class="mmd--a22---[fs-[14px]+c-[purple]]>span">
Hover over me
<span>With the mmd-- response and a class</span>
</p>Priority with !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.
Simple Style
Ajoutez ! après les crochets de valeur pour rendre le style important.
<div class="bg-[red]! c-[white] p-[1rem]">
Red background with !important
</div>
<div class="fs-[24px]! fw-[700]!">
Text with large size and weight
</div>Compact Syntax
In compact syntax, you can make either individual styles or the entire group important.
<!-- Important individual style -->
<div class="card---[bg-[blue]!+c-[white]+p-[2rem]]">
Only the background is important
</div>
<!-- Large whole group -->
<div class="alert---[bg-[red]+c-[white]+p-[1rem]]!">
All styles are important
</div>With Pseudo-classes
Le ! fonctionne également avec les pseudo-classes comme :hover, :focus, etc.
<!-- Normal hover -->
<button class="btn2---[bg-[blue]+c-[white]]:hover">
Normal hover
</button>
<!-- Important hover -->
<button class="btn21---[bg-[red]+c-[white]]!:hover p-[1rem] ml-[1rem]">
Important hover
</button>Root Groups
Dans les groupes racine (sans composant de base), ajoutez le ! après le crochet fermant final.
<!-- Normal styles -->
<div class="[p-[2rem]+bg-[yellow]+c-[black]]">
Normal styles
</div>
<!-- All important styles -->
<div class="[p-[3rem]+bg-[orange]+c-[white]]!">
All important styles
</div>Managing Spaces and Commas
To handle CSS values that contain spaces or commas, Marssel uses two simple conventions.
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>