Инструмент с открытым кодом, который поможет вашей команде адаптировать CSS Grid уже сегодня

1665954032 instrument s otkrytym kodom kotoryj pomozhet vashej komande adaptirovat css

Сегодня я рад представить новый инструмент с открытым кодом IBM под названием CSS Gridish!

CSS Gridish берет спецификации дизайна сетки вашего продукта и создает несколько ресурсов для использования вашей команды:

  • Файл эскиза с монтажными областями и настройками сетки/макета для дизайнеров
  • Код CSS/SCSS с использованием CSS Grid с запасным вариантом CSS Flexbox для разработчиков
  • Расширение Google Chrome для любого, чтобы проверить выравнивание веб-страницы

Цель состоит в том, чтобы помочь командам быстрее адаптировать CSS Grid и создать более сложные макеты. Чтобы показать, насколько универсален инструмент, вот несколько примеров сеток из Bootstrap, Carbon Design System и Material Design.

Почему разработчики IBM сделали это

Новая спецификация CSS Grid отличная для веб-дизайна. Теперь дизайнеры могут уделять столько внимания оси Y, сколько они делали ось X в прошлом. Проекты влево и вправо начинают документировать свой переход на CSS Grid.

Многие команды IBM стремятся использовать CSS Grid, но сталкиваются с несколькими блокировщиками, которые нужно преодолеть. CSS Gridish помогает, устраняя эти блокировщики.

Ui9S0UFPRKRi50UBf0pzqBCiscncZK4vZpuA
На верхнем снимке экрана показана страница, загружаемая в Chrome с помощью сетки CSS. На нижнем снимке экрана изображена та же страница в IE 11 с использованием CSS Flexbox. (источник)

Совместимость с браузером

Сейчас CSS Grid имеет отличную поддержку браузера (~75%). Тем не менее, многие продукты все еще должны обслуживать другие браузеры. К примеру, ibm.com все еще получает 10% трафика от Internet Explorer. Чтобы поддерживать эти старые браузеры, нужно много работы.

В то время как CSS Gridish всегда строит yourGrid.css который использует CSS Grid, он также создает файл, который мы называем yourGrid-legacy.css. Этот устаревший файл до сих пор обслуживает код CSS Grid, только если его поддерживает браузер. Если браузер не поддерживает CSS Grid, то пользователь получает резервный вариант flexbox. Добавьте дополнительные классы для yourGrid-legacy.css и вы добавили обратную совместимость!

Что делать, если вам больше не нужна поддержка старых браузеров? Все, что нужно, это перейти к yourGrid.css чтобы уменьшить драгоценные килобайты опыта.

Сочетание дизайна и кода

Появились отличные инструменты, которые создают единственный источник правды для дизайна и кода, таких как React Sketchapp и Lona. Эти инструменты гарантируют, что дизайнеры и разработчики создают те же компоненты.

dvsiIMI7i-5Qk9JyfLXaVKtYOUtPTwxLV-Xc
Используйте расширение Chrome для CSS Gridish, чтобы просматривать веб-страницы с одинаковыми настройками сетки и макета на монтажных панелях Sketch.

Мы надеемся принести то же командное единство в сетку. Монтажные панели Sketch и код для веб-разработки генерируются из одного конфигурационного файла. Хотя конфигурационный файл сетки не безупречен, мы хотим, чтобы CSS Gridish вызвал разговор о стандартах сетки в подобных инструментах.

Кроме того, детали дизайна легко потеряться при переходе к разработке. Вот почему мы создали расширение Google Chrome для просмотра закодированной работы. Расширение Chrome можно настроить на конфигурационный файл сетки вашей команды, чтобы просматривать ту же сетку и макет из файла Sketch с помощью тех же комбинаций клавиш (CTRL+G и CTRL+L). Разработчикам нравится использовать расширение с открытым файлом Sketch, который они реализуют. Дизайнеры любят просматривать закодированные веб-страницы с его помощью.

Уважение всей страницы

Используя CSS Grid, разработчик может следовать дизайну сетки, начиная с первого уровня HTML. Но все становится сложнее, когда разработчику приходится работать внутри разных разделов и других узлов. Это происходит потому display: subgrid все еще получает поддержку браузера.

CSS Gridish обходит это, полагаясь на единицы ширины окна просмотра вместо относительных единиц в процентах. Вы можете вставлять сколько угодно .yourGrid-grid элементов друг у друга, но все равно уважайте столбцы и строчки страницы. Единственным недостатком, который мы обнаружили в этом, является то, что браузеры воспринимают vw блок по-разному с помощью полос прокрутки. Это можно обойти с помощью маржи в вашей сети.

Как это работает

Единственная входящая информация, которая нужна CSS Gridish, это один файл json css-gridish.json. Файл принимает ваши характеристики дизайна сетки и параметры того, где хранятся выводимые файлы. В настоящее время CSS Gridish делает несколько предположений о дизайне сетки:

  • Внешние желоба вдвое меньше внутренних желобов
  • Ваши основные столбцы имеют переменную ширину, а не фиксированную

Совет: Чтобы получить лучшие результаты в Sketch, мы рекомендуем сделать точки разрыва сетки, поля и границы, разделенными на высоту строки.

WNtMemAeOorDqjE9u12JyFZu3NVHEMcPK7r8
В то время как дизайнер сетки указывает размеры красным цветом (плюс количество столбцов), разработчику придаются полезные значения синему цвету.

Затем CSS Gridish запускается в командной строке с помощью just npx css-gridish. После этого вы увидите папку со всеми файлами, чтобы ваша команда могла использовать вашу сетку! Отличная особенность CSS Gridish состоит в том, что он очень облегчает работу для тех, кто впервые пользуется CSS Grid. После того, как пользователи изучат классы, подробно описанные в документации, они обычно будут использовать только два правила:

.myElement {    grid-column: 1 / span 4; // Span four columns from first row    grid-row: 4 / span 8; // Span eight rows from fourth row}

Запасной код flexbox работает подобно большинству грид-фреймворков с узнаваемым именованием классов BEM.

По умолчанию код работает с плавными столбцами и фиксированными строками. Это также позволяет наоборот с помощью полезных классов-модификаторов. Вы будете использовать класс fluid row для создания фигур, таких как квадраты, масштабируемые в соответствии с шириной экрана пользователя.

Одна ошибка при использовании кода CSS Gridish состоит в том, что мы не используем свойство gap CSS Grid для желобов. Вместо этого существуют классы прокладки, которые имеют половину размера желоба, которые вы применяете для соблюдения желоба. Это связано с невозможностью игнорировать пробелы для таких ситуаций как цвета фона и полноразмерные медиа. Надеюсь, следующая версия спецификации CSS Grid решит это.

Будущее

CSS Gridish стремится привлечь больше продуктов к CSS Grid быстрее, а также облегчить переход для пользователей и команд.

В долгосрочной перспективе мы надеемся, что это поощрит идею под названием библиотеки двумерных компонентов. В промышленности была сильная эра библиотек компонентов, заполняющих ширину, в которую пользователи размещают компонент. Теперь с CSS Grid мы можем создавать компоненты, также заполняющие высоту, на которой они размещены. Это предоставляет больше творческих возможностей тем, кто создает дизайн и больше гибкости для использующих ее команд.

Между тем, пожалуйста, используйте CSS Gridish и сделайте свой вклад. Предстоит еще много работы!

Если это поможет, оставьте CSS Gridish звездой!

Джеймс И. Раухут (@seejamescode) – дизайнер ATX, работающий в IBM Design. Он любит кодировать, изучать и делать все возможное для Бога. Вышеприведенная статья является личной и не обязательно отражает позицию, стратегию или взгляды IBM.

Особое спасибо Гейли Хьюз за дискотический логотип. Кроме того, следующие люди очень помогли самому проекту: Тревор Вонг, Дэниел Куэн, Сет Джонсон, Чиу-Пинг Чиу, Джен Даунс, Джош Блэк, Джессика Трембли, Маранда Бодас, Вонил Су, Квинси Ларсон и все FED Сообщество @IBM

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *