# Premiers pas ### Présentation Nos thèmes sont composés de HTML, CSS et Liquid. [Liquid](http://liquidmarkup.org/) est un langage de création de templates fréquemment utilisé par la communauté Ruby. Très simple d'utilisation, nous vous invitons à consulter le lien suivant pour une introduction au markup :\ [Liquid pour les designers](https://github.com/Shopify/liquid/wiki/Liquid-for-Designers) Pour la partie CSS du modèle, vous pouvez utiliser soit du CSS classique, soit Sass avec la syntaxe Sassy CSS (SCSS). Cela vous permet d'enrichir votre CSS avec des variables, des mixins, etc. **Remarque :**\ Toutes les variables décrites dans ce document sont également disponibles dans les textes par défaut de votre compte. ### Structure **Structure HTML** Tous les thèmes doivent suivre une structure HTML stricte (mais simple) qui ressemble à ceci : ```

...

``` Le tableau suivant explique ces différents éléments :

Element	Requis	Description
`<div id="document-header"></div>`	Non	Ceci représente l'en-tête de votre thème. Tout ce qui se trouve à l'intérieur de cet élément sera répété en haut de chaque page du fichier PDF.
`<div id="document-content"></div>`	Oui	Ceci représente le contenu de votre thème. C'est ici que vous devez insérer les lignes, les totaux et les textes de début et de fin de document.
`<div id="document-footer"></div>`	Non	Ceci représente le pied de page de votre thème. Tout ce qui se trouve à l'intérieur de cet élément sera répété au bas de chaque page du fichier PDF.

**Important** Vous ne devez pas ajouter d'élément `` dans votre code HTML car votre code de thème sera inséré à l'intérieur du code HTML de Factures.com qui possède déjà un élément ``. Structure SCSS Voici un exemple de structure SCSS de base pour styliser un modèle de thème: ``` #document-header, #document-content, #document-footer{ // Template global related style } #document-header{ // Header related style } #document-content{ // Content related style } #document-footer{ // Footer related style } ``` **Important** Étant donné que vous n'avez aucun élément `` dans votre code HTML, chaque règle CSS que vous souhaitez rendre globale sur votre modèle, par exemple la déclaration de police de caractères, doit se trouver à l'intérieur du bloc `#document-header, #document-content, #document-footer{ ... }`. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://documentation.factures.com/systeme-de-themes/premiers-pas.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.