Зарелизил вторую версию awsm.css

С кодовым именем “Charmander”. Почему бы не называть их именами покемонов.

Я, вроде бы, не писал здесь про awsm.css, потому начну с небольшой предыстории.

Что это вообще такое

Год назад, в качестве лабораторной работы по веб-программированию в университете я сделал небольшую CSS-библиотечку, которая превращала обычный, чисто написанный HTML в красивый. Шрифты там, отступы и всё вот это вот. После этого я её использовал для всех подобных лабораторных, для курсовой, для веб-морд к лабораторным по другим предметам и пр.

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

Как всё развивалось

Сперва я просто пытался всунуть туда как можно больше элементов. Таблицы? Конечно! Формы? Безусловно! Кнопки? Ну куда же без них!

Я завёл кучу ишьюс на Гитхабе, в надежде, что если я сам всё это не осилю, то придёт кто-то, кому это понравится, и доведёт до ума. Так примерно и случилось, но не совсем.

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

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

Решил, что на новогодних выходных перепилю всё так, как мне нравится. Прям с нуля.

Взял и переписал

Думал, что сделаю это быстро, а в итоге потратил почти неделю. Однако, теперь всё выглядит так, как мне нравится (ну почти). Пробегусь по некоторым особо клёвым моментам.

Адаптивная типографика

Чтобы всё плавненько адаптировалось, размер шрифта меняется от 16px на мобильных до 20px на десктопах. Выглядит это красиво, потому что нет никаких скачков.

Индикаторы скролла

В макОС есть проблема, которой нет в других ОС. В ней скрываются скроллбары. На самом деле это ни разу не проблема, а очень крутая фича. Однако, иногда не совсем понятно, когда нужно поскролить, а когда нет. Например, в блоках с кодом или в таблицах. Осм (awsm по-русски, ага) рисует в таких случаях тёмную рамку в той стороне, где предполагается скролл. Выглядит клёвенько:

Это же поведение помогает реализовать другую клёвую фичу..

Адаптивные таблицы

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

Подчёркивание в 1px

Если у вас ретина, то обязательно посмотрите на подчёркивание у ссылок в библиотеке, оно в один ретиновый пиксель. Это клёво выглядит, потому что оно тоньше, чем обычный border: 1px solid;. Я давно искал, где бы это применить. Недавно сделал это у Ильи Бирмана в меню, оказалось так круто, что не смог устоять. Добавил и сюда.

Модные инструменты

Не обошлось без интеграции с PostCSS. Если кто-то использует его в своей работе, то библиотека подключается как плагин и просто инжектит себя в начало всего CSS-кода.

Ещё небольшой набор всякого:

  • Stylelint;
  • Editorconfig;
  • Travis CI;
  • CSSO.

Убрал всё лишнее

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

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

О дальнейшем развитии

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

Скоро ещё напишу доку о том, как можно сделать свою цветовую схему на основе того, что есть. Не всем ведь нравится чёрным по белому.

Нид хэлп

Сегодня, после релиза второй версии, библиотека набрала ещё некоторое количество звёзд, и вот теперь их число наконец-то трёхзначное.

И заодно попала в дневные тренды Гитхаба по HTML:

Но это не предел, и вы всегда можете:

2017
Популярное