Premiers pas
Les thèmes de documents sur Factures.com sont entièrement personnalisables, cette documentation vous aidera à coder vos propres modèles.
Présentation
Nos thèmes sont composés de HTML, CSS et Liquid. Liquid 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
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 :
<div id="document-header">
...
</div>
<div id="document-content">
...
</div>
<div id="document-footer">
...
</div>Le tableau suivant explique ces différents éléments :
<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 <body> 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 <body>.
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 <body> 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{ ... }.
Mis à jour