Charte graphique

Lorem Elsass ipsum elementum libero, hop chambon leverwurscht kuglopf risus, tchao bissame hopla in.

READ ME

Des palettes de couleurs !

Kabinetpapier rhoncus yeuh. Strasbourg non flammekueche Salu bissame sed Carola ch’ai quam, amet nüdle leo ornare eget hoplageiss sed libero, eleifend vulputate lotto-owe gravida mollis baeckeoffe sit chambon bredele placerat ante sagittis habitant Mauris hopla

Deux types de couleurs :

# Des couleurs en couleur...

  • Bleu Noir

    Couleur 1

    Classe : .color-1

    Hexa : #011936

    Var : --color-1

    UI : Header, Footer

  • Jaune

    Couleur 2

    Classe : .color-2

    Hexa : #F9DC5C

    Var : --color-2

    UI : Décoration

  • Rouge Rose

    Couleur 3

    Classe : .color-3

    Hexa : #ED254E

    Var : --color-3

    UI : Boutons, liens survolés

  • Purple Red

    Couleur 4

    Classe : .color-4

    Hexa : #C21F40

    Var : --color-4

    UI : Boutons, liens par défaut

  • Light Sky

    Couleur 5

    Classe : .color-5

    Hexa : #F4FFFD

    Var : --color-5

    UI : Fonds

# Ou des couleurs grises !

  • Black

    Black

    Classe : .has-bg-black

    Rgba : rgba(0, 0, 0, 1)

    Var : --black

    UI : Header, Footer

  • Gray

    Gray

    Classe : .has-bg-gray

    Rgba : rgba(0, 0, 0, .75)

    Var : --gray

    UI : Header, Footer

  • Gray medium

    Gray medium

    Classe : .has-bg-gray-medium

    Rgba : rgba(0, 0, 0, .5)

    Var : --gray-medium

    UI : Header, Footer

  • Gray light

    Gray light

    Classe : .has-bg-gray-light

    Rgba : rgba(0, 0, 0, .25)

    Var : --gray-light

    UI : Header, Footer

  • Gray xlight

    Gray xlight

    Classe : .has-bg-gray-xlight

    Rgba : rgba(0, 0, 0, .1)

    Var : --gray-xlight

    UI : Header, Footer

 <!-- Liste des Couleurs -->
<ul class="colors-list">

    <!-- Couleur 1 -->
    <li class="color-item">
        <article>
            <!-- La classe de couleur -->
            <h4 class="txt-color-5 color-box color-1"><span class="color-box-title">Bleu Noir</span></h4>

            <!-- Les INFOS de la couleur -->
            <header>
             
                <!-- Nom -->
                <h3>Couleur 1</h3>
              
                <!-- Classe  -->
                <p><strong>Classe</strong> : .color-1</p>  
                
                <!-- Valeur Hexa -->
                <p><strong>Hexa</strong> : #011936</p>
                
                <!-- variable -->
                <p><strong>Var</strong> : --color-1</p>
                
                <!-- Usage  -->
                <p><strong>UI</strong> : Header, Footer</p>

            </header>

        </article>
    </li>

    <!-- Couleur 2 -->
    <li class="color-item">
        <article>
...

        </article>
    </li>

    <!-- Couleur 3 -->
    <li class="color-item">
        <article>
...

        </article>
    </li>

    <!-- Couleur 4 -->
    <li class="color-item">

        <article>
...

        </article>
    </li>

    <!-- Couleur 5 -->
    <li class="color-item">
        <article>
...

        </article>
    </li>
</ul>
                
                 

Notes

Kabinetpapier purus non suspendisse quam, Gal. Strasbourg bissame lacus bredele jetz gehts los hopla mamsell ornare Oberschaeffolsheim salu lotto-owe DNA, turpis Wurschtsalad Oberschaeffolsheim Verdammi id, Pfourtz ! mänele varius ac quam. eget Carola leo sit habitant hopla rossbolla und tellus pellentesque condimentum mollis wie leo gewurztraminer semper Heineken messti de Bischheim schneck porta morbi Miss Dahlias baeckeoffe Chulia Roberstau Pellentesque Morbi knepfle Mauris placerat Salut bisamme vielmols, Hans Salu bissame turpis, auctor, et schnaps rhoncus sagittis knack ornare hoplageiss dolor merci vielmols consectetur nüdle météor libero. sed ante wurscht amet, Racing. Richard Schirmeck sit geht’s libero,

 /* VARIABLES */
:root {

    /* Couleurs -> Japp */
    --color-1: rgba(1, 25, 54, 1); /* Bleu Noir -> header, navbar ? */
    --color-2: #F9DC5C; /* Jaune */
    --color-3: #ED254E; /* Rouge Rose -> bouton survolé */
    --color-4: #C21F40; /* Rouge "pourpre" -> bouton par défaut */
    --color-5: #F4FFFD; /* Blanc "bleuté" -> fonds d'éléments ? */
   }

    /* Nuances de Gris */
    --black: rgba(0, 0, 0, 1);
    --gray: rgba(0, 0, 0, .75);
    --gray-medium: rgba(0, 0, 0, .5);
    --gray-light: rgba(0, 0, 0, .25);
    --gray-xlight: rgba(0, 0, 0, .1);
    --white: rgba(255, 255, 255, 1);

/* -> Couleurs de FONDS */
.color-1 {
  background-color: var(--color-1);
}

.color-2 {
  background-color: var(--color-2);
}

.color-3 {
  background-color: var(--color-3);
}

.color-4 {
  background-color: var(--color-4);
}

.color-5 {
  background-color: var(--color-5);
}

.color-6 {
  background-color: var(--color-6);
}

.color-7 {
  background-color: var(--color-7);
}

/* B, W and Gray */
.has-bg-black {
    background-color: var(--black)!important;
}

.has-bg-gray {
    background-color: var(--gray)!important;
}

.has-bg-gray {
    background-color: var(--gray-medium)!important;
}

.has-bg-gray-light {
    background-color: var(--gray-light)!important;
}

.has-bg-gray-xlight {
    background-color: var(--gray-xlight)!important;
}

.has-bg-white {
    background-color: var(--white)!important;
}
 

Notes

Yo dû. Chulia Roberstau Morbi quam. tristique consectetur rucksack semper libero, Oberschaeffolsheim tchao bissame pellentesque Verdammi Salut bisamme Heineken kartoffelsalad sit DNA, id météor blottkopf, Christkindelsmärik Coopé de Truchtersheim auctor, und gal in, picon bière Miss Dahlias ac ftomi! tellus Pellentesque amet,

Où ça se trouve ?

Dans le fichier /base/_colors.scss

Back to Top