Install PicoCSS with Svelte

Pico CSS is a classless CSS framework that auto add styles to default HTML elements allowing you to effortlessly build beautiful websites. Here's how to install and use it in Svelte or SvelteKit.

Install Pico

Pico CSS can be installed with NPM using the command below:

npm i @picocss/pico

Import to Layout

To import Pico CSS into your Svelte application, add an import statement in your +layout.svelte file. The +layout.svelte should be located at the top of the routes folder in the source of the application.

// +layout.svelte
  import '@picocss/pico'

<slot />


Pico CSS provides built-in customization using CSS variables, for a full guide check out the docs here. All the variables should be contained inside of a :root selector and be put into the app.css file.

To dynamically change the variables with JavaScript you can use the setProperty method like here

/* app.css */
:root {
    /* Get a list of themes from the PicoCSS website
  --primary: aqua;


<!-- +page.svelte -->

<!-- Dropdown -->
<details role="list">
  <summary aria-haspopup="listbox">Dropdown</summary>
  <ul role="listbox">
    <li><a>Another action</a></li>
    <li><a>Something else here</a></li>


Be the first to comment!

Read More

Node JS HTTP Webserver

Node JS comes out of the box with a built in HTTP module that can handle Hypertext Transfer Protocol requests. You can use this to build a web server without installing anything.

CSS Pseudo Elements

CSS pseudo elements allow web developers to add specific elements to their webpages without having to write additional HTML or JavaScript. These elements are created by adding a colon and a keyword to the end of a CSS selector. Some of the most commonly used pseudo elements are :before and :after which can be used to add content before or after an element, :first-letter which can be used to style the first letter of a paragraph, and...


Generating Images Based on a URL Slug

Welcome to our tutorial on dynamically generating images using Node.js! In this post, we'll be exploring a technique for creating images on the fly based on the URL slug of a webpage. This can be a powerful tool for creating personalized, dynamic content for your website or application. Whether you're looking to create unique product images, customized social media graphics, or any other t...

Javascript Loops

Loops are one of the most valuable tools in any programmer's arsenal, and Javascript is no exception. Loops allow you to execute the same code multiple times with different values, making them a great way to deal with repetitive tasks. There are three main types of ...