The Best CSS Framework For Svelte
Table of Contents
Setup
Pico.css is one of my favorite CSS frameworks to use with Svelte and hereโs how to set it up and customize it.
Install Pico.css.
npm i @picocss/pico
Import it inside your layout.
<script lang="ts">
import '@picocss/pico'
import '../app.css'
</script>
<slot />
This is how simple it to turn a checkbox into a switch.
<input type="checkbox" role="switch" />
Customization
You can use CSS variables to customize Pico.
:root {
--primary: aqua;
}
Here are the values you can customize and you can learn more from the Pico docs.
If youโre using Sass you can import the components you need from Pico including a custom theme and keep it up to date.
/* custom version */
// theme
@import "@picocss/pico/scss/themes/default";
// import components you need
@import "@picocss/pico/scss/content/button";
@import "@picocss/pico/scss/content/form";
You can look at the pico.scss
example to see every component.
If you want to support the content you're reading or watching on YouTube consider becoming a patreon starting low as 1$ per month.
Become a patreonEvery post is a Markdown file so contributing is simple as following the link below and pressing the pencil icon inside GitHub to edit it.
Edit on GitHub