Naming conventions

Because all project should have some little rules...

Almost classless

The framework try to be classless as much as possible, this are the exeptions:

• .accordion
• .badge
• .breadcrumb
• .card
• .container
• .container-full
• .drawer
• .drawer-button
• .dropdown
• .grid
• .flex-grid
• .slider
• .subgrid
• .group
• .list

And for variations:

• .outline
• .COLORNAME (e.g.: .primary)

WARNING

For good practice avoid as much it's possible classes !

HTML, CSS and SCSS

• The custom properties and variable must be kebab-case
• Private properties start with an underscore
• The classes must be kebab-case
• The IDs must be camelCase
• Use comment like in SassDoc

:root {
    --global-property: red;
}

.my-class {
    background-color: var(--global-property)
}

#myId {
    --_private-property: green;
    background-color: var(--_private-property);
}

/// Description of the mixin
///
/// @example something(red) // color: red
/// @link http://sassdoc.com/annotations/
/// @require {mixin} something
/// @param {name} $name - The description
/// @access public
///
@mixin something($name){
    color: $name
}

WARNING

Limit the number of custom properties defined, using too many of them can impact performance. Avoid unnecessary complexity.

Javascript

• The variable and method name must be camelCase
• Use comment like in JSDoc
• Use single quote
• Avoid semicolon

/**
* Explaination of the method
*
* @param {number} length - The length of the rectangle
* @param {number} width - The width of the rectangle
* @returns {number} - The area of the rectangle
*/
function calculate(length, width) {
    const myVariable = 'nothing'
    return length * height
}