learn-svelte-ui_using_pico_css-youtube-ts

Source

Why Pico Is My Favorite CSS Framework For Svelte(Youtube)

Blog

Github

References

• Picocss Documentation
• Picocss Github
• Picocss Theme Default

Timestamps

0:00 Intro 0:37 What is Pico.css? 2:12 Pico Setup 2:37 Looking At The Documentation 5:49 Example Site 7:38 Customizization Using CSS Variables 12:40 Customize Pico 17:51 Outro

References

Picocss > Docs > Customization

Install

# init app
bootapp -l node -u moondevnode -n learn-svelte-ui_using_pico_css-youtube-ts -d "Why Pico Is My Favorite CSS Framework For Svelte(https://www.youtube.com/watch?v=-n84EMKIXQM)" -t svelte-kit-ts

npm i @picocss/pico

# build
yarn dev

Edit

src/routes/+layout.svelte

<script lang="ts">
  import '@picocss/pico'
  import '../app.css'
</script>

<slot />

src/app.css

:root {
  --primary: #d81b60;
}

src/routes/+page.svelte

<button >Button</button>
<input type="submit">
<a href="#" role="button">Link</a>

run

yarn dev --open