Как подружиться c фронтенд-разработчиком

Алексей Авдеев, Mish

Дистанция

Как стать ближе?

9
Компоненты

Компоненты

Проектируйте, а не рисуйте

8
Адаптив

Веб адаптивен по-умолчанию

Сколько брейкпойнтов?

Только то, что изменяется

CSS Container Queries

Flexbox

        .block {
          display: flex;
          flex-flow: row wrap;
          justify-content: flex-end;
        }

Auto Layout

Продумывайте адаптив

7
Платформа

Закон Якоба

Не проектируйте заново нативные элементы

6
Шрифты

@font-face

        @font-face {
          font-family: "Open Sans";
          src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
        }
         
        h1 {
          font-family: "Open Sans"
        }

Стек системных шрифтов

Sans-serif

        font-family: -apple-system, BlinkMacSystemFont, avenir next,
            avenir, segoe ui, helvetica neue, helvetica, Cantarell,
            Ubuntu, roboto, noto, arial, sans-serif;