UI-компоненты №2. Сетка карточек и фиксированный фильтр
Привет! Давно хотел сделать рубрику, где буду большое внимание уделять не целым страницам, а ее деталям. Так, как мне кажется, удобнее для восприятия и видно больше мелочей. В связи с этим, сделал новую рубрику UI-компоненты, которая будет посвящена разным реализациям с различных сайтов, которые часто встречаются. Здесь я буду стараться сделать универсальную верстку, чтоб данный компонент можно было внедрить на сайт без проблем. Также можно не беспокоиться и за сборщики/препроцессоры и прочие нюансы - здесь я пишу на чистых языках - html, css, js. В этой части продолжаем работать с карточками. Сделаем их сетку на CSS Grid, а также сделаем фиксированный блок слева. Содержание: 00:00 - Вступление 01:16 - Что будем делать 01:52 - Как изменился шаблон с первой части 03:00 - Верстка сетки и левой области 05:45 - Стилизация (grid) 13:55 - Js-код для фиксированного блока 28:25 - Заключение и добавление кастомного свойства https://github.com/maxdenaro/maxgraph...
- стартовый шаблон для верстки https://www.figma.com/file/28GCW0Pvfd...
- макет в Figma https://github.com/maxdenaro/maxgraph...
- готовая верстка на GitHub Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка. Понравилось? https://clck.ru/Gr9Ec
Моя страница вконтакте: http://vk.com/maxdenaro
Мой блог: http://blog.maxgraph.ru
Мой сайт: http://maxgraph.ru
Канал в телеграм: https://teleg.run/maxgraph
Чат для верстальщиков: https://teleg.run/maxgraph_chat
#обучение #ui_компоненты #верстка
