When to switch to another framework
Pico is small on purpose: it styles HTML and adds almost nothing on top. For a blog, documentation or a portfolio that is enough. But a project may grow a task that a bigger framework handles more easily — and it pays to notice that in time.
What Pico lacks
| You need | In Pico |
|---|---|
| Tabs, a carousel, toast notifications | No, only with your own code |
| Badges, alert banners | No ready classes |
| A grid with columns of different widths | Only equal grid columns |
| Utilities for spacing, colors, alignment | None |
| A unique design from a mockup | You would override many variables |
Signs it is time to switch
- Your own CSS outweighs the markup, and most of it fights Pico's styles.
- You are writing the third home-made component that Bootstrap has ready.
- A designer sent a mockup where buttons, fields and cards look nothing like Pico.
- A team works on the interface and needs shared rules, not verbal agreements.
Where to go
| Framework | When to choose it |
|---|---|
| Bootstrap | You need ready components with JavaScript: modals, tabs, toasts |
| Tailwind CSS | A custom design from a mockup, full control through utility classes |
| daisyUI | You want ready components, but built on Tailwind |
All three courses are on this site in the HTML and CSS frameworks section. The semantic markup Pico trains you to write pays off whichever you choose.
A gradual switch
You do not have to rewrite the whole site. Pico has a conditional build, pico.conditional.min.css: it styles only what sits inside an element with the pico class. Old sections stay on Pico while you build new ones with another framework:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.conditional.min.css">
<div class="pico">
<h3>Blog on Pico</h3>
<button>Subscribe</button>
</div>
<div>
<h3>A new section without Pico</h3>
<button>Plain browser button</button>
</div>In the preview the top block is styled by Pico, while the bottom one looks like an unstyled page: a grey default browser button. This way two sets of styles stay out of each other's way while you move pages over one by one.
Common mistake
Linking both Pico and Bootstrap to a page in full. Both style the <button>, <input> and <table> tags, and the result depends on the file order: buttons get a mix of two designs. If the frameworks must live together, confine Pico with the conditional build.