Some CSS basic standard

Standards CSS - LESS

Règles de déclaration des variables

• Utilisez pas le namespace du core pour nommer une variable. Pour des composants au niveau des outil, ajoutez le namespace correspondant à l'outil.
• Les variables de contexte du composant sont déclaré avec le préfixe de contexte suivi de deux traits d'union.
• Propriétés toujours en fin de déclaration
• Les déclarations de variables suivent une imbrication en cascade. Seuls le nom du composant et la propriété CSS sont requis.

Exemple :

// CORE component variable name
[CONTEXT]--[COMPONENT]-[EXTENTION]-[PSEUDO CLASS]-[PROPERTY]
@reverse--componente-name-extention-property

// TOOL component variable name
[CONTEXT]--[TOOLNAMESPACE]-[COMPONENT]-[EXTENTION]-[PSEUDO CLASS]-[PROPERTY]
@reverse--adb-memberdataupdate-componente-name-extention-property

Règles de déclaration du composant

• Le nom du composant doit être unique. Assurez vous de faire un recherche sur les fichiers LESS de la solution avant de le nommer.
• Utilisez de la classe à la place du id pour la identité du composant.
• Fournissez toujours des renseignement sur les composants, surtout de particularités nécessaires à la compréhension, qui ne sont pas claire sur le code.
• Les déclarations doivent être toujours dans le namespace #adb-webtools-container.
• Déclarez pas le margin au composant pour ajouter une distance distance vers son parent ou ses fréres doit être, ça doit être déclaré au contexte.

Syntaxe du code du composant

//*****************************************************/
//  Component name
//*****************************************************/
/*
    Component description
    ...
*/
@my-component-color: 1px solid @color-g6;
@my-component-border: 1px solid @color-g6;
@my-component-active-color: @color-acive;
@reverse--my-component-color: @color-g7;
#adb-webtools-container {

    // Component
    .my-component {
        color: @my-component-color;
        border: @my-component-border;

        // Component elements
        .my-component-title {
            ...
            
        }

        // Component extension/states
        &.my-component-active {
            color: @my-component-active-color;
        }
        &.my-component-medium {
            ...
        }
    }

    // Contexts
    .reverse{
        .my-component {
            color: @reverse--my-component-color;
        }
    }

    // Print mode
    &.adb-webtools-print {
        .my-component {
            color: @color-black;
        }
   }

    // Browser support
    &.adb-webtools-browser-internet-explorer {
        .my-component {
            // Fix
        }
    }
}

LESS client



Variables

Changer les variables toujours au début du fichier less.

@color-primary: #DDD;



Pour de variables spécifiques à l'outil utilisez le namespace de l’outil comme préfix.

Ces variables doivent être déclarées dans le fichier Less core de l’outil avec un valeur par default.

@memberdataupdate-section-boder-color : @color-primary;
Utilisez toujours de variable du core pour des propretés standardisées.



color: @color-primary;
font-size: @font-size-sm-a;
@media @media-sm-max-width{
    padding: @layoutHorizontalSpacing;
}
Namespaces, class, id, print


Les déclarations des classes et des ids doivent être toujours dans le namespace #adb-webtools-container.
@color-primary: #DDD;

#adb-webtools-container {
    
    // CORE prefix adb-webtools
    // Overridez JAMAIS une class or id du core. Discutez avec le responsable au besoin.
    .adb-webtools-header{
       color: red;
    }

    // NAMESPACE
    // Utilisez le namespace de outil pour déclarer des classes et id spécifiques à l'outil.
    // Jamais utiliser le namespace du core adb-webtools pour ça.
    // Utilisez des classe pour de composant au section générique.
    .adb-memberdataupdate-my-component {
        color: @color-primary;
        font-size: @font-size-sm-a;
        @media @media-sm-max-width{
              padding: @layoutHorizontalSpacing;
        }
    }
    
    // CONTEXTE
    // Utilisez des id de section pour donne un contexte au changement.
    #adb-memberdataupdate-section-x {
        .adb-memberdataupdate-my-component {
            color: @color-secondary;
        }
    }

    // PRINT MODE
    // Utilisez la classe adb-webtools-print liée #adb-webtools-container 
    // pour déclarer le changement de style au mode print/pdf.
    &.adb-webtools-print{
        .adb-memberdataupdate-my-component {
            margin: 0; 
        }
   }
}