WEB Style guide
PAR intuitiweb
L
// logo //
< For dev >
Section à affichage automatique
Favicon light
LOGO alt light
LOGO alt Dark
Favicon dark
// couleurs //
< For dev >
Section à affichage automatique
Primaire
#0971a7
Trans 03
Trans 05
Trans 10
Trans 20
Trans 30
Trans 40
Trans 50
Trans 60
Trans 70
Trans 80
Trans 90
#f6a21c
ACCENT
#f6a21c
Trans 03
Trans 05
Trans 10
Trans 20
Trans 30
Trans 40
Trans 50
Trans 60
Trans 70
Trans 80
Trans 90
#f6a21c
// TYPOGRAPHIES //
< For dev >
À renseigner manuellement en changeant la font-family de chaque classe.
À noter que le nom de la font s'affiche automatiquement en front-end
À noter que le nom de la font s'affiche automatiquement en front-end
Titre
Nom Font 01
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
The quick brown fox jumps over the lazy dog.
Portez ce vieux whisky au juge blond qui fume
Cet élève garçon à l'œil vif : pour son âge et le bien-être de Zoë, jusqu'où ira-t-il ?!
alternative / textes
Nom Font 02
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
The quick brown fox jumps over the lazy dog.
Portez ce vieux whisky au juge blond qui fume
Cet élève garçon à l'œil vif : pour son âge et le bien-être de Zoë, jusqu'où ira-t-il ?!
manuscrite
Nom Font 03
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
The quick brown fox jumps over the lazy dog.
Portez ce vieux whisky au juge blond qui fume
Cet élève garçon à l'œil vif : pour son âge et le bien-être de Zoë, jusqu'où ira-t-il ?!
// TITRES //
< For dev >
Paramétrage des titres dans Settings > Theme style >Typography
Je suis un titre H1
Je suis un titre H2
Lorem ipsum dolor sit amet. Aut provident autem est sint atque quo asperiores accusamus sed suscipit consequatur rem voluptas omnis. Et accusantium incidunt non perspiciatis veritatis est officiis ratione!
Je suis un titre H3
Lorem ipsum dolor sit amet. Aut provident autem est sint atque quo asperiores accusamus sed suscipit consequatur rem voluptas omnis. Et accusantium incidunt non perspiciatis veritatis est officiis ratione!
Je suis un titre H4
Lorem ipsum dolor sit amet. Aut provident autem est sint atque quo asperiores accusamus sed suscipit consequatur rem voluptas omnis. Et accusantium incidunt non perspiciatis veritatis est officiis ratione!
Je suis un titre H5
Lorem ipsum dolor sit amet. Aut provident autem est sint atque quo asperiores accusamus sed suscipit consequatur rem voluptas omnis. Et accusantium incidunt non perspiciatis veritatis est officiis ratione!
Je suis un titre H6
Lorem ipsum dolor sit amet. Aut provident autem est sint atque quo asperiores accusamus sed suscipit consequatur rem voluptas omnis. Et accusantium incidunt non perspiciatis veritatis est officiis ratione!
Body XL - Lorem ipsum dolor sit amet. Aut provident autem est sint atque quo asperiores accusamus sed suscipit consequatur.
Body L - Lorem ipsum dolor sit amet. Aut provident autem est sint atque quo asperiores accusamus sed suscipit consequatur rem voluptas omnis. Et accusantium incidunt non perspiciatis veritatis est officiis ratione!
Body DEFAUT - Lorem ipsum dolor sit amet. Aut provident autem est sint atque quo asperiores accusamus sed suscipit consequatur rem voluptas omnis. Et accusantium incidunt non perspiciatis veritatis est officiis ratione!
Body S - Lorem ipsum dolor sit amet. Aut provident autem est sint atque quo asperiores accusamus sed suscipit consequatur rem voluptas omnis. Et accusantium incidunt non perspiciatis veritatis est officiis ratione!
Body XS - Lorem ipsum dolor sit amet. Aut provident autem est sint atque quo asperiores accusamus sed suscipit consequatur rem voluptas omnis. Et accusantium incidunt non perspiciatis veritatis est officiis ratione!
ICON
XXL
XXL
XL
L
M
S
XS
// Framework //
< For dev >
Section à affichage automatique
font sizes
font-h1
4.768rem (76px) / 5.96rem (95px)
font-h2
3.816rem (61px) / 4.77rem (76px)
font-h3
3.048rem (49px) / 3.81rem (61px)
font-h4
2.44rem (39px) / 3.05rem (49px)
font-h5
1.952rem (31px) / 2.44rem (39px)
font-h6
1.56rem (25px) / 1.95rem (31px)
font-body-xl
1.248rem (20px) / 1.56rem (25px)
font-body-l
1rem (16px) / 1.25rem (20px)
font-body-defaut
0.8rem (13px) / 1rem (16px)
font-body-s
0.64rem (10px) / 0.8rem (13px)
font-body-xs
0.512rem (8px) / 0.64rem (10px)
MÉdia sizes
icon-xxl
75px (4.69rem) / 150px (9.38rem)
icon-xl
80px (5rem) / 100px (6.25rem)
icon-l
60px (3.75rem) / 75px (4.69rem)
icon-m
40px (2.5rem) / 50px (3.13rem)
icon-s
20px (1.25rem) / 25px (1.56rem)
icon-xs
12px (0.75rem) / 15px (0.94rem)
logo
150px (9.38rem) / 200px (12.5rem)
OTHER sizes
space-xxl
112px (7rem) / 140px (8.75rem)
space-xl
80px (5rem) / 100px (6.25rem)
space-l
56px (3.5rem) / 70px (4.38rem)
space-m
40px (2.5rem) / 50px (3.13rem)
space-s
20px (1.25rem) / 25px (1.56rem)
space-xs
8px (0.5rem) / 10px (0.63rem)
space-xxs
4px (0.25rem) / 5px (0.31rem)
space-footer
200px (12.5rem) / 0px (0rem)
padding-left-footer
20px (1.25rem) / 250px (15.63rem)
XL
XL
L
L
M
M
S
S
XS
XS
Border sizes
radius-l
radius-m
radius-s
border-l
S
M
L
// TEXTES //
< For dev >
Classe .spoiler_text à mettre sur l'item désiré
Spoil Alert : Et perspiciatis beatae et rerum voluptas sed exercitationem architecto Non voluptatibus voluptas ut ducimus harum eos sunt quaerat sed expedita sint aut velit dolorum est reprehenderit sequi et necessitatibus quod. Ut esse molestiae aut internos eligendi quo sunt quam in accusantium voluptas aut nihil alias sed labore molestiae. Et perspiciatis beatae et rerum voluptas sed exercitationem architecto. Lorem ipsum dolor sit amet. Aut provident autem est sint atque quo asperiores accusamus sed suscipit consequatur rem voluptas omnis. Et accusantium incidunt non perspiciatis veritatis est officiis ratione! Qui repudiandae voluptate qui reprehenderit voluptatibus id velit internos!
< For dev >
Classe .text-with-list à mettre sur l'item désiré
Liste icones : on asperiores similique et fugit omnis et deserunt praesentium?
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
- Nunc dignissim risus id metus.
- Cras ornare tristique elit.
- Vivamus vestibulum ntulla nec ante.
- Praesent placerat risus quis eros.
< For dev >
Modifier la classe .pattern_01 pour customiser le background
// MENU //
// BOUTONS //
< For dev >
Modifications des boutons "classiques" grâce aux sélecteurs BRICKS
et des boutons custom grâce au CSS du thème enfant dans CSS/ front_butons.css
et des boutons custom grâce au CSS du thème enfant dans CSS/ front_butons.css
Btn Solid LightBtn Outline LightBtn Custom Light
Btn Solid DarkBtn Outline DarkBtn Custom Dark
Btn Solid Alt.Btn Outline Alt.Btn Custom Alt.
< For dev >
Pour ajuster la taille des boutons, on utilise le selector BRICKS Size,
et pour définir chacune des tailles, on le fait à gauche dans Settings > Theme style > Element - Buton
et pour définir chacune des tailles, on le fait à gauche dans Settings > Theme style > Element - Buton
Btn SmallBtn MediumBtn LargeBtn Extra Large
Btn SmallBtn MediumBtn LargeBtn Extra Large
// RÉSEAUX SOCIAUX //
< For dev >
Modifications des icons grâce aux sélecteurs BRICKS
ICONS Maintenance
ICONS header
ICONS footer
// LIENS //
< For dev >
Les différentes class des liens sont accessibles dans le CSS du thème enfant dans css/front_links.css
Copier/coller l'effet désiré dans la section LINKS GLOBAL
Copier/coller l'effet désiré dans la section LINKS GLOBAL
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Sit exercitationem similique magnam qui consequatur quia est eligendi quod et rerum officiis et quia placeat. Qui repudiandae voluptate qui reprehenderit voluptatibus id velit internos!
Variantes
< For dev >
Pour obtenir des variantes et surcharger la classe "a" en fonction du background, il faut appliquer sur le lien la classe correspondante.
< For dev >
Si on utilise la seconde variante de classe, il faut enlever la classe .dev_hide du groupe
// FORMULAIRES //