pico
pico copied to clipboard
picocss
feat: add $semantic-root-element variable
This PR adds a variable for setting the semantic root element, which should allow for easy integration with frameworks that do not place content directly inside <body> (such as React, Next.js, and Nuxt).
For example, to integrate with Next.js, you'd set $semantic-root-element to #__next.
If you don't change $semantic-root-element, it will default to body, meaning everything will be the same as normal.
This PR will resolve #13 and possibly #222.
Hi @ja1den, Thank you for this great addition, and sorry for the delay. I'm going to merge into dev, then I'll merge into master quickly.
this is great - just what i needed for SvelteKit - how do I set this ?
Using this in SvelteKit happily.
Import SASS like it says in the documentation: https://picocss.com/docs/customization.html
In app.html there is a bounding box that looks something like:
<div>%sveltekit.body%</div>
Give it an ID. I chose 'root' for mine. So it looks like
<div id="root">%sveltekit.body%</div>
Then in your SCSS file should look something like this:
$semantic-root-element: '#root';
@import "@picocss/pico/scss/pico";
And bingo! It works beautifully.
