Documentation

Documentation - Configuration.

Discover Marssel: an intelligent, minimal configuration CSS framework designed for fast interfaces and a simplified developer experience.

Documentation - Configuration. +

Startup

Basic concepts

Utilities

Components

Configuration

Marssel offers many configuration options to tailor the framework to your specific needs.

Basic options

When initializing Marssel, you can pass a configuration object:

import { MarsselBundle } from '@marssel-vb/marssel';
const { Marssel } = MarsselBundle;
const app = new Marssel({
    lazyload: false,
    theme: 'auto',
    themes: {},
    components: {},
    paths: {}
});

Available options: lazyload

lazyload / Type: boolean / Default: false

const app = new Marssel({
    lazyload: true
});

Options available: theme

theme / Type: string / Default: 'auto'

Sets the active theme on loading. The possible values are:

'light' : Clear theme
'dark' : Dark theme
'auto' : Follows system preferences

// Thème clair
const app = new Marssel({
    theme: 'light'
});

// Thème sombre
const app = new Marssel({
    theme: 'dark'
});

// Automatique (suit les préférences système)
const app = new Marssel({
    theme: 'auto'
});

Options available: themes

themes / Type: object / Default: {}

Allows you to customize the colors and variables of your themes. You can extend or replace the default themes.

Structure of a theme: Each theme uses custom CSS variables: custom properties. :

Main color variables
Background and text variables
Border and shadow variables
Any custom CSS variable

Smart Merge: Custom themes are merged with Marssel's default themes. You only need to set the values you want to change.

const app = new Marssel({
    themes: {
        light: {
            '--theme-primary': '#0B63F3',
            '--theme-secondary': '#8b5cf6',
            '--theme-bg': '#ffffff',
            '--theme-text': '#1f2937'
        },
        dark: {
            '--theme-primary': '#60a5fa',
            '--theme-secondary': '#a78bfa',
            '--theme-bg': '#1f2937',
            '--theme-text': '#f9fafb'
        }
    }
});

Available options: components

components / Type: object / Default: {}

Allows you to define custom styles for reusable components using Marsl syntax.

const app = new Marssel({
    components: {
        'btn-primary': 'bg-[blue] c-[white] p-[3rem] rounded-[20px] bg-[red]:hover'
    }
});

Features

Using Marsl syntax
Support for pseudo-classes (:hover, :focus, etc.)
Reusable classes throughout the project
Array or string format

const app = new Marssel({
    components: {
        'btn-1': [
            'bg-[theme-mirage]!',
            'rounded-[100px]!',
            'c-[white]!',
            'px-[24px]!',
            'py-[12px]!',
            'fw-[600]'
        ],
        'btn-1:hover': [
            'bg-[theme-peach]!',
            'c-[theme-mirage]!'
        ]
    }
});

Available options: paths

paths / Type: object / Default: {}

Allows you to customize manifest file paths for fonts and icons. Useful if your project structure differs from the default configuration.

const app = new Marssel({
    paths: {
        fontsManifest: '/js/fonts-manifest.json',   // Chemin par défaut
        iconsManifest: '/js/icons-manifest.json'    // Chemin par défaut
    }
});

Example with custom paths:

const app = new Marssel({
    paths: {
        fontsManifest: '/assets/manifests/fonts.json',
        iconsManifest: '/assets/manifests/icons.json'
    }
});

Available properties:

fontsManifest : Path of the font manifest file (default: /js/fonts-manifest.json)
iconsManifest : Path of the icon manifest file (default: /js/icons-manifest.json)

💡 Trick : When generating manifests with CLI commands, make sure to use the same paths configured in the paths option.

Smart Cache

Type: Automatic / No configuration required

Marssel implements an intelligent caching system that significantly speeds up subsequent page loads. The cache works automatically, without configuration.

Organizing the setup

Separate configuration file (Recommended)

For better organization, create dedicated configuration files:

/**
* marssel.config.js
* Marsel component configuration file
* Centralizes all styles of reusable components
*/
export const componentStyles = {
    'btn-1': [
        'bg-[theme-mirage]!',
        'rounded-[100px]!',
        'c-[white]!',
        'px-[24px]!',
        'py-[12px]!',
        'd-[inline-block]',
        'fw-[600]',
        'text-decoration-[none]'
    ],
    'btn-1:hover': [
        'bg-[theme-peach]!',
        'c-[theme-mirage]!'
    ]
};

export const customThemes = {
    light: {
        '--theme-primary': '#0B63F3',
        '--theme-secondary': '#8b5cf6'
    },
    dark: {
        '--theme-primary': '#60a5fa',
        '--theme-secondary': '#a78bfa'
    }
};

export const customPaths = {
    fontsManifest: '/assets/fonts-manifest.json',
    iconsManifest: '/assets/icons-manifest.json'
};

Then import into your main file:

import { MarsselBundle } from '@marssel-vb/marssel';
const { Marssel } = MarsselBundle;
import { componentStyles, customThemes, customPaths } from './marssel.config.js';

const app = new Marssel({
    lazyload: true,
    theme: 'auto',
    themes: customThemes,
    components: componentStyles,
    paths: customPaths
});

← Previous Facility

Next → Syntax