Style Guide CRM Immo Beta 1

isActive Btn top Action principale top Sample Btn top 01

Typo

Titres

H1 // Titre de premier niveau (2.3em = 32px)

H2 // Titre de second niveau (1.75em = 24px)

H3 // Titre de troisième niveau (1.285em = 18px)

H4 // Titre de quatrième niveau (1.15em = 16px)

H5 // Titre de cinquième niveau (1em = 14px = taille texte par défaut)
H6 // Titre de sixième niveau (0.85em = 12px)

Tailles de texte

Texte de taille 1 // class="is-size-1" (2.3rem = 32px)
Texte de taille 2 // class="is-size-2" (1.75rem = 24px)
Texte de taille 3 // class="is-size-3" (1.285rem = 18px)
Texte de taille 4 // class="is-size-4" (1.15rem = 16px)
Texte de taille 5 // class="is-size-5" (1rem = 14px = taille texte par défaut)
Texte de taille 6 // class="is-size-6" (0.85rem = 12px)
Texte de taille 7 // class="is-size-7" (0.725rem = 10px)

Corps

Corps de text light // class="has-text-weight-light"
Corps de text normal = corps par défault // class="has-text-weight-normal"
Corps de text medium // class="has-text-weight-medium"
Corps de text bold = rendu de la balise strong // class="has-text-weight-bold"
Corps de text black // class="has-text-weight-black"

Couleurs

texte

Couleur générique (= couleur par défaut) // aucune class
Couleur primaire // class="has-text-primary"
Couleur black bis // class="has-text-black-bis"
Couleur black ter // class="has-text-black-ter"
Couleur grey dark // class="has-text-grey-dark"
Couleur grey // class="has-text-grey"
Couleur grey light // class="has-text-grey-light"
Couleur grey lighter // class="has-text-grey-lighter"
Couleur white ter // class="has-text-white-ter"
Couleur white bis // class="has-text-white-bis"
Couleur info // class="has-text-info"
Couleur succès // class="has-text-success"
Couleur warning // class="has-text-warning"
Couleur danger // class="has-text-danger"
Couleur disponible // class="has-text-disponible"
Couleur optionné // class="has-text-optionne"
Couleur réservé // class="has-text-reserve"
Couleur acté // class="has-text-acte"
Couleur brouillon // class="has-text-draft"

Backgrounds

Information importante : pr les bg l'utilisation des classes "is-primary, is-info, ..." et déprecié au profit des classes de type "has-bg-primary, has-bg-info, ...".
Dans la mesure du plausible utiliser le moins possible au profit de composants/éléments sur mesure.

Couleur primaire // class="has-bg-primary"
Couleur black // class="has-bg-black"
Couleur dark // class="has-bg-dark"
Couleur light // class="has-bg-light"
Couleur info // class="has-bg-info"
Couleur succès // class="has-bg-success"
Couleur warning // class="has-bg-warning"
Couleur danger // class="has-bg-danger"
Couleur disponible // class="has-bg-disponible"
Couleur optionné // class="has-bg-optionne"
Couleur réservé // class="has-bg-reserve"
Couleur acté // class="has-bg-acte"
Couleur brouillon // class="has-bg-draft"
Couleur propre au client (BRAND)
`has-bg-brand`
Couleur des annonces
`has-bg-annonce
Ts les bg ont 3 niveau de darken
`has-bg-brand-darken-1
Ts les bg ont 3 niveau de darken
`has-bg-brand-darken-2
Ts les bg ont 3 niveau de darken
`has-bg-brand-darken-3
Notification
has-bg-notification`
Activité sortie
has-bg-acSortie`
Activité sortie
has-bg-acCommerce`
Activité sortie
has-bg-acEcole`
Activité sortie
has-bg-acTransport`
Activité sortie
has-bg-acSante`

Formulaires

Champs

This username is available

This email is invalid

Select

Checkboxes / radios / switches

Radios / Checkboxes / Input, de type CASE

Boutons

GitHub Twitter Save Delete Bouton transparent avec icone Save
GitHub GitHub GitHub GitHub

Helpers

Suppression des marges

Cerains éléments ont des marges que l'on ne désire pas systématiquement (ex les titres Hn qui ont tous un margin-bottom).

Pour supprimer ces marges au cas par cas utiliser les classes :

  • is-marginless (supprime toutes les marges de l'élément)
  • is-marginless-top (supprime la marge top de l'élément)
  • is-marginless-bottom (supprime la marge bottom de l'élément)
  • is-marginless-left (supprime la marge left de l'élément)
  • is-marginless-right (supprime la marge right de l'élément)

Suppression des paddings

Cerains éléments ont des paddings que l'on ne désire pas systématiquement (ex column).

Pour supprimer ces paddings au cas par cas utiliser les classes :

  • is-paddingless (supprime toutes les paddings de l'élément)
  • is-paddingless-top (supprime le padding top de l'élément)
  • is-paddingless-bottom (supprime le padding bottom de l'élément)
  • is-paddingless-left (supprime le padding left de l'élément)
  • is-paddingless-right (supprime le padding right de l'élément)

Ajout de Marges

Pour ajouter une marge aux éléments utilisez les classes :

  • is-margin-top (ajoute une marge top à l'élément)
  • is-margin-bottom (ajoute une marge bottom à l'élément)
  • is-margin-left (ajoute une marge left à l'élément)
  • is-margin-right (ajoute une marge right à l'élément)

Pour faire en sorte de la marge soit "très petite", utiliser les classes :

  • is-margin-top-xsmall (ajoute une marge top "vsmall" à l'élément)
  • is-margin-bottom-xsmall (ajoute une marge bottom "vsmall" à l'élément)
  • is-margin-left-xsmall (ajoute une marge left "vsmall" à l'élément)
  • is-margin-right-xsmall (ajoute une marge right "vsmall" à l'élément)

Pour faire en sorte de la marge soit "petite", utiliser les classes :

  • is-margin-top-small (ajoute une marge top "small" à l'élément)
  • is-margin-bottom-small (ajoute une marge bottom "small" à l'élément)
  • is-margin-left-small (ajoute une marge left "small" à l'élément)
  • is-margin-right-small (ajoute une marge right "small" à l'élément)

Pour faire en sorte de la marge soit "grande", utiliser les classes :

  • is-margin-top-large (ajoute une marge top "large" à l'élément)
  • is-margin-bottom-large (ajoute une marge bottom "large" à l'élément)
  • is-margin-left-large (ajoute une marge left "large" à l'élément)
  • is-margin-right-large (ajoute une marge right "large" à l'élément)

Ajout de Paddings

Pour ajouter un padding aux éléments utilisez les classes :

  • is-padding-top (ajoute un padding top à l'élément)
  • is-padding-bottom (ajoute un padding bottom à l'élément)
  • is-padding-left (ajoute un padding left à l'élément)
  • is-padding-right (ajoute un padding right à l'élément)

Pour faire en sorte de le padding soit "très petit", utiliser les classes :

  • is-padding-top-xsmall (ajoute un padding top "xsmall" à l'élément)
  • is-padding-bottom-xsmall (ajoute un padding bottom "xsmall" à l'élément)
  • is-padding-left-xsmall (ajoute un padding left "xsmall" à l'élément)
  • is-padding-right-xsmall (ajoute un padding right "xsmall" à l'élément)

Pour faire en sorte de le padding soit "petit", utiliser les classes :

  • is-padding-top-small (ajoute un padding top "small" à l'élément)
  • is-padding-bottom-small (ajoute un padding bottom "small" à l'élément)
  • is-padding-left-small (ajoute un padding left "small" à l'élément)
  • is-padding-right-small (ajoute un padding right "small" à l'élément)

Pour faire en sorte de le padding soit "grand", utiliser les classes :

  • is-padding-top-large (ajoute un padding top "large" à l'élément)
  • is-padding-bottom-large (ajoute un padding bottom "large" à l'élément)
  • is-padding-left-large (ajoute un padding left "large" à l'élément)
  • is-padding-right-large (ajoute un padding right "large" à l'élément)

Ajout de borders

Pour ajouter une bordure aux éléments utilisez les classes :

  • is-border (ajoute un bordure tout autour de l'élément)
  • is-border-top (ajoute un bordure top à l'élément)
  • is-border-bottom (ajoute un bordure bottom à l'élément)
  • is-border-left (ajoute un bordure left à l'élément)
  • is-border-right (ajoute un bordure right à l'élément)

Pour faire en sorte de la bordure soit en tirets ajouter en plus la classe :

  • is-border-dashed

Pour faire en sorte de la bordure créée un cercle :

  • is-border-circle

Tags

is-xsmall = 10px Tag par défaut = 12px Tag normal = 14px Tag medium = 18px Tag large = 24px
Tag success Tag optionne Tag warning Tag primary Tag info etc...
Tag success Tag optionne Tag warning Tag primary Tag info etc...
Tag success Tag optionne Tag warning Tag primary Tag info etc...
Tag success Tag optionne Tag warning Tag primary Tag info
Dolce Vita NF Logement Certification Patrimoine Habitat Autre certification Autre Label
Dolce Vita NF Logement Certification Patrimoine Habitat Autre certification Autre Label
Dolce Vita NF Logement Certification Patrimoine Habitat Autre certification Autre Label Autre Label Autre Label

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tellus dui, ornare non rutrum ut, bibendum at orci. Fusce mattis leo sed enim pulvinar, quis malesuada elit semper.

In dapibus lacus non leo laoreet venenatis. Curabitur sodales consectetur urna, id pellentesque purus porttitor in. Cras ut pulvinar felis. Etiam mollis ipsum lorem, vel suscipit enim finibus vitae. Etiam eu facilisis diam, ac auctor enim. Nam dictum, libero facilisis auctor hendrerit, leo sapien malesuada justo, vel convallis elit tellus vel dolor.

Valider

Custom tooltips

 

Les différentes positions des tooltips

  • tooltip-top
  • tooltip-top-left
  • tooltip-top-right
  • tooltip-right
  • tooltip-bottom
  • tooltip-bottom-left
  • tooltip-bottom-right
  • tooltip-left
 

Tuiles d'options

Demande d’option
En attente de validation
Date de l’option
29/09/2018 - 11h37
Acheteur
R. Dufil
Rémunération
6 %
Option acceptée par A. Bordeau
27/09/2018 - 11h37
Date d'expiration
29/09/2018 - 13h37
Vendeur
A. Ondra
Acheteur
S. Bouin
2 options en liste d'attente
Date de l'option
27/09/2018
Date d'expiration
29/09/2018
Vendeur
A. Ondra
Acheteur
S. Bouin
Date de l'option
27/09/2018
Date d'expiration
29/09/2018
Vendeur
A. Ondra
Acheteur
S. Bouin
Réservation par A. Bordeau
27/09/2018 - 11h37
Vendeur
A. Ondra
Acheteur
S. Bouin

Quickview title

Réinitialiser les filtre

Bla blabla bli

This username is available

This email is invalid

Checkboxes / radios / switches

Bonjour
Oups !
Oups !
Ok Immo
Mobile
Résolution d’affichage insuffisante.
Résolution d’affichage insuffisante.
Veuillez-vous diriger vers la version mobile du site.
La résolution d’affichage n’est pas suffisante pour afficher correctement les informations. Veuillez basculer votre appareil en vue paysage ou vous diriger vers la version mobile du site.
La résolution d’affichage n’est pas suffisante pour afficher correctement les informations. Veuillez agrandir la fenêtre de votre navigateur.
m.monDomaine.fr
m.monDomaine.fr