Styleguide

Composants

Header
Footer
Hero
Filter
Ariane
Thumb
Thumb list
Imagefull
Social
Infos pratiques
Page Content
Offices
Header + Hero
Header + Hero + Filter
Exemple avec multiple chargement de components + body class

Elements

Colors
Fonts
Icons
Inline
Links
Title
Buttons
Form elements

Colors

White to black

$color1-100 | $color1-200 | $color1-300 | $color1-400 | $color1-500

$color1-100 | #ffffff
$color1-200 | #FBFBFB
$color1-300 | #F1F1F1
$color1-400 | #9F9F9F
$color1-500 | #2C2C2C
<div style="background-color:#ffffff;">$color1-100 | #ffffffdiv>
<div style="background-color:#FBFBFB;">$color1-200 | #FBFBFBdiv>
<div style="background-color:#F1F1F1;">$color1-300 | #F1F1F1div>
<div style="background-color:#9F9F9F;">$color1-400 | #9F9F9Fdiv>
<div style="background-color:#2C2C2C;">$color1-500 | #2C2C2Cdiv>

Blue

$color2-100 | $color2-200

$color2-100 | #01B3BF
$color2-200 | #0C2663
<div style="background-color:#01B3BF;">$color2-100 | #01B3BFdiv>
<div style="background-color:#0C2663;">$color2-200 | #0C2663div>

Fonts

Futura bold

.futura-bold

lorem
<div class="futura-bold">loremdiv>

Futura light

.futura-light

lorem
<div class="futura-light">loremdiv>

Icons

Fontawesome

.fab fa-facebook-square 

<i class="fab fa-facebook-square">i>
<i class="fab fa-instagram">i>
<i class="fas fa-map-marker-alt">i>
<i class="fas fa-check">i>
<i class="fas fa-hashtag">i>
<i class="fas fa-heart">i>
<i class="fas fa-thumbs-up">i>
<i class="fas fa-copyright">i>
<i class="fas fa-home">i>
<i class="fas fa-info-circle">i>

logo 2

.icon_logo2 

<svg class="icon_logo2">
  <use xlink:href="../wp-content/themes/ivisitplus/src/assets/svg/generated/sprite.svg#logo-turquoise">use>
svg>

Coeur

.icon_coeur 

<div style="background-color:gray; padding: 1rem;">
  <svg class="icon_coeur">
    <use xlink:href="../wp-content/themes/ivisitplus/src/assets/svg/generated/sprite.svg#coeur">use>
  svg>
div>

circle

.icon_cirle 

<div style="background-color:gray; padding: 1rem;">
  <div class="icon_cirle">div>
div>

Inline

Paragraphe

lorem ispum

<p>lorem ispump>

Lien 1

lorem

lorem 
<a href="google.com">lorema>

Title

H1

.H1-like

Lorem

<h1 class="H1-like">Loremh1>

H1 2

.H1-like2

Lorem

<h1 class="H1-like2">Loremh1>

H2

Lorem

<h2>Loremh2>

H3

Lorem

<h3>Loremh3>

H5

Lorem
<h5>Loremh5>

Buttons

Button exemple

.button1 

<div style="background-color:gray; padding: 1rem;">
  <a href="http://www.google.fr" class="button1">lorema>
div>
<div style="background-color:gray; padding: 1rem;">
  <a href="http://www.google.fr" class="button1 button1-active">isset dolor amena>
div>

Form