6.1 KiB
Revue Décor 6 — Site Web-to-Print
Repo du site de la revue décor 6 (ENSAD), réalisé en web-to-print avec Kirby CMS et Paged.js.
Templates
| Template | Description |
|---|---|
home |
Version web du site |
print |
Version print du site |
Snippets
| Fichier | Description |
|---|---|
footer.php |
Footer du site |
head.php |
<head> du site |
header.php |
<header> du site (contient la navigation et le logo) |
nav.php |
Menu du site |
logo.php |
Logo du site |
Blocks personnalisés
Le projet comporte de nombreux blocks personnalisés :
blank — Page blanche
Insère une page blanche dans le document print.
<div class="blank-page"></div>
break — Saut de page
Insère un saut de page dans le document print.
<div class="pagebreak"></div>
fullpageimage — Image pleine page
Insère une image en pleine page avec effet full-bleed.
gallery — Galerie d'images
Insère une galerie d'images.
image — Image (web + print)
Insère une image avec une séparation en couches pour le print (trichromie).
Le block génère deux figures distinctes :
.web-image— figure affichée uniquement en version web, avec une image unique..print-image.float-image— figure affichée uniquement en version print, décomposée en trois couches colorées :.print-red/.red-layer— couche rouge.print-green/.green-layer— couche verte.print-blue/.blue-layer— couche bleue
Chaque couche accepte une image séparée, permettant une impression en trichromie. Une légende optionnelle (figcaption) est partagée entre les deux versions.
imagefloat — Image flottante
Insère une image flottante dans le texte. Utilise la classe .float-image.
interview — Interview (en cours)
Insère un bloc interview. Utilise la classe .interview-block.
spreadimage — Image en double page
Insère une image s'étendant sur une double page. Utilise la classe .spread-image.
video — Vidéo
Insère une vidéo.
text — Texte formaté
Insère un bloc de texte avec mise en forme.
Fichiers CSS
Tous les fichiers CSS se trouvent dans assets/css/.
| Fichier | Description |
|---|---|
main.css |
Fichier partagé entre la version web et la version print |
print-template.css |
Fichier de classes pré-faites pour le print — ne pas modifier |
print.css |
Styles exclusifs à la version print |
reset.css |
Reset CSS |
responsive.css |
Styles responsive pour la version web |
variables.css |
Déclaration des variables CSS — définir les variables ici |
web.css |
Styles exclusifs à la version web |
Documentation de print-template.css
Ce fichier contient des classes utilitaires prêtes à l'emploi pour la mise en page print. Ne pas écrire dedans.
Gestion des images
figure img.fill /* Remplit le conteneur en déformant l'image si nécessaire */
figure img.contain /* Affiche l'image en entier sans la rogner */
figure img.cover /* Remplit le conteneur en rognant l'image */
Sauts de page
.page /* Insère une page après l'élément */
.pagebreak /* Insère un saut de page après l'élément */
.blank-page /* Insère une page blanche (sans en-têtes ni pieds de page) */
Alignement de blocs de texte
.alignment-left /* Texte aligné à gauche, sans césure */
.alignment-right /* Texte aligné à droite, sans césure */
.alignment-center /* Texte centré, sans césure */
.alignment-justify /* Texte justifié avec césure automatique */
Images de fond et pleine page
Image pleine page (.full-bleed-image)
Positionne une image en pleine page avec bleed, s'adaptant selon la page gauche ou droite.
.full-bleed-image /* Image full-bleed positionnée en absolu */
.full-bleed-image.full-page /* Image couvrant la hauteur totale de la page */
Image en double page (.spread-image)
S'étend sur une double page grâce à --pagedjs-full-page: spread.
.spread-image /* Image couvrant le spread complet */
Image d'intervalle (.interval-image et .spread-interval-image)
Pages d'illustration entre des chapitres, avec fond via --backgroundImage.
.interval-image /* Page d'image seule, fond via CSS variable */
.spread-interval-image-left /* Première page du spread d'intervalle */
.spread-interval-image-right /* Seconde page du spread (image étendue à 200%) */
Image de fond (.background-image)
Image positionnée en fond de page, couvrant toute la surface de la page courante.
.background-image /* Image de fond pleine page */
Légendes (figcaption)
Les légendes sur fond image ont un style commun : fond blanc, bordure arrondie, couleur --green.
/* Positionnement selon le type d'image */
.full-bleed-image figcaption /* Bas de page, aligné gauche ou droite selon la page */
.spread-image figcaption /* Bas gauche du spread */
.interval-image figcaption /* Bas gauche de la page d'intervalle */
Colonnes de texte
.col-2 /* Texte sur 2 colonnes */
.col-3 /* Texte sur 3 colonnes */
Grille d'images
Le système de grille est basé sur 12 colonnes avec grid-gap: 0.5cm.
Largeur des figures :
figure /* 3 colonnes (défaut) */
figure.third /* 4 colonnes */
figure.half /* 6 colonnes */
figure.twothird /* 8 colonnes */
figure.threequarter /* 9 colonnes */
figure.full /* 12 colonnes (pleine largeur) */
Décalage (offset) :
figure.offset2 /* Commence à la colonne 3 */
figure.offset4 /* Commence à la colonne 5 */
figure.offset6 /* Commence à la colonne 7 */
figure.offset8 /* Commence à la colonne 9 */
/* Combinable avec les classes de largeur, ex : figure.half.offset4 */
Alignement vertical :
figure.top /* Aligné en haut */
figure.center /* Centré verticalement */
figure.bottom /* Aligné en bas */