Знакомство с CSS Gridish: инструмент, помогающий команде адаптировать CSS Grid

Знакомство с CSS Gridish: инструмент, помогающий команде адаптировать CSS Grid

От автора: сегодня с удовольствием хочу вам представить новый 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.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

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

Знакомство с CSS Gridish: инструмент, помогающий команде адаптировать CSS Grid

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

На данный момент у 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. Эти инструменты гарантируют, что дизайнеры и разработчики работают с одними компонентами.

Знакомство с CSS Gridish: инструмент, помогающий команде адаптировать CSS Grid

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Работа с целой страницей

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

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

Принцип работы

В качестве входных данных для CSS Gridish нужен только json файл css-gridish.json. Этот файл принимает спецификации дизайна вашей сетки и варианты сохранения выходных файлов (где и как). Сейчас CSS Gridish делает несколько предположений о дизайне вашей сетки:

Внешние разделители в 2 раза меньше внутренних

Главные колонки жидкие, а не фиксированные по ширине

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

Знакомство с CSS Gridish: инструмент, помогающий команде адаптировать CSS Grid

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.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree