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

Berry 3. Версия alpha 7 — документация

Berry CSSПросмотров: 2050Комментарии: 04 августа 2020 г.

Те кто читает меня в телеграмм-канале знают, что я сейчас плотно занят переделкой Berry CSS. Да и на сайте я делал анонс. Переделка очень большая, затрагиваются все основные модули, но главное, я решил, что вначале будет документация, а уже потом будет публичная версия (значительно позже).

Поэтому, желающие могут ознакомиться с ранней версией документации, которая идёт в комплекте с версией Berry — alpha 7. Скачать версию Berry не получится, поскольку это закрытый репозиторий, но желающие могут вытянуть css-файл из документации, чтобы поиграться при желании.

Также я хочу немного остановиться на основных изменениях и новых возможностях css-фреймворка.

В первую очередь — это то, что я сделал модуль типографики, как это изначально было в UniCSS. Мой расчёт на сторонний фреймворк не оправдался, поэтому будет свой вариант. Тем более, что типографика достаточно простой модуль.

Berry и будет строиться на независимых модулях.

  • resets — сбросы normalize и border-box
  • utilities — утилитарные классы
  • colors — цвета
  • typography — типографика
  • components — дополнительные компоненты (используется JavaScript)

Сбросы используются нормальные, без каких-либо модификаций. Это очень важно, поскольку от этого зависит «начальная точка» любой вёрстки. И любое отличие от «стандарта» — зло.

Компоненты — это то, чего постоянно недостаёт при создании сайта. Но в Berry компоненты будут полностью независимы, то есть можно будет их переделывать под свою задачу. Кроме того, компоненты могут содержать js-код, который так же лишен внешних зависимостей. Пока у меня ещё не было времени ими плотно заняться, поэтому эту работу я отложил на более поздний срок.

Другой важный момент — кастомизация под свою задачу. Здесь есть уровень Sass и уровень CSS.

Раньше приходилось использовать свой файл variables.scss, чтобы заменить все sass-переменные фреймворка. Теперь переменные объявлены как !default, а значит достаточно переопределить только те, которые требуют изменения. Об этом написано в документации, не буду повторяться здесь.

Также можно переопределять поведение Berry через CSS-переменные. То есть IE11 — прощай! Вообще меня всегда смущал тот факт, что для смены каких-то примитивных вещей, например базовый шрифт дизайна, требует sass-перекомпиляция. Через css-переменные это всё делается намного проще и удобней. И вот теперь в Berry используется множество классов, которые понимают css-переменные.

Преимущество здесь в том, что а) есть возможность кастомизации дефолтных свойств классов и б) уменьшение объёма css-кода, поскольку вариативная часть вынесена в переменные.

Дальше. Модуль цветов. В своём канале я уже рассказывал основную идею о том, как рассчитывается плавная градация яркости. Используя немного магии Sass, каждый цвет задаётся в виде значения Hue и Saturation:

$colorHS-gray:   210,  5%; // Hue, Saturation
$colorHS-red:      4, 95%;
$colorHS-brown:   15, 47%;
$colorHS-orange:  35, 99%;
$colorHS-yellow:  53, 99%;
и т.д.

А вот яркость определяется автоматом с равномерным шагом между яркостью 100 и 900. Получилось симпатично. Ну и главное что это удобно настраивается в широких пределах. Те, кто привык работать с именованными цветами, могут работать только с ними, отключив генерацию яркостей. И, опять же, цвета можно переопределить через css-переменные.

В Berry доступны новые возможности CSS 3, вроде колонок для текста (collumn), свойства фона, object-fit и т.д. Кроме того, я решил добавить экспериментальную возможность по поддержке CSS Grid. Кто с grid работал, знает, что с ним сумасшедшая вариативность и загонять её в отдельные классы нереально — это очень раздует css-код, и при этом всё равно не покроет все варианты. Поэтому для grid я использую css-переменные. Получилось достаточно просто и элегантно:

<div class="grid-var" style="--gap: 20px 10px; --columns: auto auto auto;">     
    <div class="grid-item-var" style="--column: 1/3; --row: 1/3">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div class="grid-item-var" style="--column: 2/4; --row: 3/4">5</div>
</div>

То есть два класса: один для контейнера, другой для ячейки. Для них простые css-переменные. Осталось прикрутить для сетки разные media-условия и можно будет пользоваться.

Что ещё отметить?.. Например формы. Дизайн можно сделать любой — это вообще не проблема. А вот поддержку :invalid уже сложней, поскольку в браузерах нет поддержки «промежуточных» состояний через CSS. Не буду вгонять в тоску этой теорией, но попробуйте в своём фреймворке прописать required для текстового поля и убедитесь, что далеко не все его полноценно поддерживают. А те, кто поддерживают пестрят как новогодняя ёлка от этого самого :invalid в ситуации, когда пользователь даже не прикоснулся к отправке данных.

Проблема достаточно серьёзная и присутствует почти в каждом css-фреймворке и именно поэтому все их демо-примеры не содержат невалидных форм.

В Berry CSS я решил это за счёт разделения классов, а также пару строчек js-кода — без него, к сожалению пока никак.

Документацию я выложил сейчас, поскольку основная её часть уже готова. Планов, естественно, масса. Постепенно буду добавлять новые примеры использования. Сейчас они достаточно скудны, но на это тоже нужно время. :)


Создание сайтов (Украина) →
Скидка 154$ на шаблоны
Базовые приёмы работы с CSS-переменными
twitter.com facebook.com
Другие записи сайта
Блогу 2 года
Блогу 2 года
Как организовать древовидные рубрики на сайте (Adjacency List)
Как организовать древовидные рубрики на сайте (Adjacency List)
Полезняшки
Полезняшки
PHP-роутинг (Routing) для новичков
PHP-роутинг (Routing) для новичков
База SQLite и основы SQL. Часть 7
База SQLite и основы SQL. Часть 7
Адаптивная сетка. Верстка по-новому
Адаптивная сетка. Верстка по-новому
Оставьте комментарий!

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

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

Навигация
  • Шаблоны для 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.3233 | SQL: 20 | Память: 4.6MB | Вход