🧰 pico

Нужна страница входа или админка для пет-проекта, а возиться со стилями полей и кнопок не хочется. Без CSS браузер вытягивает форму в одну строку шрифтом Times — слева на ролике видно, как это выглядит. Тащить ради пары экранов Bootstrap с классами на каждом теге — перебор.

Pico стилизует сами теги. Подключаешь один файл, пишешь обычные form, label, input и button, и форма выглядит как справа на ролике, хотя классов в разметке нет ни одного. Состояния pico берёт из атрибутов доступности, которые в форме стоит ставить и так: поле с aria-invalid краснеет, чекбокс с role="switch" становится тумблером, кнопка с aria-busy показывает спиннер.

Тёмная тема подхватывается из настроек системы, а data-theme="dark" включает её вручную — на всю страницу или на один блок. Весит pico около 11 КБ в gzip, в комплекте 20 цветовых схем.

https://github.com/picocss/pico

🔥 — если было полезно

@glo_academy | #инструменты