panda
open-props
panda | open-props | |
---|---|---|
12 | 49 | |
4,726 | 4,417 | |
2.6% | - | |
9.9 | 8.4 | |
about 18 hours ago | 5 days ago | |
TypeScript | 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.
panda
- Show HN: Tailwind Nested VSCode Extension
- Panda CSS: build time and type-safe CSS-in-JS
-
Which is best for DX and efficiency, TailwindCSS, UnoCSS, PandaCSS, or the new MasterCSS
- PandaCSS: https://panda-css.com/
-
An Overview of 25+ UI Component Libraries in 2023
KumaUI : Another relatively new contender, Kuma uses zero runtime CSS-in-JS to create headless UI components which allows a lot of flexibility. It was heavily inspired by other zero runtime CSS-in-JS solutions such as PandaCSS, Vanilla Extract, and Linaria, as well as by Styled System, ChakraUI, and Native Base. ### Vue
-
Things I wish I knew before moving 50K lines of code to React Server Components
> CSS-in-JS is a non-starter
This used to be true, but there are new libraries like PandaCSS that bring CSS-in-build-time-JS, thus bringing Tailwind-like performance and React Server Components compatibility. https://panda-css.com/
- Tailwind CSS and the death of web craftsmanship
-
Trying to find some more UI component libraries. I am big fan of Chakra UI but want to try something new. Any suggestions?
Use https://panda-css.com/. It’s like ChakraUI but better and pretty similar so you don’t have to re-learn much. Definitely worth a try.
-
I've decided to go back to using the Pages Router for now (long post)
Check out Panda CSS. Created specifically to help style components without a css-in-js runtime. It was made by the creator of charka-ui. Been using it in one of my personal projects and I've really come to like it
-
Styled Components vs Tailwind vs Plain Ol' CSS
from the creators of chakra ui, https://panda-css.com joins both great DX and great performance. I’m loving it
- What's the best option these days for CSS in JS?
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?
vanilla-extract - Zero-runtime Stylesheets-in-TypeScript
carbon-components-svelte - Svelte implementation of the Carbon Design System
shadcn/ui - Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
svelte-headlessui - Unofficial Svelte port of the Headless UI component library
qiling - A True Instrumentable Binary Emulation Framework
pollen - The CSS variables build system
linaria - Zero-runtime CSS in JS library
Tailwind CSS - A utility-first CSS framework for rapid UI development.
antd - An enterprise-class UI design language and React UI library
modern-normalize - 🐒 Normalize browsers' default style
react-spectrum - A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.