Оглавление
Pico CSS
Бесклассовый CSS-фреймворк: красивые страницы из обычной семантической разметки.
1.Начало работы
- Что такое Pico CSSБесклассовый CSS-фреймворк Pico: чем он отличается от Bootstrap, когда подходит и как подключить его к странице одной строкой.
- Сборки Pico и установка через npmКакие файлы Pico бывают: обычная и бесклассовая сборка, fluid и цветные варианты, а также установка пакета через npm в проект на Vite.
2.Оформление содержимого
- Заголовки, текст и ссылкиКак Pico оформляет заголовки, подзаголовки в hgroup, абзацы, выделения, цитаты и ссылки, включая варианты ссылок secondary и contrast.
- Списки и таблицыКак Pico оформляет маркированные и нумерованные списки и таблицы: полосы через класс striped и горизонтальная прокрутка широких таблиц.
- Каркас страницы: контейнер и сеткаКаркас страницы в Pico: header, main и footer, классы container и container-fluid и простая сетка из колонок с классом grid.
3.Компоненты
- Кнопки и ролиКнопки в Pico: варианты secondary, contrast и outline, ссылка-кнопка через role=button, группа кнопок role=group, индикатор загрузки aria-busy и подсказки.
- Формы и состояния проверкиФормы в Pico: поля с подписями, подсказки small, переключатели role=switch, поле с кнопкой в одной строке и состояния ошибки через aria-invalid.
- Карточки: тег articleКарточки в Pico из тега article: шапка и подвал карточки, картинка внутри и сетка карточек для списка записей блога.
- Аккордеон: details и summaryРаскрывающиеся блоки в Pico на тегах details и summary: аккордеон без JavaScript, открытый по умолчанию блок, взаимоисключающие пункты через name и summary в виде кнопки.
- Навигация и выпадающие менюМеню сайта в Pico из тегов nav и ul, текущая страница через aria-current, выпадающее меню details.dropdown и хлебные крошки.
- Модальное окно: dialogМодальное окно в Pico на теге dialog: разметка с article, кнопка закрытия, открытие методом showModal и закрытие через close и form method=dialog.
4.Настройка внешнего вида
- Тёмная тема и цветовые вариантыСветлая и тёмная тема в Pico: автоматический выбор по настройкам системы, атрибут data-theme, переключатель темы и готовые цветовые сборки Pico.
- Настройка через CSS-переменныеКак изменить вид Pico без правки его файлов: переменные --pico-* для скругления, отступов, шрифта и основного цвета, глобально и для отдельных элементов.
5.Практика
- Собираем страницу портфолиоПрактика: личная страница Анны на Pico из всего изученного — меню, приветствие, сетка проектов, записи блога, вопросы и ответы и форма связи.
- Когда переходить на другой фреймворкПределы Pico: каких компонентов в нём нет, признаки того, что проект перерос фреймворк, выбор между Bootstrap, Tailwind и daisyUI и условная сборка Pico для постепенного перехода.