Hello,
If you are reading this mail, it is most likely because you signed up for a Svelte Component library on Svelteui.com - if you are not sure what a component library is compared to what a design system is you can use this simple explainer to get a good idea.
On the other hand, if you are not too sure why you are on the newsletter you can respond to this me via this email [hi@Krakenedu.com] let’s talk. I might be able to direct you to better resources that fit your work needs 😀
We are really excited about the velocity at which we are building, our team is working on custom designs that cut across e-commerce, typical application UI and marketing pages. And we can’t wait to unveil the work we are doing in the coming weeks.
To give you an idea of things we are working on; Whilst working on our headless components. We are avoiding a lot of CSS and focusing on the functionality and accessibility of the components. For example for our checkbox component, we follow this w3c standard for accessibility
https://www.w3.org/TR/wai-aria-practices/examples/checkbox/checkbox-1/checkbox-1.html
After working hard to get those two requirements right we then write minimum styling for them which is written in scss, finally we export classes that we believe you should have access to, for building custom components.
We are doing this for primitive buttons to larger "organisms" like navigation bars and even e-commerce filtering components. Why is this useful now?
- Shopify will be releasing a quick-start toolkit and set of components written in React and Javascript before this year runs out https://shopify.dev/hydrogen and we want to build something Svelte developers
- Headless UI has React and Vue.js support but none for Svelte
- We want to release 500+ components and design system tokens before the year ends [ we are at 75 components and pages]
- Our component library comes with a design system on Figma [ Watch out for the link in the coming weeks 🥲 ]
Question of The Week
Svelte doesn't have an easy way to apply CSS to a child component from the parent components. We need a way to do it without having to use the verbose global selector, but rather just Elements [Issue is being talked about here https://github.com/sveltejs/svelte/issues/4843]. We have a nice solution but we think we can still find something in the Wild Wild West [WWW] pun not intended
Talk to ya soon!
Built With ❤️
SvelteUI