Documentation

Documentation - Installation.

Découvrez Marssel : un framework CSS intelligent, configuration minimale, conçu pour des interfaces rapides et une expérience développeur simplifiée.

Documentation - Installation. +

Démarrage

Concepts de base

Utilitaires

Composants

Installation

Installez Marssel en quelques étapes simples et commencez à construire des interfaces modernes en un clin d'œil.

Via NPM (Recommandé)

La méthode recommandée pour installer Marssel est via npm :

npm install @marssel-vb/marssel

Via Yarn

Si vous préférez Yarn :

yarn add @marssel-vb/marssel

Initialisation de base

Importez et initialisez Marssel dans votre fichier JavaScript principal :

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

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

Génération des fichiers manifest

Après l'installation via npm, vous pouvez générer automatiquement les fichiers manifest pour les fonts et les icons :

# Générer le manifest des fonts
node node_modules/@marssel-vb/marssel/generators/generate-fonts-manifest.mjs

# Générer le manifest des icons
node node_modules/@marssel-vb/marssel/generators/generate-icons-manifest.mjs

Par défaut, ces commandes génèrent les manifests dans :

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

Vous pouvez personnaliser les chemins avec des options :

# Options pour les fonts
node node_modules/@marssel-vb/marssel/generators/generate-fonts-manifest.mjs \
  --fonts public/fonts \
  --manifest public/js/fonts-manifest.json \
  --pretty

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

Options disponibles :

--fonts : Chemin du dossier contenant les fonts
--icons : Chemin du dossier contenant les icons
--manifest : Chemin de sortie du fichier manifest
--pretty : Formater le JSON de manière lisible

Configuration des fichiers manifest

Pour que Marssel fonctionne correctement, vous devez créer deux fichiers de configuration dans votre dossier public/js :

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

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

Ces fichiers permettent à Marssel de gérer efficacement le chargement des polices et icônes utilisées dans votre projet.

Prévention du 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> de votre page.

Copiez l'intégralité du bloc <style> ci-dessous et collez-le dans le <head> de votre document, avant tout autre lien CSS :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon projet Marssel</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>

Téléchargement direct

Si vous préférez ne pas utiliser de gestionnaire de paquets, vous pouvez télécharger directement les fichiers sources :

Télécharger le ZIP de la source

Pour parcourir le code ou signaler un bug, visitez la page GitHub officielle.

votre-projet/
├── public/
│   ├── js/
│   │   ├── marssel/          # Dossier extrait
│   │   ├── fonts-manifest.json
│   │   └── icons-manifest.json
│   └── index.html
└── ...

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Mon projet Marssel</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>

Utilisation de composants spécifiques

Si vous souhaitez utiliser uniquement certains composants sans initialiser tout le framework :

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

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

← Précédent Introduction

Suivant → Configuration