Современная веб разработка не стоит на месте, и с каждым днем сложность проектов только растет. Постоянно выходят новые инструменты, которые позволяют облегчить и автоматизировать работу разработчику, чтобы он мог идти в ногу со временем и отвечать современным требованиям, ритмам разработки. Сначала нам на помощь пришли препроцессоры less, sass, и т.д. Потом появились системы сборки проектов gulp, grunt, webpack и т.д. Вышли фрейморки, самый известный из них наверное sass compass.
Все было хорошо, но камнем преткновения стало то, что крупные проекты стали долго компилироваться и начали тратить драгоценное время разработчиков. Новым разработчикам тяжело было учить новый синтаксис препроцессоров, что усложняло подготовку новых кадров для компаний. Существующие крупные проекты было проблематично переписать на препроцессоры. Препроцессоры загрязняли CSS код делая его перегруженным функциями и миксинами, снижая его читабельность, особенно для малоопытных разработчиков в команде. Тогда на помощь пришел революционный проект PostCSS, который позволяет парсить существующие CSS файлы, и на их основе строить AST (Абстрактное синтаксическое дерево) деревья и трансформировать это дерево с помощью своих JS плагинов. Это инновационный подход с высокой скоростью обработки входящих файлов. И с каждым днем популярность PostCSS во всем мире только растет. PostCSS используют многие индустриальные лидеры, среди них google, github, ebay, wikipedia, taobao.
Многие разработчики пользуются такими известными плагинами как precss, cssnext, autoprefixer.
precss — позволяет сократить разрыв с препроцессорами и позволяет реализовать их функциональность с помощью PostCSS.
cssnext — позволяет уже сейчас использовать будущие возможности CSS.
autoprefixer — добавляет вендорные префиксы для CSS свойств, вам не нужно думать о префиксах(-o, -moz, -ms), autoprefixer сам добавит нужные префиксы, чтобы браузеры лучше поддерживали нужную функциональность.
Нет так давно в экосистеме PostCSS появился новый плагин — Hamster, который позволит вам сократить время разработки и поддержки ваших проектов. Это фреймворк, который призван стать альтернативой sass compass в PostCSS. И позволит разработчикам перейти на PostCSS, которые еще не сделали этого из-за отсутствия альтернативы compass. Фреймворк по сравнению с конкурентами имеет большую гибкость, высокую скорость работы и простой синтаксис.
Для установки PostCSS Hamster вам необходимо в существующем npm проекте выполнить команду:
npm install postcss-hamster --save-devДалее нам необходимо создать JS файл, который будет обрабатывать ваши файлы. В коде необходимо заменить filename.css на имя вашего входного файла, а outputfilename.css на имя файла, в который запишется результат.
var fs = require("fs"),
postcss = require("postcss"),
hamster = require("postcss-hamster");
fs.readFile("filename.css", "utf8", (err, css) => {
postcss([hamster]).process(css).then(result => {
fs.writeFileSync("outputfilename.css", result.css);
});
});Запускаем наш JS файл и получаем результирующий CSS файл.
node имяфайла.jsБолее подробнее установка и настройка рассмотрена в документации.
К сожалению для того, чтобы ознакомиться с возможностями фреймворка и начать полноценно пользоваться им, вам необходимо прочесть документацию. Хорошая новость заключается в том, что вся документация на русском, хорошо документирована, и там представлены реальные примеры с которыми была подготовлена документация. С первого взгляда многим может показаться, что документация перегружена и сложна, но это не так. Документация специально разделена на логические части, что позволит даже неподготовленному пользователю легко начать работу с ним и postcss. А более опытные пользователи могут выбрать только то, что необходимо.
На данный момент фреймворк протестирован на нескольких моих проектах, но требуется тестирование со стороны пользователей, чтобы исключить баги. Так же принимаются пожелания и список возможностей, которые вы хотите увидеть в следующей версии. Сейчас проект находится в стадии RC и готовится к релизу, дальше будет вестись работа над версией 2.0 c новыми полезными и интересными функциями. Пожелания вы можете высказать в Gitter. Так же с радостью буду ждать ваши pull requests.
C уважением, разработчик PostCSS Hamster, Григорий!
Исходный код: Github
Документация: RU
Поддержка / Обсуждение: Gitter
Комментарии (44)
sashabeep
10.04.2017 23:43Ну хоть какой-нибудь Jumbotron запилить все-таки для примера надо было бы
nullc0de
11.04.2017 00:19-4Спасибо. Согласен. Просто не охото было дублировать примеры из документации и пересказывать ее. Очень загружен работой, не было времени придумать примеры, у меня еще второй проект сейчас в разработке для облегчения миграции пользователей с sass и less. Если нужны примеры, то можете найти здесь https://github.com/h0tc0d3/postcss-hamster/tree/master/web/src
Так же в течении дня по мск могу помочь в gitter и ответить на вопросы.
stas404
11.04.2017 01:28-2Приветствую.
У меня есть собственный велосипед на эту тему, стало интересно глянуть, как тут реализовано то, что делал однажды сам. Например, про вертикальный ритм.
Открыл сайт проекта и в devtools увидел, как после загрузки страницы каждому блоку добавляется атрибутstyle="..."с дублирующимисяline-height, margin, paddingи т.д.
Контент при этом дергается и без JS вертикальный ритм не работает.
Начнем с вопроса — зачем, для чего и почему сделано именно так?
nullc0de
11.04.2017 09:15-2В документации все описано, зачем и почему. Смотрите в документации последний раздел.
stas404
11.04.2017 10:52В принципе, предсказуемо. Только вот в документации в основном идет описание настроек инструмента, но практически никак не раскрыты начальные предпосылки и ход мыслей при выборе того или иного подхода и конкретного способа реализации тех или иных моментов. Давайте проясним и попробуем еще раз — спрашиваю из академического интереса и с практической целью (вдруг, возможно, чем-то смогу помочь или подсказать) — поэтому, если вы заинтересованы в обсуждении, а не в тыканиях в документацию — как говорится, дайте знать ;)
Например, из документации:
Так как все манипуляции с элементами можно осуществить только после того, как документ был полностью загружен, то в rhytm встроен обработчик события document ready, который вы можете использовать. Так же событие document ready срабатывает раньше, чем браузер просчитает все CSS значения. Так как библиотека использует просчитанные браузером значения CSS свойств, то надо дождаться момента когда браузер это сделает. К сожалению я не нашел эффективного способа найти этот момент, и как решение проблемы необходимо использовать window.setTimeout со значением 500-1000мс. В старых браузерах и на слабых компьютерах 500мс бывает не достаточно.
На мой взгляд, это решение является весьма костыльным и непрактичным — ненадежно и к тому же передергивание контента выглядят не эстетично.
Рассматривали ли вы другие варианты, как можно это побороть и обойтись без ощутимой задержки при добавлении корректирующих стилей для типографики?
Первое, что приходит в голову — по идее, нас интересуют два события — «DOMContentLoaded» (когда загружена вся разметка) и «onload» у основного css (когда стили загрузились и готовы примениться). Как только оба события произошли — можно запускать корректировку (возможно, потребуется минимальный в районе нескольких миллисекунд таймаут — надо проверить, как разные браузеры применяют стили после загрузки). По идее, должно сработать, скачков не будет видно. Можно, в принципе, набросать концепт.
Добавление отдельных стилей к каждому элементу через атрибут style — грубовато. Почему не отдельными классами, типа для производительности?nullc0de
11.04.2017 11:12Все это хорошо в теории. Но в новых браузерах событие load и onload не срабатывает и я пробовал вешать обработчик на load. Так же пытался найти решение, везде пишут про setTimeout. Вы можете форкнуть и добавить отдельными классами, но все существующие библиотеки для вертикального ритма пишут в style так как он имеет больший приоритет. Во вторых допустим у нас есть разные картинки, они будет иметь разные размеры и т.д., нам нужно компенсировать их отдельно — у разных элементов. Если вы переживаете за скорость, то она не больше чем грузится jquery… Можно вообще не использовать JS библиотеку для браузера, это на усмотрение пользователя.
stas404
11.04.2017 16:08Но в новых браузерах событие load и onload не срабатывает
Странно слышать, обычно наоборот :)
В каких? Набросал, суть показать. В основных, вроде, работает, мобилки стоит проверить. Дерганий нет.
но все существующие библиотеки для вертикального ритма пишут в style так как он имеет больший приоритет
Приоритет можно же повышать и другими способами. Пихать инлайн — все же не лучшая практика, тем более, очень много повторяющихся значений.
Если вы переживаете за скорость
Конечно, переживаем — и за перфоманс и за пользовательский опыт и за эстетику :>
Просто в текущей реализации много непонятных (для меня) ходов, преследующих странные цели и реализованных странными способами. Это настараживает.
Можно вообще не использовать JS библиотеку для браузера
Но тогда вертикальный ритм ломается, например, строки в соседних колонках не будут совпадать и т.д.
Ладно. О главном, о философском — так ли необходимо использовать js и дробные значения метрик, которые нужно потом корректировать?
Полагаю, выбрав нормальные коэффициенты, можно решить большую часть проблем на этапе сборки без пост-обработки в браузере. Даже с картинками вопрос можно решить (размеры то известны).
Вот, 1.618 — неужели это действительно так важно? :)
Тем более, на практике все равно будет погрешность.
Действительно ли стоит овчинка с золотым сечением таких выделок?nullc0de
11.04.2017 16:25Золотое сечение мало кто использует, можно любые коэффициенты использовать. Можно свое значение вручную ввести. Не так необходимо использовать JS. Но будут пиксельные смещения так как em и rem значения округляются… К концу документа будет смещение сетки…
stas404
11.04.2017 18:21Имеется ввиду использование конкретных под проект заведомо целочисленных значений. Нет погрешности округления — нет проблем и смещений — чистый css и красивая компактная реализация. Что-то типа такого, быть может, набросал по-быстрому с линейкой:
http://codepen.io/anon/pen/dWbZPY?editors=1100
Есть ли реальная необходимость для простого ритма городить что-то большее?stas404
11.04.2017 18:40Нюанс — требуется ручная колибровка под конкретный шрифт, но это делается один раз под проект. И, кстати, я забыл font-family задать — отколибровал визуально под то, что видел (lubuntu без виндовых шрифтов), надо указать font-family — иначе может поплыть ритм при рендеринге другим шрифтом по умолчанию (какой там у codepen применяется, которого у меня нет).
Напишите, если поплывет.nullc0de
11.04.2017 19:14Вы говорите, про то, что делает Plumber. https://jamonserrano.github.io/plumber-sass/
Там не заметны съезды сетки — текста мало, и толщина линейки толстая. Я знаю как на js эти значения получить. Plumber компенсирует базовую линию. Это компенсация не высоты линейки, а смещения базовой линии между 2 линиями.
fontSize = fontSize * gridHeight; lineHeight = lineHeight * gridHeight; marginTop = (leadingTop - shift) * gridHeight; paddingTop = (shift - baselineDifference) * gridHeight; paddingBottom = (1 - shift + baselineDifference) * gridHeight; marginBottom = (leadingBottom + shift - 1) * gridHeight;
Для нас главное свойство это line-height и отступы padding и margin, которые генерятся независимо от имени шрифта. Допустим у нас значение 1.5432em одни браузеры возьмут только 1.54em, 0.0032 потеряются, что даст смещение на часть пикселя, через 100 строк эта част пикселя превратится в несколько пикселей. Все округляют по разному. Нам не важно какой шрифт рендерится.
nullc0de
11.04.2017 18:44Все это хорошо если вы используете целочисленные значения в px. Представим ситуацию человек страдает близорукостью и меняет базовый размер шрифта браузера допустим с 16 до 18px, em и rem позволят сохранить пропорции, а вот px нет, но вот беда наши 18px ломают вычисления и уже получим при рендеринге более дробное значение в пикселях. Одни и те же значения не вариант, под один проект один ритм подойдет, а под другой другой. JS библиотеку использовать не обязательно, она просто улучшает вид, вертикальный ритм на CSS генерится изначально, и он уже хороший и к концу документа не все заметят смещение линейки. Палки в колеса может поставить браузер фирмы microsoft… он любит все ломать… ;)
Плывет базовая линия только и зависит от используемого шрифта. Ритм не плывет от разного используемого шрифта. Насчет того, что плывет базовая линия, я знаю как компенсировать это на js, но код не стабильный. (Если приглядеться на больших размерах шрифта, то заметно, что текст не ровно по середине линейки. Это совсем другая история.)stas404
11.04.2017 20:02При указании шрифта (и соответствующей колибровки под него), предполагается такая картина:
screen.png
nullc0de
17.04.2017 21:20
Не знаю как богоугодно, но сейчас скрипт я очень сильно оптимизировал, и он вообще нереально быстро работает. Работает быстрее рендеринга самой страницы и за один раз стили обновляются. Многими такие скорости обработки не достижимы Скрипт ловит моменты когда меняется контент. Чуть поменялся синтаксис работы только с ним. PostCSS Hamster RU Documentationstas404
18.04.2017 06:13Все равно же дергается. Попробуйте поиграться с подходом в наброске, который я выкладывал выше. Таймаут точно выкидывайте — будет немного побогоугоднее.
nullc0de
11.04.2017 11:32Кстати больше всего ресурсов на странице потребляют фреймы youtube. Они самые медленные и тормозные.
Дальше SVG анимация. Поэтому пока рендерится анимация, отдельным потоком идет компенсация.
Если отключить SVG и youtube фреймы, то компенсация происходит практически моментально.
Код тестировал на селекторе * и файле html сбольшим DOM в 300кб. Скорость работы приемлемая.
Многие библиотеки, которые используют на страницах сайта работают медленнее.
novoxudonoser
11.04.2017 12:18А вот чисто гипотетически, если знать заранее размеры блочных элементов (а это возможно), которые будут выравниваться по линейке, можно ли обойтись препроцесором, а не js рантаймом для это задачи?
nullc0de
11.04.2017 12:26Конечно можно. Для блочных элементов можно изначально установить размер в css согласно ритму.
Мы не всегда можем знать начальный размер элементов и они могут например растягиваться ;)novoxudonoser
11.04.2017 12:31Ну по крайне мере я бы хотел видеть в следующих версиях такую возможность для элементов, размер которых известен заранее.
nullc0de
11.04.2017 12:47так ставьте их размер через spacing() ;)
или вам необходимо типа fixrhythm(450px);?
nullc0de
11.04.2017 17:22Специально для вас добавил функцию rhythm(470px), смотрите пример использования в документации ;)
novoxudonoser
11.04.2017 12:05Очень крутой плагин, буду использовать. Бегло пробежался по документации, но вот не понял — можно ли использовать для размера шрифта calc()?, css шлюзы это очень круто.
nullc0de
11.04.2017 12:16Конечно можно, я постарался, чтобы плагин не ломал работу других плагинов для postcss и функции CSS.
Но думаю вам не нужен будет calc, если вы используете мой плагин.novoxudonoser
11.04.2017 12:24calc нужен для того чтобы рассчитывать оптимальный размер шрифта в зависимости от размера экрана устройства пример, ваш плагин может с этим помочь?
nullc0de
11.04.2017 12:45Посмотрел лучше статью. Реализовать такое нереальное так как мы не знаем значения vh и vw.
Я бы предпочел примерно такое решение, как в статьи реализовано миксином https://www.smashingmagazine.com/2015/06/responsive-typography-with-sass-maps/
Перевод:
https://phoenix-cg.ru/blog/8/
nullc0de
11.04.2017 12:50Пишите в gitter, если есть новые идеи, можно будет придумать, как лучше сделать что-то подобное…
NLO
11.04.2017 16:25НЛО прилетело и опубликовало эту надпись здесь
nullc0de
11.04.2017 16:29Какими костылями? Мой плагин не подгоняет под сетку? В плагине легко можно сразу использовать значения из modularscale не открывая сайт, плюс легко поменять в font-ratio и посмотреть изменения моментально не переписывая все значения… Компасс(слизали код у ритмо), саслайн, ритмо вообще ужас с их перегруженными миксинами… Это их недостаток они не могут без миксинов так как sass накладывает ограничения… Не говоря, про то, что c их помощью снижается читаемость css кода… Спросите например у новичка, что делает миксин margin-trail он не сможет вам ответить…
NLO
11.04.2017 17:39НЛО прилетело и опубликовало эту надпись здесь
nullc0de
11.04.2017 17:52Чего накладного в +100мс к проекту?)) Если rem и px используете считать не сложно руками, а вот с em придется много высчитывать. Да и вообще любые ручные вычисления снижают скорость работы. Если вы используете postcss, то вам не нужен nodesass, необходимость в нем есть только, если у вас тянется старый проект с sass. Я честно выкинул sass и забыл его тормоза как страшный сон. Многие вещи, что умеет sass уже есть в precss.
NLO
11.04.2017 18:04НЛО прилетело и опубликовало эту надпись здесь
nullc0de
11.04.2017 18:18Я пока не выпустил релиз и проект в пред релизном состоянии. Документацию на английском сделаю только после релиза, но точно могу сказать, что больше десятка разработчиков иностранных уже используют мой плагин и читают документацию с помощью гугл транслейтера. К сожалению документация забирает очень много времени.
monochromer
11.04.2017 20:17Спасибо за труд. Возможно, многим было бы интереснее почитать на каких правилах строить вертикальный ритм, а не как использовать сторонний плагин. Понятно, что некоторым хочется «вжух-вжух», но фундаментальные знания тоже нужны.
Еще неплохо было бы улучшить удобство сайта с документацией — кнопку включения сетки зафиксировать при прокрутке, а самой отладочной сетке задать pointer-events: none, чтобы текст под ней можно было скопировать.nullc0de
11.04.2017 20:20Правил никаких нет. Главное ритм и чтобы хорошо сочетался с дизайном, тут надо эксперементировать с разным размером базового шрифта и font-ratio. Теорию я кратко изложил в начале документации, этого должно быть достаточно, но некоторым показалось это излишнише большой теорией… Всем не угодишь. pointer-events: none. добавлю, и постараюсь добавить фиксацию кнопки сетки.
nullc0de
11.04.2017 20:41Сказано сделано, проверяйте PostCSS Hamster
Чуть поменял синтаксис позиции иконки.
klylex
«Framewok» — Framework?
«вестка» — вёрстка?
nullc0de
Спасибо поправлю. Опечатался.
funnybanana
Ну может человек букву «Р» не выговаривает =)
Вот если бы живые примеры применения этого фрэймворка в статью добавили — совсем здорово было бы.
nullc0de
Документация проекта построена на живом примере использования, и там есть фрагменты кода, которые я посчитал важно показать. Так же в исходниках можно посмотреть файл ./web/src/typography.css
Данная статья на хабре больше как анонс инструмента. В документации довольно подробно все расписано.