Contents
Pico CSS
A classless CSS framework: good-looking pages from plain semantic markup.
1.Getting started
- What Pico CSS isThe classless CSS framework Pico: how it differs from Bootstrap, when it fits, and how to add it to a page with one line.
- Pico builds and installing with npmWhich Pico files exist: the regular and classless builds, fluid and color variants, plus installing the package with npm in a Vite project.
2.Styling content
- Headings, text and linksHow Pico styles headings, subtitles in hgroup, paragraphs, inline emphasis, quotes and links, including the secondary and contrast link variants.
- Lists and tablesHow Pico styles bulleted and numbered lists and tables: stripes with the striped class and horizontal scrolling for wide tables.
- Page layout: container and gridPage layout in Pico: header, main and footer, the container and container-fluid classes, and a simple column grid with the grid class.
3.Components
- Buttons and rolesButtons in Pico: the secondary, contrast and outline variants, a link styled as a button with role=button, a button group with role=group, the aria-busy loading indicator and tooltips.
- Forms and validation statesForms in Pico: fields with labels, small helper text, role=switch toggles, a field with a button on one line, and error states with aria-invalid.
- Cards: the article tagCards in Pico made from the article tag: the card header and footer, an image inside, and a grid of cards for a list of blog posts.
- Accordion: details and summaryCollapsible blocks in Pico with the details and summary tags: an accordion without JavaScript, a block open by default, mutually exclusive items via name, and summary styled as a button.
- Navigation and dropdownsA site menu in Pico from the nav and ul tags, the current page with aria-current, the details.dropdown menu and breadcrumbs.
- Modal: dialogA modal in Pico with the dialog tag: markup with article, a close button, opening with showModal and closing with close and form method=dialog.
4.Customization
- Dark mode and color variantsLight and dark themes in Pico: automatic choice from system settings, the data-theme attribute, a theme switcher and Pico's ready-made color builds.
- Customizing with CSS variablesHow to change Pico's look without editing its files: --pico-* variables for corner radius, spacing, font and primary color, globally and for single elements.
5.Practice
- Building a portfolio pagePractice: Anna's personal page in Pico using everything covered — a menu, a greeting, a project grid, blog posts, questions and answers, and a contact form.
- When to switch to another frameworkPico's limits: which components it lacks, signs that a project has outgrown it, choosing between Bootstrap, Tailwind and daisyUI, and Pico's conditional build for a gradual switch.