Basics

Ajoute une ombre à un élément.

.box-shadow {
    box-shadow: 0 0 8px 0 rgba(0,0,0,.3);
}

Supprime la ligne sous les liens.

.deco-none, .deco-none:hover {
    text-decoration: none !important;
}

Utilise un ratio de 100% - 100px de la taille du device en hauteur.

.full-h {
    height: calc( 100vh - 100px ) !important;
}

Fixe un élément à 0px de haut

.fixed {
    position: fixed !important;
}

Désature un élement et le colorise en hover.

.filter-sat {
    filter: saturate(0%);
    transition: all 0.2s;
}

.filter-sat:hover {
    filter: saturate(100%);
    transition: all 0.2s;
}

Typographie

Différent style de titres sont utilisés pour mettre en forme les paragraphes et les sections du site.

Titre light

<h2 class="page-title">Titre light</h2>

Sous titre ou catégorie de section

<h3 class="page-cat">Sous titre ou catégorie de section</h3>

Alignement de texte

Awelty.fr utilise les alignements center, right pour mettre en page son contenu.

Centrer un texte

<p class="center-t">Centrer un texte</p>

Alignement à droite

<p class="right-t">Alignement à droite</p>

Centrer un titre de ligne .row-title

<div class="row center-h2">Appliquer la class .center-h2 à la ligne</div>

Centrer un texte sur mobile

<p class="center-t-phone">Centrer un texte sur mobile</p>

Style de texte

Certaines class basiques existent afin de styliser les textes, paragraphes ou titres.

Mettre un texte en capitale

<p class="uppercase">Mettre un texte en capitale</p>

La class .lead augmente la taille du texte afin de le mettre en avant.

<p class='lead'>La class .lead augmente la taille du texte afin de le mettre en avant.</p>

Les couleurs de texte

Trois couleurs sont principalement utilisées pour différencier les sections du site. (le gris étant incorporé dans le thème)

<span class="uppercase beige-t">Orange</h2>

<span class="uppercase bleu-t">Bleu</h2>

D'autres couleurs peuvent également être utilisées pour dynamiser ou mettre en avant des informations.

<span class="uppercase green-t">Vert</h2>

<span class="uppercase red-t">Rouge</h2>

Mise en page typographique

Les sections des pages où il y a beaucoup de contenu peuvent s'organiser graphiquement afin de faciliter la lecture des informations.

Exemple :

<h2 class="page-cat">Referencement - seo</h2>

<h3 class="page-title">Soyez vu</h3>

<p class="center-t-phone lead">Toutes nos créations de site sont optimisées pour un référencement web efficace. Nous attachons une grande importance à la présence des sites dans les moteurs de recherche.</p>

<div class="desc-page orange-border">
    <p>
    Aussi nous appliquons une méthodologie efficace pour atteindre cet objectif sur chaque site web créé par notre société.
    </p>
</div>

<p>
    <a class="link-cat beige-t margin-b" href="/pages/strategie-de-communication-web/referencement/">Voir nos offres <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a>
</p>

Afin d'apporter une information au texte principale, on peut utiliser la class .desc-page suivi de la couleur de border voulu.

<div class="desc-page">
    <p>
    Lorem ipsum.
    </p>
</div>

La class .desc-page va mettre un padding autour du contenu afin d'homogénéiser. Pour styliser cela on utilise des class .border des couleurs des sections du site.

.orange-border

<div class="desc-page orange-border">
    <p>
    Lorem ipsum.
    </p>
</div>

.border-blue

<div class="desc-page border-blue">
    <p>
    Lorem ipsum.
    </p>
</div>

.border-grey

<div class="desc-page grey-border">
    <p>
    Lorem ipsum.
    </p>
</div>

Couleurs

Il existe plusieurs class couleurs de background.

Mise en page

Afin de mettre en page le site, l'attribut css flex est utilisé sous différentes class.

<!--Attribuer flex à un élement-->
    <div class="flex-row">L'élément passe en {display:flex}. Les éléments enfants passent tous à la ligne.</div>

<!--Aligne verticalement au début du parent les éléments-->
    <div class="flex-row flex-start">Aligne verticalement au début du parent les éléments.</div>

<!--Aligne verticalement les éléments au centre-->
    <div class="flex-row flex-center">Aligne verticalement les éléments au centre par rapport au parent.</div>

<!--Aligne verticalement à la fin du parent les éléments-->
    <div class="flex-row flex-end">Aligne verticalement à la fin du parent les éléments.</div>

<!--Aligne horizontalement le contenu-->
    <div class="flex-row flex-left">Aligne horizontalement le contenu à gauche.</div>
    <div class="flex-row flex-middle">Aligne horizontalement le contenu au milieu.</div>
    <div class="flex-row flex-right">Aligne horizontalement le contenu à droite.</div>

<!--Passer les élements les uns en dessous des autres-->
    <div class="flex-col-dir">L'élément passe en {flex-direction: column}. Les éléments enfants passent les uns en dessous des autres.</div>

Attention, les class .flex-start, .flex-center, .flex-end aligneront le texte horizontalement.
Utiliser les class .flex-left, .flex-middle, .flex-right pour le même rendu.

<!--Aligner une column par rapport à l'autre-->
    <div class="column flex-col">Ajouter la class .flex-col à une colonne centrera son contenu par rapport à la plus haute colonne de la ligne.</div>

<!--Inverser deux colonnes sur mobile-->
    <div class="row flex-reverse">Ajouter la class .flex-reverse sur la .row inversera les deux colonnes d'une ligne en dessous de 992px de large.</div>

Utiliser la class .space-around permet de répartir le contenu proportionnellement dans l'espace du parent.

<!--Répartir le contenu proportionnellement-->
    <div class="flex-row space-around">Ajouter la class .space-around à un élément parent .flex disposera ses enfants proportionnellement dans son espace.</div>

Margin

Plusieurs margin sont utilés afin de mettre en page le contenu du site. Elles peuvent être utilisées sur tous contenu : row, column, p, div...

<p class="margin-l">Margin de 1em sur la gauche</p>
<p class="margin-t">Margin de 1em en haut</p>
<p class="margin-b">Margin de 1em en bas</p>

<!--MULTIPLICATEUR-->
<p class="margin-t-2x">Margin de 2em en haut</p>
<p class="margin-t-8x">Margin de 8em en haut</p>
<p class="margin-b-3x">Margin de 3em en bas</p>

<!--ANNULATION-->
<p class="no-margin">Suppression de toutes les marges</p>
<p class="no-margin-b">Suppression des marges en bas</p>

Padding

Comme les margin, plusieurs padding sont utilés afin de mettre en page le contenu du site. Elles peuvent être utilisées sur tous contenu : row, column, p, div...

<p class="padding-1">Padding de 1em sur tous les cotés</p>
<p class="padding-col">Padding de 2em sur tous les cotés</p>
<p class="padding-t">Padding de 2em en haut</p>
<p class="padding-b">Padding de 2em en bas</p>
<p class="padding-t-b">Padding de 2em en haut et en bas</p>


<!--MULTIPLICATEUR-->
<p class="padding-t-b-2x">Padding de 4em en haut et en bas</p>
<p class="padding-b-2x">Padding de 4em en bas</p>

<!--ANNULATION-->
<p class="no-padding">Suppression de tous les padding</p>
<p class="no-padding-t">Suppression du padding en haut</p>
<p class="no-padding-b">Suppression du padding en bas</p>

Full row

Le site Awelty.fr est composé de beaucoup de "full row", c'est à dire des lignes qui font toutes la largeur du device sur lequel il est lu, souvent avec un fond. Afin d'homogénéiser cela, des class précises existent.

Mettre la class sur la ligne.

<div class="bg-header">La hauteur de la ligne sera de 500px et tout le contenu à l'intérieur sera centré verticalement et horizontalement</div>
<div class="bg-header-2">Même propriété que .bg-header sauf la hauteur qui est de 350px</div>

L'image de fond se fera à l'aide d'une class supplémentaire en CSS ou d'un id.