diff --git a/lab/1/assets/delete-button.svg b/lab/1/assets/delete-button.svg new file mode 100644 index 0000000..7acb61e --- /dev/null +++ b/lab/1/assets/delete-button.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/lab/1/assets/edit.svg b/lab/1/assets/edit.svg new file mode 100644 index 0000000..74b4048 --- /dev/null +++ b/lab/1/assets/edit.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/lab/1/assets/left-arrow.svg b/lab/1/assets/left-arrow.svg new file mode 100644 index 0000000..69b21a3 --- /dev/null +++ b/lab/1/assets/left-arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/lab/1/assets/right-arrow.svg b/lab/1/assets/right-arrow.svg new file mode 100644 index 0000000..5895c61 --- /dev/null +++ b/lab/1/assets/right-arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/lab/1/fonts/FiraSans-Regular.ttf b/lab/1/fonts/FiraSans-Regular.ttf new file mode 100644 index 0000000..6f80647 Binary files /dev/null and b/lab/1/fonts/FiraSans-Regular.ttf differ diff --git a/lab/1/images/keanu.jpg b/lab/1/images/keanu.jpg new file mode 100644 index 0000000..3d239ee Binary files /dev/null and b/lab/1/images/keanu.jpg differ diff --git a/lab/1/index.css b/lab/1/index.css new file mode 100644 index 0000000..d303488 --- /dev/null +++ b/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; + + } + } + } +} \ No newline at end of file diff --git a/lab/1/index.html b/lab/1/index.html new file mode 100644 index 0000000..b9dbb75 --- /dev/null +++ b/lab/1/index.html @@ -0,0 +1,40 @@ + + + + + + + Task Manager + + + +
+

Task Manager

+
+ +
+
+ +
+ +
+ + \ No newline at end of file diff --git a/lab/1/task-manager.fig b/lab/1/task-manager.fig new file mode 100644 index 0000000..8b8dfa0 Binary files /dev/null and b/lab/1/task-manager.fig differ diff --git a/lec/3.md b/lec/3.md new file mode 100644 index 0000000..1471df9 --- /dev/null +++ b/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, но с одинаковым описанием + +### Функциональная идеалогия +Один класс - один ~~фюррер~~ стиль + +## 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 +} +```