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-код.