Pico with svelte is it possible?

[skaaiya]

This is no issue I know, I just wanted to know if it is possible to use pico with svelte, if yes please tell me as of now I'm really liking pico.

[caesar-exploit]

yes

[askrid]

Pico css is just a stylesheet, so yeah it is framework agnostic.

[kvetoslavnovak]

One of possible ways to use Pico in Svelte is like adding this:

<svelte:head>
	<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
</svelte:head>

[dstotijn]

Alternatively, if you want to use a versioned Pico locally, you can add Pico as a dev dependency to your Svelte project:

npm install -D @picocss/pico

...And import it, e.g. from a top level Svelte component:

<script>
  import "@picocss/pico";
</script>

[kvetoslavnovak]

I believe this issue may be closed already.

[brendanmatkin]

Note for future searchers if you are using sveltekit. Pico depends on main, footer, header being direct children of body for certain layouts, but that's not possible with sveltekit if you are doing it right.

However, pico has a $semantic-root-element variable that you can set as this element: <div style="display: contents">%sveltekit.body%</div>. So far this has fixed that for me but I haven't tried everything.

I did it like this.

<!-- app.html -->
<div id="pico-root" style="display: contents">%sveltekit.body%</div>

// variables.scss
$semantic-root-element: "div#pico-root"

// OR whever you import pico
$semantic-root-element: "div#pico-root"
@import '@picocss/pico/scss/pico';

Edit: index.html -> app.html

[giltig]

@brendanmatkin How do I do this with regular css (not sass)?

[brendanmatkin]

@giltig

I don't have the project set up anymore (I ended up switching back to DaisyUI) so I can't verify this - BUT one way is to edit the css files that apply to your project directly (I'm pretty sure css variables can only be properties, not selectors). I think if you find all the instances of body > header, body > main, body > footer and any other body > ... in the *.css files and change them to body > div#pico-root > header etc. Where div#pico-root has whatever id you give you app div.

Alternatively - there are only a few styles that this actually applies too (just search body > in the css files to find them all). You can create your own styles to duplicate the behaviours. e.g. whatever is generated from this, where --spacing changes at different @media widths:

  /* in /default/_styles.scss */
  // Spacings for body > header, body > main, body > footer, section, article
  --block-spacing-vertical: calc(var(--spacing) * 2);
  --block-spacing-horizontal: var(--spacing);

There might also a way to do it with like pseudo elements or something but I'm not very good at those.

If you can't edit the css files for some reason, but you still really need those particular spacings and you can't replicate those behaviours in your own style sheet, you might just need to setup sass. If you are using Vite (which I also recommend) I think it's built in, or you might just need svelte's vitePreprocess() plugin.

[Leftium]

@brendanmatkin

I think this selector could remove the need to add an id to app.html:

$semantic-root-element: "body div:first-child"

~~However, do you know if +layout.svelte files add extra layers of <div> containers that would cause these methods to break?~~

Edit: Inspecting https://learn.svelte.dev/tutorial/layouts seems to confirm layouts don't add additional layers of <div> containers. (Although more complex custom layouts with CSS grid, flex, etc may result in breaking Pico's semantic root.)

[justEstif]

1. install sass and picocss in sveltekit project

npm install @picocss/pico
npm i -D sass

2. create app.scss file and add the following

@use "@picocss/pico/scss/pico" with ($semantic-root-element: "div#pico-root"
);

3. update the div in app.html to the following

<div id="pico-root" style="display: contents">%sveltekit.body%</div>

4. add the following to +layout.svelte

<script lang="ts">
  import '../app.scss';
</script>;