CSS Styleguide

Dit is mijn main styleguide die ik gebruik voor de pagina voor Funda.

Hieronder staat mijn root:

:root {
    /* All colors */
    --primary-color: #F7A100;
    --secondary-color: #0071B3;
    --tertiary-color: #333;
    --quaternary-color: #999;
    --quinary-color: #E0E0E0;

    /* Footer */
    --senary-color: #EDEDED;

    /* Breadcrumb */
    --breadcrumb-devider-color: #333;
    
    
    --primary-text-color: #333;
    --secondary-text-color: #999;
    --tertiary-text-color: #fff;



    /* background colors */
    --primary-bg-background: #fff;
    --secondary-bg-background: #EDEDED;


    /* Breakpoints */
    --breakpoint-sm: 540px;
    --breakpoint-md: 720px;
    --breakpoint-lg: 960px;

    /* Font Family's */
    --font-family-default: 'Poppins', verdana, sans-serif;
    --font-family-secondary: 'Inter', verdana, sans-serif;
    --font-family-tertiary: 'Roboto', verdana, sans-serif;
    

    /* Transitions */
    --default-transition: all 0.3s ease-in-out;
    --quick-transition: all 0.1s ease-in-out;

    --bg-background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(230,242,247,1) 100%);

    /* Default button */
    --bg-button: #F7A100;
    --bg-button-hover: #de9000;
    --bg-button-disabled: #e0e0e0;
    --bg-button-disabled-hover: #e0e0e0;
    --bg-button-error: #f44336;

    /* Border radius */
    --border-radius-default: 2px;

    --gap-default: 10px;


    /* H1 - H6 */
    --font-size-h1: 32px;
    --line-height-h1: 40px;

    --font-size-h2: 24px;
    --line-height-h2: 32px;

    --font-size-h3: 20px;
    --line-height-h3: 28px;

    --font-size-h4: 18px;
    --line-height-h4: 24px;

    --font-size-h5: 16px;
    --line-height-h5: 24px;

    --font-size-h6: 14px;
    --line-height-h6: 20px;

    /* P */
    --font-size-default: 16px;
    --font-size-small: 14px;
    --font-size-large: 18px;
    --font-size-xlarge: 20px;

    --line-height-default: 24px;
    --line-height-small: 20px;
    --line-height-large: 28px;
    --line-height-xlarge: 32px;

}