open-props
Milligram
Our great sponsors
open-props | Milligram | |
---|---|---|
49 | 23 | |
4,327 | 10,146 | |
- | 0.2% | |
8.3 | 0.0 | |
7 days ago | 5 months 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/)
Milligram
-
Concrete.css
I borrowed this from Milligram[0] because it seemed like a sane thing to do at the time. Would your recommendation be to not anything to the base font-size and adjust the REM sizes accordingly?
[0] https://github.com/milligram/milligram/blob/d895f179623b56f3...
I had been using similar projects such as skeleton[0] and milligram[1] for small experiments such as repfl[2], and wanted to create something similar that I would find aesthetically pleasing and that would fit in as little space as possible. The current version of concrete.css is less than 1kb minzipped!
- The classless and class-light CSS aproaches
-
Super simple alternative to bootstrap for just the grid system?
Try this out. This is great for really simple projects. https://milligram.io
-
Show HN: Neat, the Minimalist CSS Framework
Thanks for sharing, I love minimalist CSS frameworks that are easy to digest. My go-to for the past ~5 years has been https://milligram.io -- mainly for the grid and basic styling -- although, the author hasn't updated it in a few years. I'm going to give yours a shot!
-
Milligram CSS: カスタム・ビルド (Node.js 18 on Alpine Linux 3.17 使用)
CSS F/W: Milligram 1.4.1
-
Milligram CSS: Custom build (with Node.js 18 on Alpine Linux 3.17)
$ git clone https://github.com/milligram/milligram.git
Do you know about Milligram, a "minimalist CSS framework" ? It's, in accordance with the name, lightweight like feather, and, in addition, beautiful. It is developed "to design fast and clean websites".
-
What is the best way to develop a frontend using only HTML, CSS, Bootrap, JS w/o frameworks?
If you do want to use a framework and get up and running quickly, but you still want to know what's going on and have some ability to customize it, maybe you can start with one of the really minimal CSS frameworks like Milligram or Sakura and then add your own modifications.
What are some alternatives?
Tufte CSS - Style your webpage like Edward Tufte’s handouts.
Bootstrap - The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
Picnic CSS - :handbag: A beautiful CSS library to kickstart your projects
Tailwind CSS - A utility-first CSS framework for rapid UI development.
Pure - A set of small, responsive CSS modules that you can use in every web project.
Bulma - Modern CSS framework based on Flexbox
Spectre.css - Spectre.css - A Lightweight, Responsive and Modern CSS Framework
card - :credit_card: make your credit card form better in one line of code
carbon-components-svelte - Svelte implementation of the Carbon Design System
Materialize - Materialize, a CSS Framework based on Material Design
tachyons - Functional css for humans
svelte-headlessui - Unofficial Svelte port of the Headless UI component library