Ideo3.2 Framework Documentation

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

3.2Breakpoints

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

3.3Helpers, class utilitaires

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

3.4Spacings

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

3.5Text utilities

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

4.1#box

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);

4.2#debug

Mixins permettant de faire des tests de debug CSS

#debug.breakpoints();
#debug.no-alt();
#debug.highlight-all();

4.3#layout

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();

4.4#section

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();
}

4.5#sheet

Mixins spécifiques aux Sheets

#sheet.configTriggerFlags(); : Permet d'afficher le drapeau de la langue en cours dans le configSheetTrigger

4.6#spacing

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);

5.1Bloc

Liste des Shortcodes et variations utilisables dans l'admin IDEO3.2

H1 génère le h1 de la page.

[[h1]]

**Forcer l'alignement à gauche**
[[h1|align-start]]

Formulaire génère un formulaire ou # représente l'ID du formulaire.

[[form_#]]

Plan génère un plan google map ou # représente l'ID du plan.

[[map_#]]

Bloc Image ou # représente l'ID de l'image.

[[img_#]]

**Ajoute la class du style d'image de l'ambiance**
[[img_#|style=amb]]

Depraciated !! ... Hero Image ou # représente l'ID de l'image. Spécifique au Hero du site.

// 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

Depraciated !! ... Hero Video # représente l'ID du fichier vidéo uploader dans l'admin. Spécifique au Hero du site.

// DEPRECIATED, use [[hero_media #]] instead
[[video_#]]
[[video_#|options={autoplay,loop}]]

Hero Media # représente l'ID d'une collection d'image/video. Spécifique au Hero du site.

[[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 # représente l'ID de la collection. Spécifique au Hero du site.

[[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 d'image pour les carousels et les grilles ou # représente l'ID de la collection d'image.

[[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 génére le SVG dans la page (déprécié)

[[svg_include:svg/phone/phone1.svg]]

SVG collection génére le SVG dans la page selon la collection d'icon choisie dans les paramètres du site

[[svg_collection:menu]]

Logo pour l'affichage dans la page des logos uploadés dans les paramètres du site.

[[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]]

5.2Contact

Liste des Shortcodes et variations utilisables dans l'admin IDEO3.2

Contact génére les données du client

**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

5.3Liste de liens
Liste des short codes et variations utilisables dans l'admin IDEO3.2
- Menu de n'avigation génère une liste des liens du site ou # représente l'ID du menu.
```
[[menu_#]]
```
- Social link génére une liste des réseaux sociaux
```
[[social_link]]
```
- Language link génére une liste de liens vers les langues du site
```
**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]]
```
- Settings génére une liste boutons de paramètres (darkmode ...)
```
**Génère le ode HTML pour le panel de préférences des sites IDEO3.2**
[[settings]]
```

5.4Url

Liste des Shortcodes et variations utilisables dans l'admin IDEO3.2

URL génére des url

**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

5.5Widget

Liste des Shortcodes et variations utilisables dans l'admin IDEO3.2

Widget génére un widget html

[[widget_reviews]] Note reviews

**Uniquement pour les sites LINKEO !**
[[linkeo_google_partner]] => show Google Partrner Badge

Couleurs générées (v1)

(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

<insert-markup>design.couleurs.couleurs.v1-</insert-markup>

// empty

Markup: ../../../snippets/components/empty.hbs

// empty

Source: src/cssframework_v2/less/doc.less, line 1417