Why Pico CSS is a Great Fit for Svelte
Hey friends, in the last video we talked about Svelte UI component libraries. And unfortunately, where there are many great choices for Svelte component libraries using Tailwind CSS, there isn't any framework I'm pleased with as just regular CSS.
Basically, the problem with most of those CSS Frameworks for Svelte, they really don't mesh, in my opinion, with the mental model of how simple Svelte is. But fortunately, that's not the case thanks to Pico CSS. That's framework-agnostic, but it works so well with Svelte because their mental model is basically the same. Thanks to this lovely person for pointing it out to me, and I absolutely love it. So let's get into it.
Exploring Pico's Core Philosophy & Features
So what is Pico CSS? It's a minimal CSS framework for semantic HTML. As you can see here in this example, you can just say aria-busy="true" to get the spinner, and then you get all these beautiful styles by minimal markup. So you don't get HTML littered with classes and etc. So this is it, what I'm talking about. Let's keep the web design graceful. It's simple.
So, class-light and semantic. It's really light, it's 10 kilobytes gzipped. Great style to just CSS, so you don't have to write a lot of styles even, because most of things are already styled for you. It has built-in light or dark mode, and we're going to look at later how it's easily customizable. And it uses CSS variables, praise be.
Here are some examples. I'm going to show you one that I took from these examples. So it says, "More code, more problems. A great design should be minimal, fast and retainable." I agree. Most popular CSS Frameworks are bulky, overkill, and hard to customize without hyper-overriding styles and etc. This makes all these great points. This might be familiar to you, right? But this is how Pico CSS thinks it should be, and honestly this is how I think this should be, especially when you're using something like Svelte.
And this is the beauty of Pico CSS: if you want a switch from an input, there's a checkbox, you just say role="switch" and it styles it as a switch. It's absolutely beautiful in my opinion. It is because CSS also reminds me, if you ever used Skeleton—and not Skeleton UI, but there was this library Skeleton—this was just a similar thing that will give you some basic default styles. But yeah, that's really an older project. So yeah, let's just look at their documentation.
Getting Started & Documentation Overview
So, let's get started.You can install it by npm. So I just did install pico-css. And then in SvelteKit here, I'm just importing Pico CSS. And here we're going to import some other styles. And let me just go here, and we're going to look into this in a second. But basically this is it, and you don't have to do anything else. Let's see, table of contents. So it has themes. Its light theme is used by default, but it's going to detect your preference because it just uses media queries.
And let's just go here. We're going to look at customization later. So you have things like containers. This is going to center your content. You can also make a utility class yourself. The breakpoint it uses is one from Bootstrap. And then it does some default stylings like header, main, footer. Their direct children is going to give them a padding or etc. And if you don't like this, I'm going to show you later how you can customize this. Of course you can override it, but you're going to see later how you can create your own custom Pico CSS config. But yeah, let's look at some components, right?
A Tour of Pico's Elements and Components
So here is a grid one. I don't really see myself using this, but you can if you want. So here is a grid, and you can use this, but I just prefer to write CSS. You have a horizontal scroller, so you get this for responsive tables, and that's basically it. So let's go to elements. We have typography here, a ratio of 16 pixels to etc., to all the headings: heading one, heading two, etc. You can see it here.
Uh, let me just see here. If I scroll down here, we're going to look at that in the preview. And then you also have buttons. You have buttons like this: primary, secondary, contrast. Forms are beautifully styled out of the box, which is awesome. And then you have easy validation like this just using Aria labels. And this is really awesome. So this select looks beautiful. You can have checkboxes, radios, and etc. This is the switch I was talking about, really simple. So for example, a publish from my profile, let's see where it is. Look how clean this markup looks, and you didn't write any styles yet. It's just a really a great base for your project.
So if you go here, see, it's like this. You just say role="switch", boom, done. How awesome is this? And you can also make it indeterminate. Here is a search, slider, date time, color picker.
And let me just scroll up so we can see what else. Tables, I think we already looked at it, but yeah, really enough, especially styled for you to the box. So here are the components. You have—there's not a lot, but you don't need a lot, right? So you have accordions, and let's actually look at their preview. So here also cards, drop down, you have a modal, which is nice. And then you have utilities, loading... and here it says you can use classes. And this is a good reminder. So you can use Pico... if I go here, you can use the base version, which you have to use classes to style everything. But there's also a classless version where basically more things are styled for you out of the box. But I'm going to use the classes version myself. But yeah, just so you know that there's an option. Let me just see, where is that mentioned even? Classless... ugh, I'm not really sure. Let me just see. Table of contents, usage, teams... maybe it's here, classless. But yeah, basically there's a classless version.
Live Demo Showcase
Uh, let's look at the example. So here I just imported Pico. Here is the theme. So basically I don't have a switcher working, but basically it works for media queries. And if you have data-theme="dark" or light, it also is going to work with your local storage or whatever else you use. So for example, if I say here light instead of dark, you get a gorgeous light theme also, and that's how that works. But let me just reset because it also detects that I prefer dark mode. So let me just close that and then let's look again at those examples.
So here, gorgeous preview, typography. You have this awesome styled forms by default. The button is going to be 100% width, but you can make it inline or whatever. You have a switch here, typography looks great, quote styled out of the box. You have lists, inline text elements, so primary and all of these if you need that sort of thing.
So here are the headings and paragraphs which have their own margin, and you can also change that and remove it and etc., just override it. Here's some images. So you have buttons: primary, secondary, contrast, primary outline, and etc. So form elements: search, text, select, file browser, then you have a range slider. This is really awesome for for validation: valid, invalid, disable, date, time, color picker, checkboxes, radio buttons, switches, reset, submit, tables.
Models look really nice, so we can launch a model, confirm. And it uses the HTML model, which is awesome. So you just need to do a bit of JavaScript in your swell file and that's it. And then you also have accordions, which is really nicely styled for you. Then you have cards like this one, article, you have progress bar, loading spinners as you've seen at the start.
And as you can see, Pico is amazing.
Easy Customization with CSS Variables
Alright, so let's look how we can customize this. And wouldn't you believe it, you just use CSS variables. Let's go. So you can go to customization, and here they show you an example, and they generate some of them for you, which is a really nice touch. I really like how this site is designed. So for example, if you like this color, you can go here and you can just override this primary color in the root. But since we're using light and dark mode, you're going to need to do a bit more.
So he regenerates this code based on the color you picked, and you can also look at those values. Let me just first copy this over. So this is based on the color you picked. And if I go here, I'm going to scroll to the top, and in our file here, app.css, this is how simple it is and it should be to override values when you're using a CSS framework. So this is just saying data-theme=light is going to match the primary color to this color and all the other values you have. So this is for dark, if you force it, and this changes the root for other CSS variables. Alright, so now if I'm here, I just need to press save and boom, everything is updated to match that color. How awesome is that? Look at that. How simple and elegant is that, and you barely did any work.
Finding and Overriding Default Variables
So you can find all the default values here under GitHub. This is their basic theme out of the box. You can see the default font family. So for example if you want to change the font family, you can go to your root and then you can say font-family and you can set it to Poppins, sans-serif or whatever you want. Anyways, click here, you can do it. And we're going to look how you can override this theme so you don't even have to do this.
But yeah, basically, that's how simple this is. So for example, maybe you don't agree that the default font size should be 16 pixels. You can say this should be 18 pixels instead. So if you go here and you say 18 pixels, go here, and see how it's bumped up. So for example if we inspect the element, it's going to be a paragraph or it's not a paragraph. Let me just see what is going on here. Oh, that's a subheading, absolutely. So let's go here and let me just write this up so I can see the variables, and here you can see these variables. And we can even search font size. You can see for the p-tag it's set to this font size which is now 18 pixels. If you scroll even down further, you can see all of these values, so you don't even have to look at their GitHub or the default theme if you don't want to. So these are all the same values here that we've seen so far. And that's really... if you're afraid of CSS variables and never used them before, trust me, they're really awesome. Invest into learning them because yeah, they're so incredible and why I love CSS the most, to be honest.
Understanding the Default Theme Structure
So let me just close this since we're not needing it. And as we can look here, here is just the theme. So these are the CSS variables, and then it does some responsive things, so the font size changes based on their media queries that they use based on Bootstrap media queries. Here are some opinionated things that you might not like. So if a header is a descendent of body, and etc., main, footer, then it's going to give it a spacing just so you don't have to style. This is really great if you're working on demos where you just want some nice default styles. But maybe if you're working on a more serious project, you really want to control those values yourself, and you can override them in that case. So we have dialog, article, and then you have font weight for the default headings and the typography spacing for the H1, as we've seen, each of them has a margin, right? And then you have a font family for your monospaced font.
Advanced Customization via Sass Compilation
And here are the values if the data theme is light. And basically, it looks like a lot, but it's really not, and it's really easy to understand. And here are the dark values, and that's basically it. So let me just close this.
And talking about customization, we can use Sass the best way it's intended to generate our own Pico CSS theme. So as they say in the documentation, "We recommend customizing Pico by importing Sass files into your project." They say you can keep Pico up to date, and then it goes on and it says at the end, "Compile the Sass file to CSS to get a custom version of Pico." And I'm going to show you how you can do that in a second.
And it says compiling a custom Sass version allows you to create a lighter version with only the components that are useful to you. So here it shows you an example of pico-slim. So this is the file that it generates the Pico CSS styles from. So as you can see here some options, and then here the variables, themes, default... So here they're not using everything. You have the layout, document, and etc. Instead of talking about it, let me just show you.
Building a Custom Pico Theme from Source
Alright, so here is how we customize Pico. First, we're going to go to their GitHub, and then you're going to clone the project. So you can just go to the code here, you can git clone it or use the GitHub CLI if you want because you're going to build a CSS file from the Sass files as you can see here.
And also, since we're here, we can be assured that this project is actively being developed, since we can see the last update was two months ago, etc., and the issues are in sky high, and there seems to be a lot of buzz and activity here, so that's really good to know. And then basically I just cloned the project here. And on the left side in the sidebar, this is all of the files for the site, for their docs, and etc. And here is the output in the CSS folder. So you can even delete this because this is going to get generated. And here is the only place you're interested in. So you have scss. You have components here, content, and etc.
So you can change this Pico CSS, or you can change their pico-slim example. Let me just collapse this. And if you're curious what any of this does, in my case I can just press Alt and I can click on variables, but it might be Control for you in your editor or whatever operating system you're using. And it's just going to lead you to the file where this is located.
So here is a great way where you can turn on and off features you like. So you can disable the spacing for header, main, footer. So you can just say false if you want. And then you can also do that for these other elements. Disable or enable responsive typography, the classes. If you don't want to use grid, just disable it. Transitions, being able to use !important. You can even change the breakpoints here, so you can input whatever you want and it's going to generate the styles based on that. So yeah, keep variables.
And these at the top are just the same variables from this file that are just here as an example. So let's say for example, teaming, default... and you can go here. And remember this is what we looked at. So here are the variables, default colors, and now you have in the team default styles, and now you can change the font family. So for example if you really don't want this or want something else, you can say, "Hey, default should be Poppins with a fallback sans-serif." Maybe you don't agree with the font size, I want to say 18 pixels, and then you can also change these other things if you want. And now we create a custom style for your site or whatever, which is really awesome. So you have the default here.
And in my case, let's look at the document. So this is just some reset based on Normalize. I would love to keep that. But for my example, I might not care about sectioning. I don't want any spacing for the container, I want to create my own utility class. Same for section. I don't really want their grid, I don't want their scroller. I want their typography because it looks gorgeous and I can change it. So here's some styles for audio, canvas, iframe, which is really useful because there's a lot of discrepancies between browsers and how these elements behave, so this just does everything for you. And here are the styles for the buttons, which I want. Forms, yes please. Table, I rarely use tables to be honest, but yeah let's just keep it, who knows maybe if you need it. Accessibility, of course. And then it also has this useful for reducing motion, so if the user has motion sickness or whatever, they can just reduce it. And yeah, basically that's how you do it. You can use these variables at the top and you can also disable these sections if you want.
Compiling and Using Your Custom Build
Okay, so the big important question: how do you output the CSS? So if you go to package.json, we can look at the commands they expose. It looks like a lot, but a lot of it is not relevant to us. So there's watch. You can run build. This is going to build everything from the docs, etc., you don't really want that. Here is build:docs. You can also just search for Pico. So you can just say build:pico and this is going to run the compile step for Pico. It's going to prefix everything, it is going to minify Pico. So that's probably what you want. But you can also do css-compile:pico and it's just also going to just compile Pico.
So if we go to the terminal, let me just open it here. And let me just see, I'm just going to move panel to bottom so you can see what's going on. And then I can say pnpm run and I'm going to say build:pico. And give it a second... it should be done. Sweet, so that's it. Okay, let me close the terminal. We can close package.json. Remember we're outputting pico-slim. So let me close this, I'm going to open the sidebar, and now the output in your CSS folder should be here. Here is the theme, and now you want to open pico-slim, remember, because that's the one we changed. And now you can see here your modified, own customized Pico CSS file. You can see the font family is Poppins, the font size is 18 pixels. And if I scroll here... let me just see... now you don't have some other things like those spacing for elements and etc. And this is how simple it is to customize Pico, and I absolutely love it, and I think it's one of my favorite CSS Frameworks for Svelte.
Final Thoughts and Conclusion
Alright, so I hope you love Pico just as me. And if you like what you've seen, you can like and subscribe. You can also consider becoming a YouTube channel member or find my Patreon in the description. Thank you for watching and catch you in the next one. Peace.
