svelte-adders
open-props
svelte-adders | open-props | |
---|---|---|
19 | 49 | |
1,400 | 4,402 | |
0.9% | - | |
8.0 | 8.4 | |
25 days ago | 9 days ago | |
JavaScript | HTML | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
svelte-adders
-
I made a set of devtools for small projects
Perhaps your tool can steal some inspiration from the following:
- svelte-add is a similar tool for Svelte(Kit) projects: https://github.com/svelte-add/svelte-add
- svelte-add was originally based on a more generic tool: https://preset.dev
- I actually find `npm create svelte@latest` sufficient most of the time. It's like a starter project with presets for most best practices.
- Show HN: I made a nextjs boilerplate to automate boring stuff
-
What should I learn about using npm libs with Sveltekit as I am getting frustrated
Oof... Not gonna lie, that one looks rough. I would start with something simpler to get started with. Maybe pick one from here https://github.com/svelte-add/svelte-add
- SvelteKit + Tailwind CSS - I made a script to automate the setup!
-
How to integrate TailwindCSS with SvelteKit
For this tutorial, I’ll show you how to use a utility package named svelte-add to handle the integrations.
-
SvelteKit 1.0
If you're just learning SvelteKit, check this tool out: https://github.com/svelte-add/svelte-add
It will save you a ton of time by making it really easy to add integrations to your projects (like Tailwind, Bootstrap, Supabase, Jest, etc)
-
Can Svelte absorbs TailWind?
By the way svelte-add is a great tool to quickly add Tailwind and a bunch of useful tools to a project. Highly recommended! I'm always starting new projects to experiment and this thing saves me a lot of time.
-
Houdini and KitQL Join Forces [self-promotion]
Somewhat the documentation is confusing, IMHO. Maybe it is just me, however there is just too much configuration to be done. I've never figured out how to actually make it work after the latest release 0.7. Would love to have Houdini+KitQL in https://github.com/svelte-add/svelte-add . Just run a simple command like npx svelte-add@latest houdini-kitql with a prompt for graphql URL and done. All the configs added automagically
-
How to Create a Blog with SvelteKit and Strapi
We'll use SvelteAdd to add TailwindCSS to our application quickly. Run the below command to add TailwindCSS to our project.
-
How to Set Up Svelte with Tailwind CSS
I've created a couple of example projects using the npm init command for both Vite and Svelte. Added in Tailwind support using Svelte Add and replaced the index page styles on each with Tailwind styles.
open-props
-
Learn CSS Layout the Pedantic Way
There's still some boilerplate, but I'm a big fan of Open Props[0] because it takes a hybrid approach. CSS isn't necessarily reinventing the wheel, but allowing for easier / more powerful approaches to difficult layouts or things that would otherwise require JS. Bootstrap is fine but troubleshooting advanced layout issues involves a lot of inspecting elements to see what styles are actually being applied (at least in my experience, YMMV) so I'd personally always bet on CSS.
[0] https://open-props.style/
-
Why Tailwind Isn't for Me
I don't quite get the hate for having CSS in another file. Do you also put all your react stuff in one single file ? That same logic and argument can be applied against all modularization.
And really 20-50 tailwind classes in a single element is VERY hard to read and keep in mind. No - it does not make things clear or understandable. One tends to need to re-read and scan over from the beginning and eyes glaze over. Esp if some elements only vary with a few classes missing. I guess it works for people with very high attention to detail and high amount of working memory. I only find it personally frustrating.
Maybe tailwind css works for some bright people. I did try it for a couple of projects and only felt pain.
However, the "atomic css" philosophy behind tailwind is great. I find framewroks like https://open-props.style/ far better to use.
- Htmx and Web Components: A Perfect Match
-
Styling React 2023 edition
Open Props adds to the set by providing extra custom properties for things like easing functions or animations.
-
The Future of CSS: Easy Light-Dark Mode Color Switching with Light-Dark()
> If you wanted to actually solve theming, what you should work for is not a constrained helper function like light-dark(), but instead a shared token schema. Today nearly every company has their own token schema and different ways of naming things in the semantic token layer. If we had a shard language here, not only would it be trivial to add light/dark theming (just redefine a few variables that are already provided for you), code could be shared between sites and inherit the theming/branding.
Isn't that the idea behind https://open-props.style/ (and https://theme-ui.com/ in JS land)?
I think it's a great idea, but hampered by the lack of adoption incentives for the very people that need to adopt it for it to become successful (design system/component library authors). It introduces constraints, but the promised interoperability is not really beneficial to the people who need to work within those constraints.
-
Tailwind CSS and the death of web craftsmanship
I do think that the real value of Tailwind comes from the utility classes, rather than css-in-html paradigm. You could achieve the same, for example, with Pollen.css [0] or Open Props [1].
[0] https://github.com/heybokeh/pollen
[1] https://github.com/argyleink/open-props
-
What is the best styling strategy for a Svelte project?
If you choose to style with plain CSS you can add design tokens as CSS variables with Open Props: https://open-props.style.
-
Released tw-variables: 400 useful Tailwind utilities as ready-to-import CSS variables
Some time ago I discovered Open Props which provides a lot of design tokens as CSS variables and started using it in some of my projects.
-
[Showcase] Searching for Friendly-User for Scrum-Tool Miyagi
CSS: Open Props (https://open-props.style/)
-
What UI framework would you recommend?
https://open-props.style/ gives you design tokens as CSS variables. It’s CSS only and not Svelte specific.
What are some alternatives?
svelte-adapter-firebase - SvelteKit adapter for Firebase Hosting rewrites to Cloud Functions for a Svelte SSR experience
carbon-components-svelte - Svelte implementation of the Carbon Design System
eslint-plugin-svelte3 - An ESLint plugin for Svelte v3 components.
svelte-headlessui - Unofficial Svelte port of the Headless UI component library
sveltegram-sveltekit-web - This is a simple instagram like image and post sharing web app where user can follow another user view their profile like post and create post
pollen - The CSS variables build system
sveltekit-shiki-code-highlighting - SvelteKit Shiki syntax highlighting: use any VSCode colour theme to accessibly syntax highlight code on your SvelteKit app with line numbers.
Tailwind CSS - A utility-first CSS framework for rapid UI development.
tailwindcss - Add Tailwind CSS to your Svelte project
modern-normalize - 🐒 Normalize browsers' default style
SvelteKit - web development, streamlined
vanilla-extract - Zero-runtime Stylesheets-in-TypeScript