Documentation

Documentation - Facility.

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

Documentation - Facility. +

Startup

Concepts de base

Utilitaires

Composants

Facility

Install Marssel in a few simple steps and start building modern interfaces in the blink of an eye.

Via NPM (Recommended)

The recommended method to install Marsel is via npm:

npm install @marssel-vb/marssel

Via Yarn

If you prefer Yarn:

yarn add @marssel-vb/marssel

Basic initialization

Import and initialize Marsel in your main JavaScript file:

import { MarsselBundle } from '@marssel-vb/marssel';
const { Marssel } = MarsselBundle;

// Initialiser avec la configuration par défaut
const app = new Marssel();

Generating manifest files

After installation via npm, you can automatically generate manifest files for fonts and icons:

# Generate the font manifest
node node_modules/@marssel-vb/marssel/generators/generate-fonts-manifest.mjs

# Generate the icon manifest
node node_modules/@marssel-vb/marssel/generators/generate-icons-manifest.mjs

By default, these commands generate the manifests in:

public/js/fonts-manifest.json
public/js/icons-manifest.json

You can customize the paths with options:

# Font options
node node_modules/@marssel-vb/marssel/generators/generate-fonts-manifest.mjs \
  --fonts public/fonts \
  --manifest public/js/fonts-manifest.json \
  --pretty

# Options for icons
node node_modules/@marssel-vb/marssel/generators/generate-icons-manifest.mjs \
  --icons public/images/icons \
  --manifest public/js/icons-manifest.json \
  --pretty

Options available:

--fonts : Path of the folder containing the fonts
--icons : Path of the folder containing the icons
--manifest : Manifest file output path
--pretty : Format JSON in a readable way

Configuring manifest files

For Marssel to work correctly, you need to create two configuration files in your public/js folder:

//fonts-manifest.json
{
    "fonts": []
}

//icons-manifest.json
{
  "icons": []
}

These files allow Marssel to efficiently manage the loading of fonts and icons used in your project.

Prevention of FOUC (Flash of Unstyled Content)

Parce que Marssel génère les styles dynamiquement en JavaScript, il y a un court instant où le HTML est affiché avant que les styles ne soient prêts. Cela provoque un "flash de contenu non stylisé" (FOUC).

Pour éviter cela, la solution la plus performante est d'insérer un petit bloc de CSS "critique" directement dans le <head> of your page.

Copy the entire block <style> below and paste it into the <head> of your document, before any other CSS link:

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Marsel project</title>

    <style>
       * {
            box-sizing: border-box;
        }
        *::before,
        *::after {
            box-sizing: border-box;
        }
        body:not(.marssel-ready) {
            opacity: 0;
            visibility: hidden;
        }
        body:not(.marssel-ready) .cookies-wrapper {
            opacity: 0;
            visibility: hidden;
            display: none;
        }
        body:not(.marssel-ready) header,
        body:not(.marssel-ready) footer {
            opacity: 0;
            visibility: hidden;
        }
        body.marssel-ready {
            opacity: 1;
            visibility: visible;
            transition: opacity 0.2s ease-in;
        }
        body.marssel-ready header,
        body.marssel-ready footer {
            opacity: 1;
            visibility: visible;
            transition: opacity 0.15s ease-in;
        }
        p,h1,h2,h3,h4,h5,h6,span {
            margin-block-start: 0;
            margin-block-end: 0;
        }
    </style>
    <script type="module" src="/js/app.js"></script>
</head>
<body>
    // Votre contenu HTML ici
</body>
</html>

Direct download

If you prefer not to use a package manager, you can download the source files directly:

Download ZIP from source

To browse the code or report a bug, visit official GitHub page.

your-project/
├── public/
│   ├── js/
│   │   ├── marssel/          # Extracted file
│   │   ├── fonts-manifest.json
│   │   └── icons-manifest.json
│   └── index.html
└── ...

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>My Marsel project</title>

    <script type="module">
        import { MarsselBundle } from '@marssel-vb/marssel';
        const { Marssel } = MarsselBundle;

        const app = new Marssel({
            lazyload: true
        });
    </script>
</head>
<body>
    // Votre contenu HTML ici
</body>
</html>

Using specific components

If you want to use only certain components without initializing the entire framework:

import { CarouselManager, ModalManager } from '@marssel-vb/marssel';

const carousel = new CarouselManager();
const modal = new ModalManager();

← Previous Introduction

Next → Configuration