Релиз Berry CSS 4.0

CSS, HTML, LESS, SASS

Обновил Berry CSS до 4-й версии. Это итог примерно месячной работы, где целью была — новая структура sass-файлов. Поэтому с точки зрения CSS-классов версия практически ничем не отличается от предыдущей. Было добавлено несколько новых классов, но это я и так делаю постоянно.

Отмечу, что в Berry 4 больше не будет компонентов, которые используют JavaScript. Вместо них можно использовать Alpine.js, которая предлагает намного больший функционал. Связка Berry + Alpine прекрасно себя зарекомендовала, поэтому у меня в планах всё-таки сделать отдельный проект, где будут разные примеры её использования. Это планы на будущее, а пока можно посмотреть примеры, которые я публикую здесь же.

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

Читать дальше →

Обновление бесплатного HTML-курса

Дневник

Сделал большое обновление своего HTML-курса для новичков (теперь с котиками). По сути мне пришлось его полностью переписать, поскольку я хотел поменять всю структуру.

Сам по себе курс рассчитан на новичков. Старый вариант базировался на UniCSS, новый на Berry CSS. Большой разницы в классах между ними нет, но в Berry хорошая документация с примерами и есть Builder, который используется при прохождении курса.

В новой версии я упростил сложность уроков и добавил задания для каждого. Раньше большая часть уроков была закрыта, поскольку была частью платного обучения. Сейчас всё открыто и бесплатно. Часть старых уроков я убрал, например работу с Sass, Git, обработку форм на PHP. Как показал мой опыт обучения, они всё-таки сложны для новичков.

Читать дальше →

Создаём To-do List на Alpine.js

Alpine.js

Наверное все программисты создавали свой todo-«велисипед», мне же было интересно разобраться насколько сложно сделать его с помощью Альпины. Для затравки, если будет время, можете посмотреть похожие примеры, только сделанные на других js-фреймворках — todomvc.com.

Когда я начал делать на Alpine, то сразу же сделал ошибку, что использовал «классический» подход в реализации. В итоге код получился запутанным и сложным. Но потом всё-таки сообразил, что можно сделать намного проще и элегантней. В «обычном» варианте нужно думать как связывать реальные данные с их хранением, то с Альпиной это работает из «коробки». По сути мы и работаем только с массивом данных, а отображение строится автоматом.

Мой пример достаточно простой. Я не стал его усложнять, оставил только базовый функционал. Так что при желании, вы сможете легко добавить что вам нужно.

Читать дальше →

Имитация select с помощью Alpine.js

Alpine.js

Все верстальщики знают, что тэг SELECT один из самых капризных и плохо поддающихся кастомизации. Разработчики браузеров до сих пор не могут договориться какими css-стилями их можно настраивать, поэтому нам как правило приходится довольствоваться типовым поведением этого элемента с небольшим изменением дизайна.

Нужно понимать, что SELECT — это сложный элемент. Это не только внешний вид, но и достаточно сложное поведение, которое работает на события click, keydown, space, стрелки курсора, а также получение фокуса через Tab. Из-за этого все попытки переписать SELECT на какой-то свой html/js/css-вариант обычно ограничиваются только дизайнерской частью — повторить стандартное поведение достаточно сложно.

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

Читать дальше →

Релиз шаблона MF 11 (февраль 2021)

Шаблон MF

Заказать обновление шаблона или купить его можно будет с 8 февраля. Предыдущая версия шаблона позволила двигаться дальше, поэтому в новой версии появилось много нового и интересного. :-)

Пожалуй, самым заметным будут новые цветовые темы оформления. Основной цвет шаблона blue, но в прошлой версии я добавил для тестирования red и green. Я с ними много работал и в итоге расширил MF до 10 цветовых тем: default, cyan, green, indigo, lime, orange, pink, purple, red, violet. Достаточно выбрать подходящий дизайн в админ-панели. За счёт того, что используется Material Design ничего не требуется менять в HTML-коде. Выглядит довольно круто.

Но это ещё не всё. Также я добавил одну инверсную тему, рассчитанную на тёмный фон браузера. Здесь срабатывает возможность Berry CSS, которая позволяет инвертировать цветовые палитры. Пока тема в статусе экспериментальной, поскольку достаточно сложно добиться автоматической смены дизайна на инверсный. Тут просто требуется время, чтобы отследить все нюансы.

Читать дальше →

Перейти к странице: