Démarrer avec Trilogy

Structure d'un document

Template de base

Une page utilise les trois éléments HTML suivant : header, main.main-content et footer.

Pour faciliter la lecture, ces trois éléments sont par défaut contraints sur les très grands écrans. Pour vous afranchir de cette contrainte, vous pouvez ajouter la classe .is-fullwidth sur chacun de ces trois éléments.

                            <!DOCTYPE html>
                            <html lang="fr">
                            <head>
                            <meta charset="utf-8">
                            <meta name="viewport" content="width=device-width,minimum-scale=1">
                            <link rel="stylesheet" href="https://assets.bouyguestelecom.fr/TRILOGY/trilogy-framework@1.18.2/trilogy.css">

                            <title>Titre de ma page</title>
                            <meta name="description" content="La description de ma page en 160 caractères maximum">
                            </head>
                            <body>
                            <header><!-- En-tête de votre page--></header>
                            <main class="main-content"> <!-- Contenu de votre page --></main>
                            <footer> <!-- Pied de page --></footer>
                            </body>
                            </html>

Mode wireframe

Les sections

L'élément de base d'une page Trilogy est l'élément HTML section, utilisé ainsi : <section class="section">.

Une section gère les marges principales de la page et prend toute la largeur disponible.

Les sections sont les enfants directs de main.main-content et hébergent tous vos contenus.

                            <header><!-- En-tête de votre page--></header>
                            <main class="main-content">
                            <section class="section">Une première section</section>
                            <section class="section">Une seconde section</section>
                            <section class="section">Une dernière section</section>
                            </main>
                            <footer><!-- Pied de votre page--></footer>

Mode wireframe

Le container

L'élément qui suit directement une section de base est le container (<div class="container">). Il est chargé de restreindre votre contenu en fonction de la largeur de la page. C'est aussi lui qui contiendra les rangées et les colonnes permettant d'organiser votre contenu selon une grille.

Pour rendre le container utilisable sur toute la largeur de votre section, utilisez la classe is-fluid

                            <header><!-- En-tête de votre page--></header>
                            <main class="main-content">
                            <section class="section">
                            <div class="container is-fluid">
                            Contenu inséré ici, restreint automatiquement selon les règles du design system et la taille du viewport (ou pas, si l'on utilise la classe "is-fluid")
                            </div>
                            </section>
                            </main>
                            <footer><!-- Pied de votre page--></footer>

Mode wireframe

Les colonnes

A l'intérieur d'un container, vous pouvez utiliser des colonnes afin d'agencer votre contenu horizontalement.

En savoir plus sur les colonnes

                            <div class="columns">
                            <div class="column">Contenu ici</div>
                            <div class="column">Contenu là</div>
                            </div>

Mode wireframe

Les rangées

A l'intérieur d'un container, vous pouvez aussi utiliser des rangées afin d'agencer votre contenu verticalement.

En savoir plus sur les rangées

                            <div class="rows">
                            <div class="row">Contenu ici</div>
                            <div class="row">Contenu là</div>
                            </div>

Mode wireframe