Pico CSS in Astro

Pico CSS is a minimal CSS framework.

This framework provides some simple element styling that is a drastic improvement over the default browser styling. I see it serve mostly as a good baseline CSS reset.

Starting with the basic Astro template, lets see how to add it to our projects.

From NPN

Pico is available as a vendored package, from a public CDN, or even via composer.

Lets use the NPM package:

npm install @picocss/pico

to add this to Astro.

SCSS

From there, we’d like to include the Pico package via SCSS.

We’ll need to add the Sass preprocessor to the project:

npm install sass

Astro will pick this up automatically!

Add in the Pico sytlesheet

First, create an SCSS file to import the Pico sytlesheet package. I put this at src/styles/pico.scss:

@use '@picocss/pico'

In the script section of your Layout, import the new pico.scss stylesheet:

---
+ import '../styles/pico.scss'
---

Lastly, add a style tag to the head in your main layout:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+   <style lang="scss" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro Basics</title>
  </head>

This will include the processed SCSS output stylesheet as a style tag on your pages.

Now you’re off to the races!

Takeaway

Adding this framework to your Astro projects can be a fast and easy way to level up the visual style, with practically zero effort.

Some of the most interesting parts of Pico that i love are:

Check Pico CSS out at:

Share: