Адаптивная flex-сетка на CSS: разбираем реализацию на атомы

Наверное, каждый, кто сталкивался с frontend`ом, хотя бы раз использовал адаптивную flex-сетку на N-ном количестве колонок. В данной статье мы не станем рассматривать область применения такого подхода, его плюсы и минусы, а разберем теорию и напишем собственное решение, с брейкпоинтами и настраиваемым спейсингом! Данная статья, в первую очередь, будет полезна новичкам, однако надеюсь, что и опытные разработчики найдут в ней что-то интересное. Для упрощения жизни, будем использовать SCSS, продублировав CSS «под спойлер».

https://habr.com/ru/articles/893646/

#SCSS #Вебразработка #Адаптив #CSS

Адаптивная flex-сетка на CSS: разбираем реализацию на атомы

Наверное, каждый, кто сталкивался с frontend`ом, хотя бы раз использовал адаптивную flex-сетку на N-ном количестве колонок. В данной статье мы не станем рассматривать область применения такого...

Хабр

Универсальный подход к адаптивному веб-дизайну интерфейсов Stretch, Scale, Switch (SSS)

Создание адаптивных версий интерфейса это боль многих дизайнеров и, как следствие, разработчиков. Разные экраны, хаос в макетах, непонимание между специалистами… Но есть способ сделать адаптацию проще, предсказуемее и удобнее для всех. В этой статье я предложу вам подход, который сократит количество макетов и сделает интерфейс аккуратным на любом устройстве. Готовы взглянуть на адаптацию под новым углом?

https://habr.com/ru/companies/simpleone/articles/881168/

#дизайн #адаптивный_дизайн #адаптивный_вебдизайн #адаптивная_вёрстка #адаптивность #адаптивный_сайт #адаптив #вебдизайн #ux #ui

Универсальный подход к адаптивному веб-дизайну интерфейсов Stretch, Scale, Switch (SSS)

Меня зовут Карен Ананян, я продуктовый дизайнер в компании SimpleOne В этой статье я бы хотел рассказать о подходе к адаптивному дизайну, который может помочь многим дизайнерам и разработчикам при...

Хабр

Адаптивный дизайн. Как собирать макеты девайсов в несколько кликов

Отрисовка адаптивов — тяжелая ноша для любого продуктового дизайнера. Вроде бы все «фишки», которые хотелось применить, уже реализованы. Все незаурядные вопросы решены и ваш интерфейс уже отшлифован до блеска. Но тут наступает момент, когда нужно забыть про креатив и вспомнить, что дизайн — такая же работа, как и все остальные. В этой статье методичка — о том, как за минимальное время создать адаптивный интерфейс, не жертвуя качеством.

https://habr.com/ru/articles/860972/

#figma #figma_design #design #adaptive #adaptive_web_design #adaptive_design #адаптив #адаптивный_дизайн #адаптивный_вебдизайн

Адаптивный дизайн. Как собирать макеты девайсов в несколько кликов

Отрисовка адаптивов — тяжелая ноша для любого продуктового дизайнера. Вроде бы все “фишки”, которые хотелось применить, уже реализованы. Все незаурядные вопросы решены и ваш интерфейс уже отшлифован...

Хабр

Проект Альфа-Бизнес Mobile Web (веб-приложение), или Что делать если AppStore — всё?

Начиная с ведения санкций в 2022 вниманием не обошел и банковский сектор. Сказалось это и на возможности вести разработку и обновлять банковские приложения в Google Play и AppStore. Если ограничение Google Play можно обойти через множество альтернативных сторов или, на худой конец напрямую скачать APK файл, то с релизами в AppStore все куда сложнее — альтернативы нет. Одно из решений обойти ограничение, которое принял Альфа Банк, было уйти в переработку уже существующего адаптива, а точнее в реализацию веб-приложения (Mobile Web) используя технологию PWA (Progressive Web App), с помощью которой сайт преобразуется в веб-приложение визуально и функционально. Далее для удобства буду использовать термин Mobile Web. В данной статье я хочу раскрыть две темы: поделиться опытом ведения проекта с точки зрения вовлеченных большого числа команда и подразделений, а также описать на практическом опыте подход к разработке Mobile Web. Поэтому, если кому-то будет интересна только одна из тем, для удобства я разделю статью на две части.

https://habr.com/ru/companies/alfa/articles/792366/

#mobile_web #pwa #progressive_web_applications #адаптивный_сайт #адаптив #вебприложение

Проект Альфа-Бизнес Mobile Web (веб-приложение), или Что делать если AppStore — всё?

Начиная с ведения санкций в 2022 году, вниманием не обошел и банковский сектор. Сказалось это и на возможности вести разработку и обновлять банковские приложения в Google Play и AppStore. Если...

Хабр