• Шаблоны для вашего сайта
  • Сделать сайт
  • Реклама
  • Berry CSS
  • Albireo Framework
  • Бесплатный HTML-курс
  • Telegram-канал
  • Обратная связь
MaxSite.org
О создании сайтов и не только
Создание сайтов под ключ (Украина) →
Вход
×
или зарегистрироваться

Berry CSS 3.0 — релиз

Berry CSSПросмотров: 3159Комментарии: 79 сентября 2020 г.

Сегодня выложил релиз Berry 3.0, доступный по адресу https://maxsite.org/berry. Подготовка версии заняла примерно 2 месяца. В этот раз подход к разработке был изменён — вначале была готова документация, и только сейчас вышел полноценный релиз версии (почти на месяц позже). Сейчас у Berry хорошая документация: это и справочник классов, и примеры, и общие описания. Есть отдельный раздел «Блоки», который предназначен не только как пример возможностей Berry CSS, но и для копирования готового html-кода в свои шаблоны.

Третья версия сильно отличается от всех предыдущих. Можно сказать, что она продолжает развитие UniCSS, где была своя типографика. Вообще Berry я выделил из UniCSS, поскольку предполагал использование утилитарных классов с любым другим css-фреймворком. Основная надежда была на Bootstrap, поскольку его разработчики готовили 5-ю версию, которая, как я предполагал будет уже использовать современные CSS-наработки. После выхода первой альфы Bootstrap, я понял, что он «застрял» на идеях пятилетней давности и ждать от него чего-то большего уже не стоит. Это и стало толчком к созданию новой версии Berry, которая уже будет содержать и полноценную типографику, и js-компоненты.

Berry CSS состоит из раздельных модулей: сбросы (reset), утилитарные классы (utilities), типографика (typography), цвета (colors) и компоненты (components). Модули могут использоваться отдельно, точно также как и все их составные части. Для меня это очень важно, поскольку многим сайтам просто не нужны все возможности и должен быть простой способ их отключения.

Если бы Sass позволял использовать условия в импорте файлов, то можно было бы всё делать через настройки. Но так приходится вручную редактировать scss-файлы.

То есть я категорически против «монолита», которые тотально используются в большинстве css-фреймворков. В Berry можно использовать только то, что реально востребовано.

Модуль сбросов использует 100% оригинальный normalize. Это важно, поскольку даёт точку отсчёта для всех тэгов и блоков. Тот же Bootstrap использует модифицированный сброс, где жестко прописываются отступы и прочие стили из типографики. Это создаёт большую проблему неадекватного поведения блоков, поскольку при верстке практически любого блока приходится учитывать все эти изменения. Мы думаем, что изначально у заголовков нулевые отступы, а на самом деле — это не так. В Berry используется чёткое разделение — сбросы — это сбросы, а типографика — это типографика. Настраивай как душе угодно.

Модуль утилитарных классов является «ядром» фреймворка, классы которого в основном и используются при создании сайта. Сейчас в CSS очень много новых возможностей и есть соблазн их включить в Berry. Но, я постарался этого избежать, поскольку это может привести к излишнему коду — потребность в новых «фишках» очень скромная. Поэтому в основе это всё-таки реальная потребность верстальщиков. Я ориентируюсь, конечно, на свои потребности, но за много лет довольно неплохо их понимаю. :-)

Модуль типографики задаёт внешний вид и поведение в основном «голых» html-тэгов. Все настройки вынесены отдельно, но главное, что теперь используются css-переменные. То есть можно многое переопределить без sass-компиляции. Это очень удобный и современный способ кастомизации любого сайта или отдельного блока.

Модуль цветов переписывался несколько раз, чтобы сделать его более удобным для использования. Главная особенность — это то, что цвета определяются через группы. То есть генерация css-классов происходит на основе групп, а не одиночных цветов. Такой подход позволяет не только выстраивать произвольные палитры, но и легко ими управлять. В Berry CSS аж 14 палитр по 19 цветов, но не все они будут реально востребованы в проекте. Поэтому можно выбрать только те, которые используются, а остальные отключить. Это существенно сократит результирующий css-файл.

Ну и главное — это полная поддержка Material Design, о которой я ранее уже писал. Это меняет сам подход к вёрстке, но он очень продуктивный. Я ещё занят переделкой шаблона MF под эту концепцию и очень доволен. Больше не нужно заниматься подбором цветов, достаточно ориентироваться в их яркостной градации. А смена оттенков происходит за 3 секунды без переписывания html-кода. Почему я раньше не решился на такой подход, для меня загадка. Наверное Berry будет единственным в мире css-фреймворком, который полностью поддерживает Material Design в его исходном понимании. То что при этом меняется подход к верстке меня не пугает. Желающие могут продолжать использовать фиксированные цвета и палитры, благо Berry позволяет использовать любой вариант. :-)

Компоненты представляют собой независимые модули. Я был раздосадован, когда в Bootstrap 5 убрали зависимость от jQuery, но при этом размер собственного js-кода увеличился. Как такое вообще возможно? Смысл был в том, чтобы уменьшить зависимость от js-файлов, которые очень сильно влияют на скорость отрисовки страниц. А они сделали всё наоборот — Bootstrap 5 стал ещё медленее...

В Berry CSS компоненты не должны иметь никаких внешних зависимостей. Если есть js-код, то он нативный. Если есть scss, то он самостоятельно компилируется в css. И при этом только отдельное подключение. Никаких монолитов — компоненты подключаются там, где они используются. То есть как именно использовать компоненты решает вебмастер.

Пока в комплекте только 3 компонента: dropdown, modal и tabs. Новые компоненты будут в следующих версиях, поскольку их разработка не такая простая как может показаться. Ну и кроме того, положа руку на сердце, на сегодняшний день таких компонентов уже вагон и маленькая тележка. Можно выбрать что-то готовое и добавить в свой проект. Это однозначно лучше, чем создавать дополнительную зависимость. Поэтому в плане компонентов я исхожу, опять же, из реальной потребности. Например нет никакого смысла делать аккордеон, поскольку есть нативный DETAILS.

Что ещё... Berry CSS — это Atomic CSS. В своём телеграм-канале я уже писал о том, что эта методология будет востребована теми, кто делает много сайтов/шаблонов/лендингов, то есть там, где верстки много и она разная. Если вебмастер сидит на одном проекте месяцами, то он будет «пилить» свои css-классы до зеркального блеска и Atomic CSS ему просто не нужен.

А для тех верстальщиков, которым нужна «железобетонная» вёрстка в удобной и семантически понятной методике, Berry CSS будет хорошим помощником.

Дальнейшее развитие Berry CSS будет эволюционным: что-то исправляться, что-то добавляться. Документация будет также добавляться, особенно разделы примеров и блоков. У меня нет финансовых возможностей для пиара, как у других css-фреймворков, поэтому я выбрал более простой путь — демонстрация и сравнения с другими разработками. Просто хочу показать, что с помощью Berry CSS верстать намного удобней и проще, чем с другими фреймворками.

Ближайшая крупная переделка, где я буду использовать новые возможности Berry — это шаблон MF. Впрочем, об этом будет другая история. :-)


Создание сайтов (Украина) →
Бесплатный PHP, HTML, CSS и JavaScript редактор - CodeLobster IDE
Принципы Material Design
twitter.com facebook.com
Другие записи сайта
Обновление документации MF
Обновление документации MF
Как пользоваться RSS
Как пользоваться RSS
Блогу 2 года
Блогу 2 года
Создание telegram-бота
Создание telegram-бота
Сайты по CodeIgniter
Сайты по CodeIgniter
CodeIgniter 4. PSR-4. Произвольная MVC
CodeIgniter 4. PSR-4. Произвольная MVC

Комментариев: 7 RSS

1Дмитрий09-09-2020 13:29

Благодарю за отличную работу - документация на 5 баллов!

Добавил в закладки.

2Аноним19-02-2021 12:55

Здравствуйте, Максим, Вы могли бы добавить не сжатую версию css в dist (возможно как unmin.css, что навыворот стандартам )), но тем не менее, хоть так)?

3MAX19-02-2021 13:44

Действительно, странная просьба. :-) Один вопрос: зачем?

4Аноним19-02-2021 20:40

Чтобы не приходилось разжимать, чтобы иногда посмотреть в код, чтобы было под рукой, без необходимости лезть в мануал. Что тут странного то? Бутстрап, булма, квери, етс, они странные? Мне кажется это просто нормально.

5Аноним21-02-2021 02:59

И снова здравствуйте )

berry-noformat.css это НЕформатированный, сжатый, минимизированный, обычно коротко *-min.css,

А НЕсжатый это будет форматированный, или , коротко обычно просто *.css.

Форматируют же для читабельности, а для скорости форматирование убирают, верно?

т.е. всё наоборот. Простите за занудство. )

6MAX21-02-2021 08:02

sass --update berry.scss:dist/какхочу.css --no-source-map

7Аноним26-03-2021 14:40

Щиро дякую )

Оставьте комментарий!

Комментарий будет опубликован после проверки. Вы соглашаетесь с правилами сайта.

(обязательно)

Навигация
  • Шаблоны для MaxSite CMS 22
  • jQuery и JavaScript 6
  • Java и Android 5
  • PHP/ООП 25
  • SQL 17
  • Albireo Framework 11
  • Berry CSS 7
  • CSS, HTML, LESS, SASS 23
  • PHP 37
  • Тайм-менеджмент 9
  • Софт 37
  • SEO 13
  • Git. GitHub 3
  • CodeIgniter 5
  • Landing Page 3
  • Alpine.js 14
  • Фильмы 2
  • Дневник 55

Здесь можно заказать создание сайта (только Украина), шаблона или лендинга. Также вы можете выбрать готовые шаблоны для MaxSite CMS по небольшой цене. Также можно купить отдельные модули, компоненты для вашего сайта.

MaxSite.org
Как создать свой сайт

Услуги по созданию сайтов, блогов, лендингов
Обратная связь • Реклама на сайте
Карта сайта
Мои проекты
  • Шаблоны для вашего сайта
  • Заказать создание сайта
  • MaxSite CMS
  • Berry CSS (CSS Utilities)
  • Albireo Framework
  • UniCSS (Universal Atomic CSS)
  • Landing Page Framework
  • Бесплатные НТML-курсы
Ссылки
  • Telegram-канал
  • Github
  • Twitter
  • Telegram-бот
  • RSS
© MaxSite.org, 2006-2022. Работает на MaxSite CMS | Время: 0.2579 | SQL: 20 | Память: 4.63MB | Вход