Module and component coding

Grid system

For basic things - font-size, padding, margin etc. we use REM units (in our context 1rem = 10px)

column, content, row - write separately and insert the content inside to preserve the structure. We don't use bootstrap classes, we use our own grid system together with BEM notation. There is always a section first, and content below it.

The main thing is to use a bit of reason and logic for universality and not to worry about a few pixels difference - if somewhere we measure 12 pixels from the top and 11 from the bottom we can easily put padding: 1rem 0; within 5 pixels of difference it is not noticeable, and sometimes it doesn't even make sense for the universality of the elements.

Within BEM we use underscores only to split block__element, we use a hyphen between words of multi-word classes - main-header, gallery-grid, etc.

This way, yes.

<section class="quote">
    <div class="quote__content --content">
        <div class="quote__row --row">
            <div class="quote__column --column --w-12 --w-l-5">
                <div class="quote__figure">
                    <img class="quote__shape" src="/img/citace_tvar.svg" alt="tvar">
                    <img class="quote__img" src="https://media.tehrantimes.com/d/t/2021/06/20/4/3808608.jpg" alt="citace">
                </div>
            </div>
        </div>
    </div>
</section>

Not like that - the column can't be the image, the image has to be in the column. At the same time the section is missing, you need to have a section first and then, if necessary, quote__content --content

<section class="quote --content">
        <div class="quote__row --row">
                <div class="quote__figure --column --w-12 --w-l-5">
                    <img class="quote__shape" src="/img/citace_tvar.svg" alt="tvar">
                    <img class="quote__img" src="https://media.tehrantimes.com/d/t/2021/06/20/4/3808608.jpg" alt="citace">
                </div>
        </div>
</section>

Proper use of CSS and Adobe XD values

Basic rules of BEM

Font-size - when copying values from XD, it is necessary to convert to the value rem, 1 rem = 10px;

Line-height I don't recommend copying at all, line-height is set globally for the project in a relative factor - line-height: X.X (where x is the line size of the font). So if I need to set the line-height somewhere exceptionally (for example globally for paragraphs in the introduction section), I write for example line-height: 1.5;

Letter-spacing I don't recommend copying at all, letter-spacing is set globally for the project in em units (depending on the font size) - letter-spacing: X.Xem (where x is the font size). So if I need to set the letter-spacing somewhere exceptionally (for example globally for paragraphs in the introduction section), I would write for example letter-spacing: 0.05em;

Box-shadow can for example be easily obtained from Adobe XD - e.g. XD values are 0 3px 6px + some box-shadow color and theoretically opacity. So the resulting box-shadow can be written as follows - box-shadow: 0 3px 6px rgba(0,0,0,0.5); where the first three rgb values are the given color in rgb format and the fourth value is alpha - transparency in the value from 0 to 1 (0 = 100% transparent);

Padding - inner offset, it is included in the element size and is part of it. We can use px units from adobe XD. There is no need to deal with deviations of a few pixels. If padding is 12 pixels somewhere, 10px is usually enough;

Margin - outer offset, it is not counted in the size of the element and is not part of it.

Correct use of elements

Buttons - buttons can be found in the button.scss file, if the buttons are repeated on the website, it is not necessary to style them more than once, but add for example button--ghost, button--basket, etc. and use uniform styles.

Images and icons - Link to the article

Links should be given as <a href="#" class="button button--brand">Text</a> for example. Without the href, the link will not work even within the css.

Individual modules and components

Header - Link to the article

Footer - Link to the article

Main-header - introductory section of the website. Usually all these sections are similar or practically the same. So we don't invent new modules, we use the main-header class and its modifiers (main-header--color, main-header--image, main-header--homepage, etc. as needed)

Blog - blog preview, specifications - for example article, article--image (variant with image). Specifications such as date, heading and reading time can be a new module spec - see queen-studio.cz

Background image, text or gradient in the foreground - Link to the article

JavaScript and libraries

We don't use Jquery or Bootstrap.js, we try to go the way of Vue.js, or pure javascript - app.js, {block scripts} for a specific template

JS Libraries - Link to the article

JS Compilation - Link to the article