Berry CSS - фреймворк Utility-First CSS

✕ Close menu Berry CSS [https://maxsite.org/berry] 5.0 Основы Общее описание ● Установка Семантика классов Структура Berry CSS Berry CSS Builder Блог → Справочник Модуль utilities Модуль typography Модуль design Модуль colors Помощь Типографика Цвет Подбор цветов Flexbox Построение сеток Анимация Material Design Примеры Изображения SVG-изображения Таблицы Списки Кнопки Формы Details Label Badge © Berry CSS , 2015-2025 ☰ Open menu Utility-First CSS Berry CSS — фреймворк на основе утилитарных классов Utility-First CSS — это архитектурный подход CSS, при котором используются готовые (утилитарные, utility) классы для стилизации элементов непосредственно в HTML-разметке, вместо того, чтобы создавать пользовательские классы для каждого блока. Berry CSS предоставляет обширную библиотеку CSS-классов, которые могут определять поля, отступы, размеры, шрифты, цвета, сетку flexbox, сетку grid и многое другое. С помощью Berry CSS существенно сокращается время разработки и верстки HTML-макетов, а единая семантика классов улучшает согласованность разных проектов. Основные характеристики Berry CSS: Повторное использование : css-классы предназначены для многократного использования, что упрощает поддержание единообразия стилей в рамках проекта. Скорость : разработчики могут стилизовать элементы непосредственно в HTML, не переключаясь между файлами HTML и CSS, что ускоряет процесс разработки. Настраиваемость : Berry CSS позволяет настраивать ваш проект в очень широких пределах, как с помощью Sass, так и с помощью CSS-переменных. Адаптивность : классы Berry CSS включают адаптивные варианты, что упрощает создание адаптивных дизайнов для мобильных устройств. Согласованность : использование предопределенного набора служебных классов, простая их семантика, повышает вероятность того, что дизайн будет оставаться согласованным на веб-сайте или в приложении. Поддерживаемость : сокращает объем CSS и потенциальные конфликты специфичности. Производительность : обеспечивает быструю разработку пользовательского интерфейса, особенно на этапе создания прототипа. Малый размер : Berry CSS в готовом виде представляет собой css-файл размером примерно 170Кб (в сжатом виде/трафик — это всего 25Кб). Для сравнения — Tailwind CSS в готовом виде занимает примерно 3Мб (в сжатом виде 280Кб). Отличия Berry CSS от других Utility-First-фреймворков Berry CSS не пытается охватить все css-свойства и сделать для каждого отдельный класс. Поэтому в Berry CSS только те классы, которые охватывают подавляющее большинство задач вёрстки. Если какого-то специфичного класса в Berry CSS нет, то вы всегда можете его создать, либо использовать inline-STYLE. Такой подход позволяет держать размер итогового css-файла в скромных размерах, но при этом иметь очень хорошую функциональность. Основы Utility-First С помощью небольших утилитарных классов можно создавать сложные компоненты. Традиционный подход к вёрстке подразумевает создание HTML-разметки и уникальных CSS-классов. Утилитарный подход позволяет использовать уже готовый классы. Например блок: ChitChat You have a new message! С Berry CSS код получится таким: При традиционном подходе потребовалось бы написать намного больше: Смысл в том, что в Berry CSS уже есть все необходимые классы для html-верстки. Когда нужно настроить блок или что-то поменять, то с Berry CSS достаточно просто указать нужный класс, а в традиционном подходе придётся менять ещё и css-код.