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

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

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

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

Сделать сетку на flex просто. Намного сложнее добиться её хорошей адаптивности. На сегодняшний день используется несколько разных подходов к этой задаче. Самый распространённый — это использование классов ширины в media-условиях. Здесь мы указываем разную ширину в зависимости от ширины экрана.

У такого способа есть несколько проблем, главная из которых — здесь не учитывается наполненность каждой ячейки. Может получится так, что ячейка с объёмным содержимым будет занимать меньше ширины. Чтобы сделать сетку, которая будет сама подстраиваться под своё содержимое, приходится отказаться от фиксированной ширины. Но, для начала рассмотрим вариант, где используется «стандартный» вариант с фиксированной шириной, чтобы понять суть проблемы.

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

Расскажу про одну методику, которая позволяет достаточно быстро перевести макет страницы в HTML-код прототипа.

Например у нас есть лендинг. Как правило на первом этапе происходит сбор информации, а потом рисуется графический прототип. Это может быть обычный Ворд, или гугл-документы, но часто это сервис wireframe.cc. Мне он очень нравится, поскольку не содержит ничего лишнего и прост для работы. Ну и бесплатный, что тоже важно.

Иногда работу в wireframe.cc выполняет сам копирайтер. Там он не только пишет тексты, но и размечает блоки, которые по его мнению можно скомбинировать определённым образом. Когда всё готово, этот макет получает html-верстальщик, который должен перенести тексты (это простое копирование) и разверстать блоки, только уже в HTML-код.

Здесь есть очень важный момент — первая версия вёрстки должна повторять макет wireframe.cc (это может быть любой другой сервис — я привожу его только как пример). То есть не нужно верстать в цвете, задавать все изображения, настраивать отступы: нет — это будет тоже черновой вариант, но только выполненный в html-коде.

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

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

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

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

Думаю, что каждый вебмастер слышал о концепции Material Design от Google. В целом она рассчитана на разработчиков мобильных приложений, но может частично применяться и для обычных сайтов. В первую очередь речь идёт о подборе цветовой палитры.

Влияние Material Design нашло своё отражение в css-фреймворках, правда в ограниченном объёме.

Я хочу рассказать о Material Design с этой точки зрения, поскольку будущая Berry 3 будет поддерживать его цветовую схему полностью. Начнём с описания того, как обычно создаётся сайт.

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

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

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

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

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

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

Концепция css-переменных очень проста, но судя по многочисленным публикациям, она создаёт определённое непонимание на уровне «а зачем они вообще нужны?». Как правило верстка выполняется с помощью препроцессоров (в первую очередь Sass). Но поскольку там уже есть свои переменные, то становится непонятно, зачем ещё создавать их на уровне CSS.

Ответ кроется в понимании того, для кого именно создаются css-переменные и какое у них будет назначение.

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