Перевод статьи Джонатана Сэринга «13 CSS UI Grid Systems and Libraries for 2018».
CSS это одна из вещей, которые большинство разработчиков или любят, или ненавидят. Со временем были созданы многие проекты как для непосредственной работы с таблицами стилей, так и для задач, с ними связанных.
Сетки (grids) в качестве системы изначально использовались для расположения текста в рукописях.
Сегодня практически каждый фронтенд-разработчик использует систему CSS-сеток для структурирования контента и управления пропорциями между элементами на странице. Чтобы помочь вам справиться с подобными задачами, мы собрали несколько полезных библиотек, которые облегчат и ускорят вашу работу.
Подсказка: при работе с UI-компонентами вы можете поместить их в коллекцию Bit, чтобы иметь возможность быстрее находить и использовать их и в других проектах.
Flexbox grid
Grid-система, основанная на значении flex свойства display. Хотя эта система уже немного старовата, она все еще пользуется широкой популярностью (7 тысяч звезд на GitHub). Благодаря responsive-модификаторам можно определять различный размер столбцов, смещения, выравнивание и распределение по ширине экранов xs, sm, md и lg. Ширина, заданная в процентах, позволяет fluid-изменение размера столбцов и строк. Также поддерживаются вложенные сетки.
Bulma
Это в большей степени mobile-first CSS-фреймворк на основе Flexbox, чем Grid-библиотека. Bulma это простая и очень эффективная современная Grid-система. На GitHub у нее 30 тысяч звезд. В целом, она представляет собой коллекцию CSS-классов, а HTML-код вы можете писать, какой захотите. Чтобы начать, вам нужен лишь 1 CSS-файл, так что не бойтесь попробовать.
Bootstrap Grid
Мощная mobile-first flexbox-сетка Bootstrap предназначена для создания макетов любых форм и размеров. Она предлагает систему из 12 столбцов и 5 адаптивных ярусов, переменные и миксины Sass, а также десятки предопределенных классов. Сетка от самого популярного CSS-фреймворка это всегда прекрасный выбор.
React Material-UI Grid | React Grid Layout
Прекрасная React-реализация Material-Design grid system layout. Система сетки реализована с помощью компонента Grid, который использует CSS-модуль Flexible Box для гибкости и макеты двух типов: контейнеры и элементы. Ширина элементов устанавливается в процентах, поэтому они всегда адаптивны и подстраиваются под родительский элемент. Для создания пространства между элементами есть отступы (padding). С учетом того что эта система получила 40 тысяч звезд на GitHub, это определенно популярный выбор.
React Grid layout
React-Grid-Layout это адаптивная grid-система для React. Она поддерживает breakpoints, которые могут быть представлены пользователем или генерироваться автоматически. Среди свойств системы стоит отметить автоупаковку, виджеты, которые можно перетаскивать и изменять их размер, статические виджеты, fluid-макет и отдельные макеты на каждый адаптивный breakpoint. Все это можно попробовать онлайн, воспользовавшись этим демо!
Muuri
Muuri имеет 7 тысяч звезд на GitHub. Он позволяет вам создавать макеты любого вида, а также делать их адаптивными, сортируемыми, фильтруемыми, перетаскиваемыми и/или анимированными. Поддерживает вложенные сетки и даже предоставляет сокращенную версию для использования в продакшене. Можно поиграться онлайн.
Rebass Grid
Адаптивная React grid-система от создателей популярной библиотеки Rebass. Имеет поддержку стилизованных компонентов и emotion (раньше – grid-styled). Все @rebass/grid компоненты используют styled-system для свойств стиля. Значения выбираются из темы. Адаптивные стили могут передаваться как значения массива. Довольно изящные вариант, который стоит рассмотреть.
Basscss
Этот немного старый низкоуровневый набор инструментов CSS является полезной моделью для работы с CSS-сеткой. На GitHub проект имеет 5 тысяч звезд. В основном это адаптивные утилиты float и width для создания разнообразных макетов сетки, которые могут использоваться в сочетании с layout, white space и другими утилитами. Для изменения сетки на экранах разной ширины можно использовать утилиты breakpoint-префиксов (breakpoint-prefixed column utilities).
Toast
Хотя эта библиотека, имея 2 тысячи звезд на GitHub, не имеет активной поддержки, она предоставляет очень настраиваемую, адаптивную (S)CSS сетку, на которую стоит взглянуть. С ней вы можете устанавливать любое количество столбцов, любой размер расстояний между ними (gutter) и необходимые вам классы, а также редактировать п своему усмотрению переменные в файле _grid.scss. Сколько хотите столбцов, в какой угодно комбинации. Что видите, то и получаете. Но, конечно, пользуйтесь с осторожностью.
Pure
Эта библиотека (имеющая 20 тысяч звезд на GitHub) предоставляет набор маленьких адаптивных CSS-модулей, которые можно использовать в любом веб-проекте, включая проекты с grid-системой. Эта библиотека построена на основе Normalize.css для устранения проблем с межбраузерной совместимостью. Имеет последовательно стилизованные кнопки, работающие с элементами <a> и <button>, а также стили для вертикального, горизонтального и выпадающего меню.
Milligram
Этот минималистичный CSS-фреймворк (в архиве gzip – 2kb) предоставляет минимальные настройки стилей для быстрого и чистого старта. На GitHub этот проект набрал 7,5 тысяч звезд. Для достижения простоты и поддерживаемости Milligram использует стандарт CSS Flexible Box Layout Module. Просто добавьте нужные вам столбцы в ряд и они равномерно займут все свободное пространство. Вот несколько визуальных примеров.
Neat
Эта относительно менее известная, но отличающаяся легковесностью и гибкостью Sass-сетка уже набрала 4,5 тысяч звезд на GitHub. Переменная neat-grid это sass map, которая перезаписывает дефолтные настройки сетки Neat. Если вам нужны несколько сеток в одном проекте, вы можете определить новую map, хранящуюся внутри выбранной вами переменной.
GRD
Очень легковесный (321 байт Gzip-архива) CSS grid-фреймворк, использующий Flexbox. На GitHub этот проект набрал 2 тысячи звезд. Он предоставляет два базовых класса – Grid и Cell – с некоторыми модификаторами, и поддерживает простое использование свойств Flexbox. Flexible Box Layout Module и calc() в качестве значения CSS-юнита, использованные в Grd, доступны в современных браузерах (Chrome, Firefox, Safari, Opera, Edge и IE11). Чтобы использовать Grd с Sass, вы можете выбрать grd-sass в качестве Sass порта. Изящный и эффективный способ выполнить задачу.
Gridlex
Это еще одна адаптивная, надежная и гибкая CSS Grid-система. Основанная на CSS Flexbox module, Gridlex является простой CSS grid-системой для быстрого создания современных макетов и подмодулей. Каждый столбец имеет ту же ширину, что и каждая ячейка в сетке, а для отдельных столбцов можно прописать размер с помощью классов. Для создания адаптивного дизайна можно добавлять классы на основе медиа-запросов. Допускается вложенность сеток.
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]