Documentation

Documentation - Facility.

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

Documentation - Facility. +

Startup

Basic concepts

Utilities

Components

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)

Because Marssel generates the styles dynamically in JavaScript, there is a short time when the HTML is displayed before the styles are ready. This causes a "flash of unstyled content" (FOUC).

To avoid this, the most efficient solution is to insert a small block of "critical" CSS directly into the <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