https://github.com/ruslanxdev/yandex-shri-2018-homework-1
Домашнее задание #1 "Адаптивная вёрстка" в ШРИ Яндекса 2018.
https://github.com/ruslanxdev/yandex-shri-2018-homework-1
Last synced: about 1 year ago
JSON representation
Домашнее задание #1 "Адаптивная вёрстка" в ШРИ Яндекса 2018.
- Host: GitHub
- URL: https://github.com/ruslanxdev/yandex-shri-2018-homework-1
- Owner: ruslanxdev
- Created: 2018-03-07T23:14:25.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-03-11T16:26:56.000Z (over 8 years ago)
- Last Synced: 2025-02-14T21:35:43.363Z (over 1 year ago)
- Language: CSS
- Homepage: http://ruslankhh.com/yandex-shri-2018-homework-1
- Size: 12.3 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Домашнее задание "Адаптивная вёрстка"
Домашнее задание #1 в ШРИ Яндекса 2018.
Сайт: [http://ruslankhh.com/yandex-shri-2018-homework-1](http://ruslankhh.com/yandex-shri-2018-homework-1)
## Задание
### Основное
- [x] Необходимо адаптировать вёрстку для экранов размером от 320px до 1920px по ширине, т.е. для смартфонов, планшетов, ноутбуков и широкоформатных мониторов.
- [x] Выделяется три типа карточек:
- [x] С заголовком, картинкой и описанием — такие карточки могут занимать половину ряда или весь ряд
- [x] С заголовком и картинкой — такие карточки в базовом дизайне занимают треть ряда
- [x] С заголовком и описанием — такие карточки в базовом дизайне занимают треть ряда
- [x] Обратите внимание на разные отступы по вертикали и горизонтали.
- [x] Заголовок должен быть всегда виден. Надо стремиться не обрезать заголовок, но если если сильно вредит дизайну карточки, то тогда допускается обрезание с помощью многоточий. Принимаются различные толкования понятия "вредит дизайну".)
- [x] Описание обрезается по области, которая осталась под описание.
- [x] Не больше 3 карточек в ряд.
- [x] Ориентируемся на работу в Edge, Firefox, Safari, Яндекс.Браузер ;)
### Дополнительное
- [x] Адаптивная типографика
- [x] Адаптивные изображения
- [x] Отрисовка ленты с помощью шаблонизатора, т.е. генерация HTML из предоставленного набора данных в формате JSON (см. `data.js`). Приветствуется самостоятельная реализация простого шаблонизатора (например, на базе ``-тега). Данные можно разместить прямо в HTML.
## Выполнение задания
- Обратил внимание на разные отступы по вертикали и горизонтали. Попытался сверстать Pixel Perfect, но отступы по вертикали между собой тоже разные. В начале это было оправдано — визульная сетка для текста проходит по верху и низу символов, а не по линии, поэтому между картинками нужно делать больше расстояние при вёрстке. Но дальше мне не удалось определить систему в макете, поэтому оставил как есть.
- Чтобы включить наложение макета на верстку, можно добавить класс `test` для элемента `body` в DevTools.
- Элементы управления (`actions`, `heart`) не везде стоят на одинаковом расстоянии. Решил подравнять их на своё усмотрение.
- Элементы управления (`actions`, `heart`) сделал высотой `30px` (а для touch — `36px` ~ 1cm), чтобы было удобнее нажимать.
- Описание обрезается по области, которая осталась под описание. Попытался рассчитать по количеству линий необходимую максимальную выстоту, чтобы текст не обрезался по середине линии. На большинстве устройств выглядит нормально. Для остальных возможно стоит добавить уход в градиент.
- Все размеры шрифтов привязал к базовому шрифту, через `rem`. Базовый шрифт меняется в зависимости от размера окна (как и ширина контента):
```scss
$font-size-xs-root: 12px;
$font-size-md-root: 10px;
$font-size-xl-root: 14px;
$content-width-md: 70.4rem; // 704px
$content-width-lg: 96.6rem; // 966px
$content-width-xl: 83.3rem; // 1166px
$media-breakpoint-up-xs: 361px;
$media-breakpoint-up-sm: 576px;
$media-breakpoint-up-md: 728px;
$media-breakpoint-up-lg: 992px;
$media-breakpoint-up-xl: 1200px;
```
- Изображения растягиваются на всю ширину родительского блока.
- Изображения в исходных материалах сгененрированы не совсем корректно, слишком маленькие. Заменил все на копии максемального размера под все DPR.
- Добавил кое-где неразрывные пробелы и дефисы, что бы текст переносился корректно.