Foundation

Foundations, as the name suggests, are the pillars of the design system. They are distinct from the components themselves and serve to establish the fundamental and essential style guidelines, which can be applied globally throughout the project.

Foundations are used for various types of elements, ranging from the most generic to the most specific. They define the essence and structure of the project we are working on, providing a solid framework for consistent styling.

In our design system, all foundations are defined using the class f--{foundationname}-{variation}.

Foundations are :

Aspect Ratio
Background
Color
Font
Gap
Grid
Reset*
Section
Spaces
Spacing

Keep in mind that the reset is stored under foundations because it is a core pillar of the project. It is designed to reset default browser behaviors or establish generic rules, such as setting the font size in the body. Therefore, it does not generate any class or f—****

How do we use them

To create them, we can use the mixins we have declared and/or use loops that pull from variables or parameters we have determined. This way, we ensure that only the CSS we use will be generated.

Loop example

In this example, the loop uses all the colorbg-options that we have determined in vars.

// creation
@each $color-name, $color in $colorbg-options {
    .f--background-#{$color-name}{
        background: $color;
    }
}

// extend implementation
.c--layout-a {
    @extend .f--background-a;
}

// basic implementation
.c--layout-a {
    background: map-get($colorbg-options, a);
}

Mixin example

This is a good example to understand two important aspects:

How to create SCSS rules using loops that accept arguments.
How to generate only the CSS that will actually be used in the project.

We have determined a number of columns and breakpoints, which the mixins will only use if they are uncommented. This prevents generating rules for a column size or breakpoint that won’t be used.

/* columns*/

/* Start loop columns */
$available-columns: (
    // 2,
    3,
    4,
    // 5,
    6,
    7,
    8,
    // 9,
    10,
    12
);

$columns-breakpoints: (
    all: $all,
    //desktop: $desktop,
    laptop: $laptop,
    // tabletl: $tabletl,
    tabletm: $tabletm,
    tablets: $tablets,
    mobile: $mobile,
);
@mixin build-columns($size, $bkpt, $availablecolumns) {
    @for $i from 1 through $columns {
        @if ($size == "all") {
            @each $column in $availablecolumns {
                @if $i == $column {
                    .f--col-#{$column} {
                        @include make-col($column);
                    }
                }
            }
        } @else {
            @each $column in $availablecolumns {
                @if $i == $column {
                    .f--col-#{$size}-#{$column} {
                        @media all and (#{$viewport-type}: #{$bkpt}) {
                            $value: calc((100% / #{$columns}) *#{$column});
                            flex: 0 0 $value;
                            max-width: $value;
                            transition: $time-a;
                        }
                    }
                }
            }
        }
    }
}
// Build Columns
@if variable-exists(columns-breakpoints) {
    @each $size, $bkpt in $columns-breakpoints {
        @include build-columns($size, $bkpt, $available-columns);
    }
} @else {
    @each $size, $bkpt in $breakpoints-grid {
        @include build-columns($size, $bkpt, $available-columns);
    }
}

And this is how we use them

<div class="f--container">
    <div class="f--row">
        <!-- available columns here -->
        <div class="f--col-6 f--col-tablets-12">
            Item
        </div>
        <div class="f--col-6 f--col-tablets-12">
            Item
        </div>
    </div>
</div>

Reset file

A reset file is a set of CSS rules designed to remove or neutralize the default styling that browsers apply to HTML elements. It ensures that all elements, like headings, paragraphs, and lists, start with a consistent baseline of styles, regardless of the browser.

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: none;
    scroll-behavior: smooth;
}

*:focus {
    outline: 0;
}
*:focus-visible {
    outline: 1px solid map-get($color-options, a);
}

html {
    overscroll-behavior: none;
    @extend .f--background-a;
}

body {
    @extend .f--background-a;
    @extend .f--font-e;
    @extend .f--color-c;
}

b,
strong {
    font-weight: 600;
}

ul,
ol {
    list-style: none;
}

img {
    max-width: 100%;
}

fieldset {
    border: none;
}

// all inputs except range
input[type=search]::-webkit-search-cancel-button, // x focus
input[type=text],
input[type=tel],
input[type=number],
input[type=password],
input[type=url],
input[type=email],
input[type=search],
input[type=color],
input[type=date],
input[type=datetime-local],
input[type=month],
input[type=time],
input[type=week],
input[type=file],
input[type=checkbox],
input[type=radio],
input[type=submit],
input[type=button],
input[type=reset],
select,
textarea,
button {
    appearance: none;
    -webkit-appearance: none;
    outline: 0;
}

textarea {
    resize: vertical;
}

select,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    cursor: pointer;
}

button {
    cursor: pointer;
    background: transparent;
}

// remove dotted outline/border in Firefox
select:-moz-focusring {
    color: transparent !important;
    text-shadow: 0 0 0 $color-c !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    border: 1px solid map-get($color-options, b);
    -webkit-text-fill-color: map-get($color-options, b);
    color: map-get($color-options, b);
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
    transition: background-color 5000s ease-in-out 0s;
}