От автора: сегодня с удовольствием хочу вам представить новый open-source инструмент от IBM, который может помочь в работе с CSS Grid, под названием CSS Gridish! CSS Gridish берет спецификации дизайна сетки вашего продукта и делает несколько ресурсов, которые ваша команда может использовать.
Скетч файл с монтажными областями и настройками сетки/макета для дизайнеров
CSS/SCSS код с применением CSS Grid и фолбека в виде CSS Flexbox для разрботчиков
Расширение Google Chrome для проверки выравнивания страниц
Цель – помочь команде адаптировать CSS Grid как можно раньше и активировать более сложные макеты. Продемонстрировать универсальность инструмента можно примерами сеток с Bootstrap, Carbon Design System и Material Design.
Зачем разработчики IBM сделали этот инструмент
Новая спецификация CSS Grid отлично подходит для веб-дизайна. Теперь дизайнеры могут уделять оси Y столько же внимания, сколько и оси Х раньше. Разные проекты начинают документировать переход на CSS Grid.
Многие команды IBM стремятся использовать CSS Grid, но сталкиваются с проблемами. CSS Gridish решает эти проблемы.
Совместимость с браузерами
На данный момент у CSS Grid отличная поддержка в браузерах (~75%). Однако множеству продуктов все еще нужно поддерживать старые браузеры. Например, ibm.com до сих пор получает 10% трафика с IE. Поддержка старых браузеров отнимает много времени и сил.
CSS Gridish создает yourGrid.css, использующий CSS Grid, но он также создает файл yourGrid-legacy.css. Этот старый файл хранит только CSS Grid код, если браузер поддерживает его. Если браузер не поддерживает CSS Grid, пользователь получит Flexbox фолбек. Добавьте дополнительные классы в yourGrid-legacy.css, и вот вам обратная совместимость!
Что делать, если больше не нужно поддерживать старые браузеры? Нужно лишь переключиться на yourGrid.css, что сэкономит килобайты.
Связь дизайна и кода
Появились замечательные инструменты, которые создают единый источник правды для дизайна и кода — React Sketchapp и Lona. Эти инструменты гарантируют, что дизайнеры и разработчики работают с одними компонентами.
Мы хотим перенести единство команды в сетку. Монтажные области для Sketch и код для веб-разработки генерируются из одного конфиг файла. Конфиг файл сетки не безупречен, но мы хотим, чтобы CSS Gridish dspdfk разговоры о стандартах сетки в похожих инструментах.
Кроме того, детали дизайна легко теряются при переходе в разработку. Поэтому мы создали расширение для Chrome, чтобы можно было посмотреть код. Расширение Chrome можно установить в конфиг файл сетки команды, чтобы все видели одну метку и макет из файла Sketch с одинаковыми горячими клавишами (CTRL+G и CTRL+L). Разработчикам нравится использовать расширение с файлом Sketch, который они реализуют. Дизайнерам нравится смотреть код веб-страниц с его помощью.
Работа с целой страницей
С помощью CSS Grid разработчик может следовать дизайну сетки, когда только создает первый слой HTML. Но все становится сложнее, когда разработчику нужно работать внутри различных областей и в других узлах. Это связано с тем, что display: subgrid все еще развивает поддержку в браузерах.
CSS Gridish обходит эту проблема, используя вьюпорт единицы ширины вместо процентов. Вы можете вкладывать элементы .yourGrid-grid друг в друга сколько угодно, при этом сохраняя колонки и строки страницы. Единственный найденный нами минус – браузеры по-разному отображают vw единицы со скроллбарами. Это можно решить с помощью margin в сетке.
Принцип работы
В качестве входных данных для CSS Gridish нужен только json файл css-gridish.json. Этот файл принимает спецификации дизайна вашей сетки и варианты сохранения выходных файлов (где и как). Сейчас CSS Gridish делает несколько предположений о дизайне вашей сетки:
Внешние разделители в 2 раза меньше внутренних
Главные колонки жидкие, а не фиксированные по ширине
Совет: для достижения лучшего результата в Sketch, рекомендую, чтобы брейкпоинты, margin и разделители сетки делились на высоту строки.
CSS Gridish запускается в командной строке с помощью npx css-gridish. После запуска команды создастся папка со всеми файлами, и команда может использовать сетку! Чем хорош CSS Gridish, так это тем, что он упрощает работу тем, кто впервые работает с CSS Grid. После того, как пользователи изучат классы, описанные в документации, они обычно будут использовать 2 правила:
.myElement { grid-column: 1 / span 4; // Span four columns from first row grid-row: 4 / span 8; // Span eight rows from fourth row
}
Фолбек Flexbox код работает так же, как и большинство grid фреймворков с БЭМ.
По умолчанию код работает с жидкими колонками и фиксированными строками. Полезные классы-модификаторы позволяют работать наоборот. Формы типа квадрата, увеличивающегося в зависимости от ширины экрана пользователя, можно создать с класса жидких строк.
Один недостаток в коде CSS Gridish – для разделителей не используется CSS Grid свойство gap. Вместо этого используются классы с padding, который в 2 раза меньше разделителей. Так сделано потому, что инструмент не может игнорировать разделители в ситуациях типа background color и полноразмерные медиа. Надеюсь, в следующей версии спецификации CSS Grid решат этот вопрос.
Будущее
CSS Gridish нацелен на то, чтобы все больше продуктов принимали CSS Grid как можно быстрее, а переход для пользователей и команд был намного легче.
В долгосрочной перспективе это должно помочь развитию идеи двумерных библиотек компонентов. В индустрии сложилась эпоха библиотек компонентов, которые заполняют ширину, куда их помещает пользователь. Теперь с помощью CSS Grid мы можем создавать компоненты, которые будут заполнять и высоту. Это открывает дополнительные творческие возможности для дизайнеров систем и гибкость командам, использующим инструмент. Используйте CSS Gridish и помогайте в разработке. Еще столько работы!
Автор: James Y Rauhut
Источник: https://medium.freecodecamp.org/
Редакция: Команда webformyself.
