Logo Csibon coloré

WEB Style guide

PAR intuitiweb
// logo //
< For dev >
Section à affichage automatique
FAVICON CSIBON
Favicon light
Logo Csibon coloré
LOGO alt light
Logo Csibon
LOGO alt Dark
FAVICON CSIBON
Favicon dark
// couleurs //
< For dev >
Section à affichage automatique
Primaire
#fdb233
Trans 03
Trans 05
Trans 10
Trans 20
Trans 30
Trans 40
Trans 50
Trans 60
Trans 70
Trans 80
Trans 90
#ea4a6d
SECONDAIRE
#3cb0b6
Trans 03
Trans 05
Trans 10
Trans 20
Trans 30
Trans 40
Trans 50
Trans 60
Trans 70
Trans 80
Trans 90
#3cb0b6
ACCENT
#ea4a6d
Trans 03
Trans 05
Trans 10
Trans 20
Trans 30
Trans 40
Trans 50
Trans 60
Trans 70
Trans 80
Trans 90
#ea4a6d
Some text some message..
// TYPOGRAPHIES //
< For dev >
À renseigner manuellement
Titre
Nom Font 01
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
The quick brown fox jumps over the lazy dog.
alternative
Nom Font 02
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
The quick brown fox jumps over the lazy dog.
Courante
Nom Font 03
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
The quick brown fox jumps over the lazy dog.
// TITRES //
< For dev >
Paramétrage des titres dans Settings > Theme style >Typography

Je suis un titre H1

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

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.
.link_multiligne_00_light
Je suis un lien par class
.link_multiligne_00_dark
Je suis un lien par class
.link_multiligne_00_alt
Je suis un lien par class
< For dev >
Si on utilise la seconde variante de classe, il faut enlever la classe .dev_hide du groupe
.link_multiligne_01_light
Je suis un lien par class
.link_multiligne_01_dark
Je suis un lien par class
.link_multiligne_01_alt
Je suis un lien par class
// FORMULAIRES //
Un p'tit cookie pour commencer ?
Notre site utilise des cookies pour améliorer votre expérience de navigation. En continuant à utiliser notre site, vous acceptez notre utilisation de cookies conformément à notre politique de confidentialité.