Рубрика «subgrid»

Иногда сложные инженерные проблемы возникают не из‑за ошибок в библиотеке или коде. Причина может быть в том, что библиотека используется не оптимально для текущих архитектурных условий.

Всё началось с задачи в секции дашбордов и виджетов. Секция ранее была переведена на библиотеку GridStack. Нужно было использовать функцию GridStack nested grids — размещение одной сетки внутри другой. Для пользователя это возможность создать новый виджет‑группу, внутри которого можно размещать другие виджеты. То есть еще один маленький дашборд внутри общего. Грид внутри грида. 

Читать полностью »

Несколько недель назад, я выступала на Frontend NE в Ньюкасле и большую часть выступления объясняла, что за особенности будут в CSS Grid Subgrid из Grid Level 2. Не имея реализации данного свойства(в браузерах), я смоделировала кучу демок, используя DevTools, для того выступления.

По пути в San Francisco на Smashing Conf, где я проводила семинар по CSS Layout, мне дали доступ к пробной сборке Firefox Nightly, которая имела раннюю реализацию этого свойства.
Это значит, что мне нужно переделать некоторые слайды для моих выступлений в мае, там будут использованы реальные скриншоты. Читать полностью »

Гибкие таблицы на CSS Grid - 1
Просмотр списка лидов («холодных» контактов)

Поскольку мы уже запустились, я, наконец, могу рассказать о секретном проекте, над которым работал последние два года. Одна из интересных функций Teamwork CRM — просмотр списка (list view).

Это мощный компонент, который встречается в приложении семь раз. По сути, таблица на стероидах. Я мог бы много рассказать, но не хочу вас утомлять. Сосредоточусь на том, как мы реализовали подобную гибкость с помощью всего нескольких строк CSS (Grid). А именно, как мы выкладываем тяжёлые таблицы данных, как поддерживаем изменение размера столбцов и многое другое.

Во-первых, нужно объяснить контекст, начиная с цели и задачи дизайна этих таблиц. Если это не интересует, не стесняйтесь перейти сразу к технической реализации.
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js