Documentation IDEO3.2
Documentation du framework CSS/JS IDEO3.2
N'hésitez pas à tester en "dark mode".
Liste des composants IDEO3.2
Le bouton fonctionne dans deux formats, le type liens <a> et le type actions <button>.
Dans les deux cas, il est possible d'avoir un texte plus long sur desktop et plus cours sur mobile via <span class="lg:show"> ..., d'avoir une icon svg, ou d'ajouter un tooltip
Par défaut, le bouton est "inline". Lorsqu'une class d'alignement est appliquée, le bouton devient "block".
<div class="blk-button">
<a href="#" class="button blk-button__link">
<span class="ico blk-button__icon" aria-hidden="true">
<svg></svg>
</span>
<span class="txt blk-button__label">
<span>Button text</span>
</span>
</a>
</div>
<div class="blk-button">
<button class="button blk-button__link">
<span class="ico blk-button__icon" aria-hidden="true">
<svg></svg>
</span>
<span class="txt blk-button__label">
<span class="lg:show">Desktop long text</span>
<span class="lg:hide">Mobile short text</span>
</span>
<span class="txt blk-button__tooltip">
<span>Additional tolltip informations if needed</span>
</span>
</button>
</div>
Le bouton existe en deux couleurs.
Le bouton standard basé sur la couleur accent
Le bouton du CTA principal basé sur la couleur lead
Chaque couleur est décliné en 4 styles, normal, bold, text et outline
Styles additionnels qui peuvent être combinés aux couleurs.
C'est styles ne foctionnent qu'avez des boutons ayant une icone
Différents cas d'utilisation de boutons dans des groupes.
Les groupes de boutons permettent notamment de gérer l'alignement inline.
.buttons-group = Groupe de bouton standard. Les boutons passeront à la ligne si l'espace disponible n'est pas suffisant.
.buttons-group-collapse = Groupe de bouton sans espaces. les boutons resteront toujours sur une même ligne.
.buttons-group-collapse-wrap = Groupe de bouton sans espaces. Les boutons passent en colonnes sur mobile.
<div class="buttons-group">
<div class="blk-button"></div>
<div class="blk-button"></div>
<div class="blk-button"></div>
...
</div>
Remplace les anciens sliders.
Il n'y a pas d'autoplay (car pas accessibility-friendly).
L'affichage par défaut des images est au format d'environ 21/9 pour garantir par défaut des images pas trop hautes dans la page.
Il faut ajouter des class de style, de format ... pour adapter l'affichage (voir ci-dessous).
N'hésitez pas à tester en plein écran, au format mobile ... pour bien voir les différences de fonctionnement.
Important : tous les exemples présentés ici auront une combinaison de plusieurs class.
Il y aura à minima les controls affichés pour faciliter les tests.
Afficher une collection d'image en grille de photos.
Remplace les anciens justified gallery.
Tous les exemples présentés ici auront une combinaison de plusieurs class.
Barre de langues du site.
Liste de liens affichés sous forme de boutons dans le "Config Sheet"
Il n'y a pas de class modifiers.
[[language_link|context=sheet]]
Le paramètre |context=sheet est nécessaire pour générer le texte autour de la barre de liens de langues .
Menu de navigation. Présentation des différents styles disponibles.
L'affichage par défaut est vertical. La class .blk-nav--horizontal permet l'affichage horizontal
Pour le menu mobile, un symbole "🔗" (lien) est ajouté à côté du lien pour faciliter ton identification VS les dossiers de pages.
Important : Les styles de nav s'uttilisent dans un site via des mixins.
Les class.nav-style01, ...n'exsitent pas dans le framework.
Elles ne sont présentent ici que pour montrer les styles dans le documentation.
...
<div class="header__body--nav xl:show">
<nav class="blk-nav blk-nav--main blk-nav--horizontal">
[[menu_1]]
</nav>
</div>
...
...
<div class="blk-sheet__content">
<nav class="blk-nav blk-nav--main">
[[menu_4]]
</nav>
</div>
...
Permet d'afficher un diaporama des photos à partir d'une collection d'images. Le Diaporama est un élément décoratif dont la seule intéraction est de mettre en pause l'animation.
L'affichage par défaut des images est au format d'environ 21/9 pour garantir par défaut des images pas trop hautes dans la page.
Des class supplémentaires permettent d'adapter le style, le format ... (voir ci-dessous).
Les Diaporamas sont présentés ici avec le "figcaption", celui-ci est optionnel.
Important : tous les exemples présentés ici auront une combinaison de plusieurs class.
Liste de liens vers les réseaux sociaux.
Il s'agpit d'une <nav> s'utilisant avec le shortcode [[social_link]] ou ces variantes.
<nav class="blk-socialbar">
<ul>
[[social_link|network=facebook]]
<ul>
</nav>
// Pour les RS custom, utiliser la mixin pour générer la couleur du bouton / de l'icon
// en premier paramètre, mettez le même nom que le custom RS
// en deuxième paramètre, mettez la couleur du bouton
// en troisième paramètre, mettez la couleur de contraste
.social-customrs(soundcloud, #a4e7ff, #e35f00);
Les couleurs des sites sont générées ou pré-générées.
Le systeme de couleur générée (v1) génère des couleurs selon les couleurs input initiales
Le systeme de couleur nuancier (v2) utilise des palettes de couleur pré-générées et permet d'utiliset différentes couleurs et différentes variations en light et dark modes.
Les couleurs sont distribuée sur différentes variables qui sont utilisées dans les différentes composants.
Ces variables sont identiques, que l'on utilise le systeme de couleur générée (v1) ou le systeme de couleur nuancier (v2).
Le jeux de couleurs "Lead" doit être réservé au CTA principal ou à des sections invitant à l'action du CTA principal.
(systeme de couleur v1)
Une palette de couleurs est générée à partir de couleurs principales.
On précise les couleurs principales du site (nom d'une couleur web ou code hexadecimal) via les variables suivantes.
C'est le systeme de couleur de base d'iDEO3.2
@brand: dodgerBlue;
@accent: @brand;
@surface: @brand;
@contrast: @brand;
@text: @brand;
@lead: tomato;
La variable suivante permet de modifier la luminosite des surfaces en darkMode.
Il ne faut pas aller au délà de 12% au risque d'avoir un fond trop clair et un contraste de lecture trop faible.
@darkSurfaceLightness: 10%; // for generate colors only
(systeme de couleur v2)
Palettes de couleurs inclues dans le framework IDEO3.2
Avec ce nouveau systeme de couleur, il est possible d'utiliser des couleurs et des variations différentes en darkMode.
Il faut commencer par importer le nouveau systeme de couleur
@import "@{ambiance-url}less/colors/import.less";
On précise ensuite les couleurs principales du site (nom d'une couleur prégénérée de la palette de couleurs) via les variables suivantes.
// en light mode :
@brand: dodgerBlue;
@accent: @brand;
@lead: tomato;
@contrast: @brand;
@text: @brand;
@surface: @brand;
// en dark mode :
@brand-dark: @brand;
@accent-dark: @accent;
@lead-dark: @lead;
@contrast-dark: @contrast;
@text-dark: @text;
@surface-dark: @surface;
Chaque jeux de couleur est disponible sous 3 différentes variations.
// en light mode :
@brandVariation: 2;
@accentVariation: @brandVariation;
@leadVariation: @brandVariation;
@contrastVariation: @brandVariation;
@textVariation: @brandVariation;
@surfaceVariation: @brandVariation;
// en dark mode :
@brandVariation-dark: @brandVariation;
@accentVariation-dark: @accentVariation;
@leadVariation-dark: @leadVariation;
@contrastVariation-dark: @contrastVariation;
@textVariation-dark: @textVariation;
@surfaceVariation-dark: @surfaceVariation;
Fonts inclues dans le framework IDEO3.2
Il faut commencer par importer le nouveau systeme de fonts
@import "@{ambiance-url}less/fonts/import.less";
On utilise ensuite les variables présentées ci-dessous pour charger la police d'écriture sur le site.
Collections de fonts "sans" Variables, utilisable dans le CMS ideo.
Collections de fonts "script" Variables et regular, utilisable dans le CMS ideo.
Collections de fonts "serif" Variables, utilisable dans le CMS ideo.
Collections d'icons à utiliser avec le short code [[svg_collection]].
Définissez la collection à utiliser dans le CMS IDEO
Collections de labels à utiliser avec le short code [[svg_include]].
Ou à importer dans le CMS IDEO (panel Fichiers)
Breakpoints et class utilitaires
Liste des class de backgrounds et de shadows
// Backgrounds
bg-surface-0
bg-surface-1
bg-surface-2
bg-surface-3
bg-surface-4
bg-surface-5
bg-accent-0
bg-accent-1
bg-lead-0
bg-lead-1
//Shadows
level-low
level-medium
level-hight
Liste des points d'arrêts.
// mobile max height
@mq-xs-height
// small mobile
@mq-xs-down
// large mobile
@mq-sm-up
@mq-sm-only
@mq-sm-down
// large mobile landscape
@mq-sml-down
// large mobile portrait
@mq-smp-down
// small tablet
@mq-md-up
@mq-md-only
@mq-md-down
// small tablet landscape
@mq-mdl-down
// small tablet portrait
@mq-mdp-down
// large tablet
@mq-lg-up
@mq-lg-only
@mq-lg-down
// laptop
@mq-xl-up
@mq-xl-only
@mq-xl-down
// desktop
@mq-2xl-up
@mq-2xl-only
@mq-2xl-down
// 1080p
@mq-1080p-up
@mq-1080p-only
@mq-1080p-down
// 2k
@mq-2k-up
@mq-2k-only
@mq-2k-down
// 4k
@mq-4k-up
// from to breakpoints
@mq-xs-to-sm
@mq-sm-to-md
@mq-md-to-lg
@mq-lg-to-xl
@mq-xl-to-2xl
@mq-2xl-to-1080p
@mq-1080p-to-2k
@mq-2k-to-4k
Liste des class utilitaires.
// blk-image blk-hero-image stretch
stretch
// hide / show
hide
md:show
md:hide
lg:show
lg:hide
xl:show
xl:hide
xxl:show
xxl:hide
//
no-overflow
// Sticky
sticky-top
sticky-offset-top
sticky-bottom
sticky-offset-bottom
Existent en version md:, lg:, xl: et xxl:
ex :
md:sticky-top
// Alignements
text-left
text-right
text-center
text-justify
Existent en version md:, lg:, xl: et xxl:
ex :
md:text-left
// Tailles
xs / tiny
sm / small
lg / large
xl / xlarge
xxl / xxlarge
xxxl / xxxlarge
// Alignement des .row
screen
wide
broad
tight
tight-left
tight-right
tight-right-to-broad
tight-right-to-wide
tight-right-to-screen
tight-to-broad
tight-to-wide
tight-to-screen
broad-to-tight-left
broad-to-tight
broad-to-wide
broad-to-screen
wide-to-tight-left
wide-to-tight
wide-to-broad
wide-to-screen
screen-to-tight-left
screen-to-tight
screen-to-broad
screen-to-wide
full-screen
full-wide
full-broad
full-tight
Existent en version md:, lg:, xl: et xxl:
ex :
md:screen
// Alignement des contenus d'une row ou d'une colonne
grid-content-center
grid-content-top-left
grid-content-top-center
grid-content-top-right
grid-content-bottom-left
grid-content-bottom-center
grid-content-bottom-right
grid-content-center-left
grid-content-center-right
Existent en version md:, lg:, xl: et xxl:
ex :
md:grid-content-center
// Row
reverse
collapse
// Positions des colonnes
col-span-1
col-span-2
col-span-3
col-span-4
col-span-5
col-span-6
col-span-7
col-span-8
col-span-9
col-span-10
col-span-11
col-span-12
col-start-1
col-start-2
col-start-3
col-start-4
col-start-5
col-start-6
col-start-7
col-start-8
col-start-9
col-start-10
col-start-11
col-start-12
row-span-1
row-span-2
row-span-3
row-span-4
row-span-5
row-span-6
row-span-7
row-span-8
row-span-9
row-span-10
row-span-11
row-span-12
row-start-1
row-start-2
row-start-3
row-start-4
row-start-5
row-start-6
row-start-7
row-start-8
row-start-9
row-start-10
row-start-11
row-start-12
Existent en version md:, lg:, xl: et xxl:
ex :
md:col-start-1
Liste des class d'espacements.
// Max Width (em)
mw-70
mw-65
mw-60
mw-55
mw-50
mw-45
mw-40
mw-35
mw-30
// Margins
m-none // margin
mi-none // margin inline
mis-none // margin inline start
mie-none // margin inline end
mb-none // margin block
mbs-none // margin block start
mbe-none // margin block end
m-auto
mi-auto
mis-auto
mie-auto
mb-auto
mbs-auto
mbe-auto
m-tiny
mi-tiny
mis-tiny
mie-tiny
mb-tiny
mbs-tiny
mbe-tiny
m-small
mi-small
mis-small
mie-small
mb-small
mbs-small
mbe-small
m-medium
mi-medium
mis-medium
mie-medium
mb-medium
mbs-medium
mbe-medium
m-large
mi-large
mis-large
mie-large
mb-large
mbs-large
mbe-large
// Paddings
p-none // padding
pi-none // padding inline
pis-none // padding inline start
pie-none // padding inline end
pb-none // padding block
pbs-none // padding block start
pbe-none // padding block end
p-tiny
pi-tiny
pis-tiny
pie-tiny
pb-tiny
pbs-tiny
pbe-tiny
p-small
pi-small
pis-small
pie-small
pb-small
pbs-small
pbe-small
p-medium
pi-medium
pis-medium
pie-medium
pb-medium
pbs-medium
pbe-medium
p-large
pi-large
pis-large
pie-large
pb-large
pbs-large
pbe-large
Liste des class de styles de texte
// Textes
txt-highlight-1
txt-highlight-2
txt-highlight-3
txt-highlight-4
txt-underline-1
txt-color-1
Liste des mixins
Mixins permettant de styler les "boites" ou "blocs"
#box.shadow(@shadow, @shadow-color);
#box.modern-shadow();
#box.filter-shadow(@shadow);
#box.border(@border-color, @border-size);
#box.radius(@radius);
#box.surface(@bg-color);
#box.surface-bold(@bg-color, @fg-color);
#box.surface-gradient(@gradient);
#box.backdrop(@blur, @brightness);
#box.absolute(@level);
Mixins permettant de faire des tests de debug CSS
#debug.breakpoints();
#debug.no-alt();
#debug.highlight-all();
Mixins permettant de faire de la mise en page Flex ou Grid
// Flex base
#layout.flex();
#layout.flex-row-revers();
#layout.flex-wrap();
#layout.flex-column();
#layout.inline-flex();
#layout.inline-flex-wrap();
// Grid base
#layout.grid();
#layout.grid-column();
#layout.inline-grid();
// Items alignement
#layout.place-items-start();
#layout.place-items-center();
#layout.place-items-end();
#layout.place-items-center-start();
#layout.place-items-center-end();
#layout.place-items-start-center();
#layout.place-items-start-end();
#layout.place-items-end-start();
#layout.place-items-end-center();
#layout.place-items-stretch();
// Content alignement
#layout.place-content-start();
#layout.place-content-center();
#layout.place-content-end();
#layout.place-content-center-start();
#layout.place-content-center-end();
#layout.place-content-start-center();
#layout.place-content-start-end();
#layout.place-content-end-start();
#layout.place-content-end-center();
#layout.place-content-stretch();
#layout.place-content-between();
#layout.place-content-around();
#layout.place-content-evenly();
// Justify Self
#layout.justify-self-start();
#layout.justify-self-end();
#layout.justify-self-center();
#layout.justify-self-stretch();
// Align Self
#layout.align-self-start();
#layout.align-self-end();
#layout.align-self-center();
#layout.align-self-baseline();
#layout.align-self-stretch();
Mixins permettant de styler des sections
// 2 colonnes
// Appliquer sur une row contenant deux colonnes avec contenus dans la première colonne et blk-image dans la seconde colonne
// les mixins sont compatibles avec les options de row tel que revers, screen, full-broad, backgrounds, ...
#section#2columns.cta1(); // L'image rempira la section comme fond dans un dégradé transparent vers la gauche
#section#2columns.cta2(); // L'image rempira la section comme fond dans un dégradé transparent vers le bas
#section#2columns.cta3(); // L'image rempira la section comme fond dans un dégradé flou vers la gauche !pas compatible avec les backgrounds.
usage :
.my-class {
#section#2columns.cta1();
}
Mixins spécifiques aux Sheets
#sheet.configTriggerFlags(); : Permet d'afficher le drapeau de la langue en cours dans le configSheetTrigger
Mixins pour générer des paddings ou margins "logiques"
// Margin
#spacing.margin(@margin);
#spacing.margin-inline(@margin);
#spacing.margin-inline-start(@left);
#spacing.margin-inline-end(@right);
#spacing.margin-block(@margin);
#spacing.margin-block-start(@top);
#spacing.margin-block-end(@bottom);
// Padding
#spacing.padding(@padding);
#spacing.padding-inline(@padding);
#spacing.padding-inline-start(@left);
#spacing.padding-inline-end(@right);
#spacing.padding-block(@padding);
#spacing.padding-block-start(@top);
#spacing.padding-block-end(@bottom);
Liste des [[tags]] IDEO3.2
Liste des Shortcodes et variations utilisables dans l'admin IDEO3.2
[[h1]]
**Forcer l'alignement à gauche**
[[h1|align-start]]
[[form_#]]
[[map_#]]
[[img_#]]
**Ajoute la class du style d'image de l'ambiance**
[[img_#|style=amb]]
// DEPRECIATED, use [[hero_media #]] instead
[[hero_img_#]]
[[hero_img_#|hd]] => force l'affichage d'une image 1920. Nécéssite d'avoir uploader une image d'au moins 1920px de large après la mise en prod IDEO du 2 aout 2023
// DEPRECIATED, use [[hero_media #]] instead
[[video_#]]
[[video_#|options={autoplay,loop}]]
[[hero_media_#|type=img|mode=hd]] => Utilisera la première image trouvée dans la collection. mode=hd necessite d'avoir uploader une image d'au moins 1920px de large apres la mise en prod IDEO du 2 aout 2023
[[hero_media_#|type=video|options={autoplay,loop}]] => Utilisera la première video trouvée dans la collection.
[[hero_slideshow_#]]
**Options**
[[hero_slideshow_#|hd]] => force l'affichage d'une image 1920. Nécéssite d'avoir uploader une image d'au moins 1920px
[[hero_slideshow_#|delay:5000]] => définir la duree d'affichage en millisecondes (par défaut 10000)
[[hero_slideshow_#|style1]] => choix du style (de 1 à 5)
[[hero_slideshow_#|format:square]] => format de l'image "landscape", "square" ou "portrait"
[[hero_slideshow_#|infos:title]] => affichage des textes "title" ou "full"
[[collection_#]]
**Affichage des textes**
[[collection_#|infos:none]] (par defaut si rien de préciser)
[[collection_#|infos:title]]
[[collection_#|infos:full]]
**Type d'action**
[[collection_#|action:none]] (par defaut si rien de préciser)
[[collection_#|action:zoom]]
[[collection_#|action:link]]
**Type de lien**
[[collection_#|linktype:img]] (par defaut si rien de préciser)
[[collection_#|linktype:text]]
[[collection_#|linktype:button]]
[[svg_include:svg/phone/phone1.svg]]
[[svg_collection:menu]]
[[contact_logo]]
**Génère l'url de l'image uploadée pour le grand logo**
[[contact_logo]]
Ex : <img src="[[contact_logo]]" ...>
**Génère l'url de l'image uploadée pour le petit logo**
[[contact_logo|format=small]]
Ex : <img src="[[contact_logo|format=small]]" ...>
**Génère le code du SVG uploadé pour le grand logo**
[[contact_logo|type=svg]]
**Génère le code du SVG uploadé pour le petit logo**
[[contact_logo|format=small|type=svg]]
Liste des Shortcodes et variations utilisables dans l'admin IDEO3.2
**Logos**
[[contact_logo]] : Url relative du grand logo image
[[contact_logo|format=small]] : Url relative du petit logo image
[[contact_logo|type=svg]] : Génère le SVG du grand logo
[[contact_logo|format=small|type=svg]] : Génère le SVG du petit logo
**Données clients**
[[contact_enseigne]] : Enseigne de l'entreprise
[[contact_nom]] : Raison sociale
[[contact_nomclient]]
[[contact_siret]]
[[contact_adresse]]
[[contact_cp]]
[[contact_ville]]
[[contact_email]]
[[contact_tel]]
[[contact_fax]]
[[contact_ndd]]
[[contact_googlemap]] : https://www.google.com/maps/place/26+Rue+Bellecordière+69002+Lyon/
[[contact_mobile]]
[[contact_tel]] : 01 23 45 67 89
[[contact_calltracking]] : 09 ## ## ## ##
[[contact_calltracking|format=none]] : 09########
[[contact_calltracking|format=international]] : +33 9 ## ## ## ##
[[contact_calltracking|format=international_none]] : +339########
[[contact_calltracking|format=html]] : <a itemprop="telephone" href="tel:+339########">09 ## ## ## ##</a>
**NEW** spécifique au format html
[[contact_calltracking|format=html|options={"icon":"true"}]] : ajoute une icone devant le numeor de téléphone
[[contact_calltracking|format=html|options={"mention-tarif":"true"}]] : ajoute une mention tarifaire après le numeor de téléphone
[[contact_calltracking|format=html|options={"icon":"true","mention-tarif":"true"}]] : on peut cumuler les deux options
**Non testé dans IDEO3.2**
[[contact_block]] : block contact complet
Liste des short codes et variations utilisables dans l'admin IDEO3.2
[[menu_#]]
[[social_link]]
**Génère le bon code HTML pour le panel de préférences des sites IDEO3.2**
[[language_link|context=sheet]]
**Le tag seul sans context est déprécié pour IDEO3.2**
[[language_link]]
**Génère le ode HTML pour le panel de préférences des sites IDEO3.2**
[[settings]]
Liste des Shortcodes et variations utilisables dans l'admin IDEO3.2
**Type de page**
[[url_accueil]] => renvoi l'url de la page d'accueil de la langue en cours
[[url_contact]] => renvoi l'url de la page de contact de la langue en cours
[[url_mentions]] => renvoi l'url de la page de mentions légales de la langue en cours
[[url_plansite]] => renvoi l'url de la page de plan du site de la langue en cours
[[url_avis]] => renvoi l'url de la page d'avis de la langue en cours
[[url_newsletter]] => renvoi l'url de la page d'inscription à la newsletter de la langue en cours
**Module Deliver**
[[deliver_link]] => url deliver par défaut (réservation et theme light)
[[deliver_link|url=booking]] => url deliver reservation (idem lien par défaut si rien de préciser)
[[deliver_link|url=products]] => url deliver commande
[[deliver_link|url=offers]] => url deliver formules
[[deliver_link|theme=dark]] => url deliver par défaut + theme sombre
[[deliver_link|url=products|theme=dark]] => combinaison url deliver commande + theme sombre
**Module Planner**
[[planner_link]] url planner par défaut
[[planner_link|url=giftcard]] url planner sur les carte cadeaux.
**Autre**
[[ptr]] : racine du site
[[binaries_dir]]/filename.ext : renvoi l'url du dossier binaries sans le protocole
Liste des Shortcodes et variations utilisables dans l'admin IDEO3.2
[[widget_reviews]] Note reviews
**Uniquement pour les sites LINKEO !**
[[linkeo_google_partner]] => show Google Partrner Badge
Documentation du framework CSS/JS IDEO3.2
N'hésitez pas à tester en "dark mode".