Why Pico Is My Favorite CSS Framework For Svelte

[@JoyofCodeDev]

I want to note the way I customize Pico is because I don't use Sass but if you are import the Sass files in your project to customize it as mentioned in the docs picocss.com/docs/customization.html.

[@RavenRebels]

Wonderful that you can customize using CSS variables

[@giltig2]

After you compiled the pico.slim.sass into css - how do you import the new css file into your actual project? (because in the project you are on npm install and not your css version)

[@JoyofCodeDev]

@@giltig2 You have to do it yourself in that case which is why they recommend you don't.

[@OldKing11100]

8 months later do you still prefer using PicoCSS and have you tried their Alpha V2?

[@JoyofCodeDev]

@@OldKing11100 I love Pico, but I mostly use something custom.

[@marcusrehn6915]

I really want to try this out, it feels like the polar opposite to tailwind at first glance. And I am all for it!

[@local9]

I'm glad I haven't added one yet given I've just seen this, time to play. Class-Less is an option in the menu, yes I was shouting at my monitor.

[@a0um]

I’ma backend developer, not much experience with CSS, and I love this approach.

[@axelb423]

More I use css frameworks over years, more I want stay with scoped native CSS.

[@GeneraluStelaru]

Svelte has scoped CSS out of the box.

[@WyzrdCat]

Never met a css framework I liked, been an SCSS guy, but this actually looks decent.

[@kensleylewis]

my new favorite CSS framework

[@dc22199x]

Css flexibility is a must, you can override the entire input and button by using @apply by which it is same thing when using tw

[@JoyofCodeDev]

What is this in response to? 😄

[@jugibur2117]

Didn't know that, looks great for a start, thanks for the introduction! EDIT: I just think a fluid based approach for all spaces and font sizes will be even more helpful in the future. So that you no longer have to make adjustments for any breakpoint.

[@JoyofCodeDev]

I would prefer using clamp instead: developer.mozilla.org/en-US/docs/Web/CSS/clamp.

[@jugibur2117]

@@JoyofCodeDev Yes, actually I meant a conversion with clamp()

[@uopb]

🎉 excited to try this out! Thanks 🙏

[@brqnet]

You are a hidden diamond.

[@thekinoreview1515]

This looks awesome. Gonna try it out in a project now!

[@JoyofCodeDev]

Hope you like it! 😄

[@zachzeurcher6450]

You really should have showed how you set up your folders in svelte kit.

[@JayXTQ]

This looks really nice, but I can't think of a way to do theme switching (light and dark mode) because limitations with svelte seem like you can't edit the HTML attribute to have data-theme in it. Unless I am missing something

[@JoyofCodeDev]

You can do whatever you want using JavaScript! If you need an example have a look at github.com/mattcroat/joy-of-code.

[@JayXTQ]

@@JoyofCodeDev Found out how to do it by going to their Discord to ask the question and got a rapid and simple response. But maybe you should make a video explaining light/dark mode switching with pico or another css library like tailwind css

[@kensleylewis]

Has anyone found any scss variables that would control the sizing of pico css buttons (i.e. their padding, margin, spacing)?

[@BeautifulTurkish]

Can you do an update on UI libs for Svelte?

[@JoyofCodeDev]

I might.

[@st3ddyman]

Is there a way to use a framework like this, and override specific components actually within your svelte component and the CSS section within the component? Let's say you add an additional class to your component, then CSS values for that class in your svelte, would that work?

[@JoyofCodeDev]

You can customize it however you want! 😄

[@dvkerns]

"praise be" 🤣

[@AndreasWalter1984]

Can you make an update for pico css v2. It works kinda different after walking from imports to use within sass?

[@JoyofCodeDev]

I mostly use Open Props these days

[@JVSd-SG]

how to switch "open" in accordion tag ? {open?: 'open', ''} not work

[@jonahfoxy]

in SvelteKit you probably want to change the "$semantic-root-element" to be "body div" because SK recommends this.

[@AlexanderSuraphel]

Why is that recommended?

[@JoyofCodeDev]

You can learn why here kit.svelte.dev/docs/project-structure#project-files-src but tl;dr is to prevent bugs caused by browser extensions injecting elements.

[@AlexanderSuraphel]

@@JoyofCodeDev Thanks a lot man. Your videos are a joy to watch!

[@samueloluwafemi4462]

How did you customize your terminal? I love it.

[@JoyofCodeDev]

You can find the link to what I use in the description! 😄

[@neveryoumind6913]

Whats your opinion of combining Skeleton with Pico , or in the Skeleton mindset its tailwind all the way ?

[@JoyofCodeDev]

I would not do that but that's up to you.

[@yulose9]

what font are you using? I mean in vscode?

[@JoyofCodeDev]

You can find what I use in the description.

[@yulose9]

@@JoyofCodeDev thanks!!

[@Ricardoromero4444]

Water css is very similar, a bit more lighweight maybe.

[@kupyn]

is it weird to use pico + tw? also will there be a tutorial for darkmode showcasing best solutions like you did with auth?

[@JoyofCodeDev]

I would not use them together - If you're using Tailwind I would use daisyUI, Flowbite or Skeleton. I have plans on making a video on dark mode in SvelteKit! 😄

[@heroe1486]

​@@JoyofCodeDevI mean it's not crazy either, at the end tailwind just puts classes you use in a .css file and nothing else is shipped, so using tailwind for directives like margins paddings flex grid etc and pico for the base style may be a nice idea, I guess one should just disable tailwind preflight which overrides some styles by default (not sure if it'd override pico's tho)

[@4sARy]

What theme do you use in the editor?

[@JoyofCodeDev]

You can find what I use in the description.

[@IdeationGeek]

You didn't even try to show how to use it :) (compose something from these lego bricks, instead of customizing the bricks) Pico is unique that it doesn't introduce new tags! (so, instead of learning new bricks, we can demo building with them)

[@naeemrind1776]

Plz make a video about CRUD Todo or Notes app with svelte using local storage.

[@JoyofCodeDev]

I already have! 😄 You can watch it here kzbin.info/aero/PLA9WiRZ-IS_xz1M4H0fjZAii4vzRffTno.

[@soumitripattnaik]

Are there other css frameworks like this?

[@JoyofCodeDev]

There's a lot of minimal CSS frameworks.

[@soumitripattnaik]

@@JoyofCodeDev can you please suggest a couple. So far I have used bootstrap, bulma and picocss.

[@heroe1486]

​@@soumitripattnaikif you just want random names : unocss tailwind tachyon basscss

[@soumitripattnaik]

@@heroe1486 I am not asking for random names. I am just asking for simple css libraries like PicoCss, for example Bulma and Bootstrap are somewhat similar to PicoCss if not the same. I am looking to explore 0 config, non toolkit based libraries where I won't have to worry about styling each component, for small to very small projects and prototypes. The names you have suggested are all toolkit based libraries which are the opposite of pico and have similarities with Tailwind.

[@PruthiviTheDev]

How can I customize it if I import it using CDN ?

[@JoyofCodeDev]

You can customize it using CSS variables.

[@PruthiviTheDev]

@@JoyofCodeDev I tried, but didn't worked. By the way I'm using Django.

[@JoyofCodeDev]

@@PruthiviTheDev picocss.com/docs/customization.html

[@tombarfoot9693]

Great video. I really agree with your comment about your last video ... the UI frameworks for svelte are a major disappointment in my opinion. Its to a point where, sadly, I've had to create my own UI component library. I've tried pico css before, and liked it, but I always find myself looking for the convenience of tailwind for my projects. To bad Pico and tailwind don't play well with each other.

[@JoyofCodeDev]

I've been thinking a lot about it and I would love a UI component library that uses regular HTML you can copy and not deal with imports and use Svelte actions for the logic but I would have to try it out.

[@mahmoudaboelfadel48]

you can use tailwind + pico

[@ontheruntonowhere]

You can definitely use both. Just import the final stylesheet build from each, although watch out for TW's Preflight reset, and probably import TW first. Whether using both is solving a problem or adding unnecessary complexity is another story.

[@BosonCollider]

@Tom Barfoot you may be interested in bonsai CSS, which is a classless framework that also comes with a bunch of utilities

[@FredT34]

A real question from a newbie... don't you use bun?

[@fatihtoprakkale4174]

perfect for admin panels ngl

[@JoyofCodeDev]

Yeah, I love it! 😄

[@el.bromas]

A los chilenos les gustará este framework

[@StarlightInsights_com]

Pico looks really nice! But it looks like it isn't being maintained any more 😒

[@ouvreboite87]

As of February 2024, it looks maintained (quite a little of commits over the past weeks/months)

[@LeeZhenYong]

This comment is outdated. They launch v2 about 3 weeks ago. We need a v2 video!!

[@mjerez6029]

New version released few months ago, maintained and healthy ❤

[@manolobustamante2853]

weno pal pico

[@jonahfoxy]

Do you still use pico ? @JoyofCodeDev?

[@JoyofCodeDev]

I use a custom library. 😂

[@jonahfoxy]

ooh secret sauce!@@JoyofCodeDev