Lecture + practice

lab/1/assets/delete-button.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><defs><style>.a{fill:#bb1616;}</style></defs><path class="a" d="M15,0A15,15,0,1,0,30,15,15.017,15.017,0,0,0,15,0Zm0,27.429A12.429,12.429,0,1,1,27.429,15,12.443,12.443,0,0,1,15,27.429Z"/><path class="a" d="M63.672,51.618a1.335,1.335,0,0,0-1.889,0l-4.141,4.142L53.5,51.618a1.336,1.336,0,0,0-1.889,1.889l4.141,4.141-4.141,4.142A1.336,1.336,0,1,0,53.5,63.678l4.141-4.141,4.141,4.141a1.336,1.336,0,1,0,1.889-1.889l-4.141-4.141,4.141-4.141A1.335,1.335,0,0,0,63.672,51.618Z" transform="translate(-42.643 -42.647)"/></svg>

lab/1/assets/edit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><defs><style>.a{fill:#020275;}</style></defs><path class="a" d="M27.649,55.041a.748.748,0,0,0-.746.749v6.652a2.245,2.245,0,0,1-2.238,2.248H3.73a2.245,2.245,0,0,1-2.238-2.248V42.918A2.246,2.246,0,0,1,3.73,40.671h6.624a.749.749,0,0,0,0-1.5H3.73A3.742,3.742,0,0,0,0,42.918V62.443a3.742,3.742,0,0,0,3.73,3.746H24.665a3.742,3.742,0,0,0,3.73-3.746V55.79a.748.748,0,0,0-.746-.749Zm0,0" transform="translate(0 -36.189)"/><path class="a" d="M128.771,1.271a3.45,3.45,0,0,0-4.879,0L110.214,14.95a.766.766,0,0,0-.2.338l-1.8,6.494a.767.767,0,0,0,.943.944l6.494-1.8a.766.766,0,0,0,.338-.2L129.671,7.05a3.454,3.454,0,0,0,0-4.879ZM111.884,15.448,123.079,4.253l3.61,3.61-11.195,11.2Zm-.721,1.447,2.884,2.885-3.99,1.105ZM128.587,5.966l-.813.813-3.611-3.611.813-.813a1.917,1.917,0,0,1,2.71,0l.9.9A1.919,1.919,0,0,1,128.587,5.966Zm0,0" transform="translate(-100.68 -0.261)"/></svg>

lab/1/assets/left-arrow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><g transform="translate(30 30) rotate(180)"><g transform="translate(0 0)"><path d="M21.127,15.824l-5.3,5.3A.937.937,0,0,1,14.5,19.8l3.863-3.864H8.438a.938.938,0,0,1,0-1.875h9.924L14.5,10.2a.937.937,0,0,1,1.326-1.326l5.3,5.3a.922.922,0,0,1,.244.824A.925.925,0,0,1,21.127,15.824ZM15,30A15,15,0,1,1,30,15,15,15,0,0,1,15,30ZM15,1.875A13.125,13.125,0,1,0,28.125,15,13.125,13.125,0,0,0,15,1.875Z"/></g></g></svg>

lab/1/assets/right-arrow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path d="M21.127,14.176l-5.3-5.3A.937.937,0,0,0,14.5,10.2l3.863,3.864H8.438a.937.937,0,1,0,0,1.875h9.924L14.5,19.8a.937.937,0,0,0,1.326,1.326l5.3-5.3A.922.922,0,0,0,21.371,15,.924.924,0,0,0,21.127,14.176ZM15,0A15,15,0,1,0,30,15,15,15,0,0,0,15,0Zm0,28.125A13.125,13.125,0,1,1,28.125,15,13.125,13.125,0,0,1,15,28.125Z"/></svg>

lab/1/index.css

@@ -0,0 +1,146 @@
+/* fonts */
+@font-face {
+    font-family: 'Fira Sans';
+    src: local('Fira Sans'), url('fonts/FiraSans-Regular.ttf');
+}
+
+:root {
+    --tm-app-font-family: 'Fira Sans';
+    --tm-app-header-font-size: clamp(16px, 3vw, 48px);
+    --tm-app-tasklist-font-size-large: clamp(12px, 1.6vw, 36px);
+    --tm-app-tasklist-font-size-medium: clamp(16px, 1.25vw, 28px);
+}
+
+/* colors */
+:root {
+    --tm-app-cp-blue-10-op-45: #CBDFF473;
+    --tm-app-cp-blue-10-op-75: #CBDFF4BF;
+    --tm-app-cp-blue-10: #CBDFF4;
+    --tm-app-cp-blue-20: #93C4F5;
+    --tm-app-cp-blue-30: #7CBAF9;
+    --tm-app-cp-blue-50: #50A0F1;
+    --tm-app-cp-blue-70: #020275;
+    --tm-app-cp-blue-90: #01203F;
+
+    --tm-app-cp-seawave-30: #7FACAC;
+    --tm-app-cp-seawave-70: #053A47;
+
+    --tm-app-cp-white: #FFFFFF;
+
+    --tm-app-cp-black-op-12: #0000001F;
+
+    --tm-app-cp-grey-50: grey;
+}
+
+/* light-theme */
+:root {
+    --tm-app-body-bg-start: var(--tm-app-cp-blue-30);
+    --tm-app-body-bg-end: var(--tm-app-cp-seawave-30);
+    --tm-app-header-text-color: var(--tm-app-cp-blue-70);
+    --tm-app-tasklist-header-text-color: var(--tm-app-cp-blue-70);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    font-family: var(--tm-app-font-family);
+    font-weight: 400;
+}
+
+ul {
+    list-style: none;
+}
+
+body {
+    width: 100%;
+    min-height: 100vh;
+    background: linear-gradient(var(--tm-app-body-bg-start), var(--tm-app-body-bg-end));
+    background-attachment: fixed;
+}
+
+#tm-app-header {
+    width: 100%;
+    box-sizing: border-box;
+    padding: max(3vh, 30px) max(2.5vw, 80px);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    font-size: var(--tm-app-header-font-size);
+    color: var(--tm-app-header-text-color);
+
+    & > #tm-app-name {
+        font-size: inherit;
+    }
+}
+
+.user-info {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+
+    & > .user-info__avatar {
+        --avarar-size: clamp(40px, 6vw, 80px);
+        width: var(--avarar-size);
+        height: var(--avarar-size);
+        object-position: center;
+        object-fit: cover;
+        border-radius: 50%;
+        border: 2px solid var(--tm-app-cp-white);
+    }
+}
+
+#tm-app-base {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0 max(2.5vw, 80px);
+}
+
+.tasklists-container {
+    width: 100%;
+    display: flex;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    row-gap: 3vh;
+    column-gap: calc(8% / 3);
+
+    & > .tasklist {
+        width: 23%;
+        box-sizing: border-box;
+        padding: 14px;
+        border-radius: 10px;
+        background-color: var(--tm-app-cp-blue-10-op-75);
+        box-shadow: 2px 2px 4px var(--tm-app-cp-black-op-12);
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+
+        &:last-child {
+            background-color: var(--tm-app-cp-blue-10-op-45);
+        }
+
+        & > .tasklist__name {
+            font-weight: 600;
+            color: var(--tm-app-tasklist-header-text-color);
+            font-size: var(--tm-app-tasklist-font-size-large);
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+
+        & > .tasklist__add-task-btn {
+            all: unset;
+            cursor: pointer;
+            font-size: var(--tm-app-tasklist-font-size-medium);
+            color: var(--tm-app-cp-grey-50);
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+
+            &:hover {
+                font-weight: 600;
+
+            }
+        }
+    }
+}

lab/1/index.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="index.css">
+    <title>Task Manager</title>
+</head>
+<body>
+
+    <header id="tm-app-header">
+        <h1 id="tm-app-name">Task Manager</h1>
+        <div id="tm-app-header__right-block">
+            <div class="user-info">
+                <img src="images/keanu.jpg" alt="Avatar" class="user-info__avatar" />
+                <span class="user-info__name">JS</span>
+            </div>
+        </div>
+    </header>
+
+    <main id="tm-app-base">
+        <ul class="tasklists-container">
+            <li class="tasklist">
+                <h2 class="tasklist__name">К выполнению</h2>
+                <ul class="tasks-container">
+                    <!-- TODO: Add tasks -->
+                </ul>
+                <button class="tasklist__add-task-btn">
+                    Add card...
+                </button>
+            </li>
+            <li class="tasklist">
+                <button id="add-tasklist-btn">
+                    Add
+                </button>
+            </li>
+        </ul>
+    </main>
+</body>
+</html>

lec/3.md

@@ -0,0 +1,80 @@
+# LEC 3
+
+## Визуальные паттерны
+- Форма авторизации
+- Grid layout (960gridsystem) - footer, header и прочие штуки
+- Mediaobject - картинка, сопровождаемая текстовой информацией
+
+## Дизайн-паттерны
+CSS - наше всё
+
+## Идеология
+
+- WET (Write Everything Twice) - семантичная
+
+VS
+
+- DRY (Don't Repeat Yourself) - функциональная
+
+### Семантическая идеалогия
+Для разных классов разные css, но с одинаковым описанием
+<!-- ```html
+<div class="app">
+    <div class="hf"></div>
+``` -->
+### Функциональная идеалогия
+Один класс - один ~~фюррер~~ стиль
+
+## CSS-методологии
+Набор правил для оформления CSS-стилей:
+- правило оформления стилей
+- группировка стилей по файлам/папкам
+- селекторы + папки
+
+### OOCSS (ООП, но CSS)
+База:
+1. Уход от родительских селекторов
+2. Разделение структуры от представления
+
+Из плюсов:
+- DRY (меньше кода)
+
+Из минусов:
+- Сложно это всё поддерживать
+
+### SMACSS (Scalable and Modular Architecture for CSS)
+База:
+1. 5 китов:  Base - базовые стили элементов (селекторы тегов и атрибуты), Layout - базовые макеты страниц (селекторы по идентификаторам), Module - переиспользуемые элементы и блоки (классы), State - перерисовка элемента в зависимости от состояния, Theme - настройка темы
+
+### BEM
+База:
+1. Базовые примитивы: блок, элемент, модификатор
+2. Независимость блоков
+3. Вложенность элементов блока < 1 (элементы не вкладываются друг в друга)
+4. На DOM элементе мб > 1 блока
+5. "Слойная" архитектура
+
+### Atomic CSS
+База:
+1. Для каждого CSS-свойтсва - отдельный класс
+2. Значение свойства - внутри класса
+
+Из плюсов:
+- DRY
+
+Из минусов:
+- Несемантичный CSS
+- "Загрязнение" HTML стилями
+
+### Axiomatic CSS
+База:
+1. Селекторы по тегам
+
+### CSS modules
+CSS файл, где классы и анимации по умолчанию находятся в локальной области видимости
+```css
+/* styles.css */
+.title {
+    .background-color: red
+}
+```