open-props
tabler
Our great sponsors
open-props | tabler | |
---|---|---|
49 | 23 | |
4,327 | 36,768 | |
- | 1.0% | |
8.3 | 8.9 | |
6 days ago | 2 days ago | |
HTML | 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.
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.
-
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
Considering that low-level atomic CSS lib like https://open-props.style are now up-ticking in popularity, it is too early to say that Tailwind CSS "won".
-
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].
You might be interested in OpenProps then: https://open-props.style
Basically its tailwind without all the classes, and without apply, in pure CSS variables
-
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/)
tabler
-
Tremor – The React library to build dashboards fast
If you are looking for a dashboard system that is written in vanilla JS, I will be open sourcing my DevBoard in the next month or two. You can see it in action at https://devboard.gitsense.com/microsoft/vscode and learn more about the widget system at https://devboard.gitsense.com/microsoft/vscode?board=gitsens... Note the repo that is mentioned in the intro page hasn't been pushed to GitHub yet, but will be soon.
The server is a very simple node/express app and the front end is written in vanilla javascript. I also use GitHub's primer css (https://github.com/primer/css) and a heavily stripped down version of tabler's css (https://github.com/tabler/tabler)
Note, DevBoard is more geared towards hackers, so Tremor's is probably a much better fit if you are looking for an out of the box solution.
- Show HN: Tremor 3.0 – The open-source library to build dashboards fast
-
Are there any downsides in using svelte or sveltekit?
I'm a big fan of using Tabler for basic UIs. Really well thought out and comprehensive.
- Elastic UI – Component library for data-driven web apps
-
Top 20 Best React Website Templates for React Developers [Free and Premium]
Demo
GitHub
-
Tired of Bootstrap... Where to go?
what about tabler https://github.com/tabler/tabler
- Tabler: Free and open source dashboard HTML/CSS framework
- AWS open sourced the AWS console design system
- Over 1900 pixel-perfect icons for web design
What are some alternatives?
AdminLTE - AdminLTE - Free admin dashboard template based on Bootstrap 5
lucide - Beautiful & consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons.
jinja-material-kit - Jinja Template - Material Kit 2 (Bootstrap 5) | AppSeed
bootstrap-templates - Bootstrap 5 Templates optimized for all devices.
meshery.io - Site for Meshery, the cloud native manager
carbon-components-svelte - Svelte implementation of the Carbon Design System
Tufte CSS - Style your webpage like Edward Tufte’s handouts.
bootstrap.native - Bootstrap components build with Typescript
svelte-headlessui - Unofficial Svelte port of the Headless UI component library
simple-html-invoice-template - A modern, clean, and very simple responsive HTML invoice template
soft-ui-design-system - Soft UI Design System - Open Source Bootstrap 5 design system
shower - Shower HTML presentation engine