The Bulma CSS framework reaches 1.0
github.com
github.com
button is-medium is-loading has-text-left
I see some folks have never heard of it, but it's been around a while, has about 50k gh stars, and has seen quite a lot of production usage. Definitely a good choice if it fits your needs / style.
What do you go looking for with this? And what results make you consider/not consider the project based on what you find while skimming open issues?
Sweeping issues under the carpet actively makes your library worse, only because one really values the vanity metric of "closed/open issue ratio".
Github star count is another useless metric, often inflated by "star this on github" widgets on the homepage.
Just like reading Amazon reviews.
See what people are complaining about and then answer whether you care about those things
[0]: https://purecss.io/
https://github.com/jgthms/bulma/blob/main/sass/components/ta...
I wish more developers who broadcast complaints about free software they rely on would at least attempt to contribute simple fixes to their own problems.
67 logos on the home page at the time of writing this, that's $6'700/m. While obviously not FAANG salary scale, it isn't to be sneezed at either.
Depending on the backlink and ambitions for the website in question, I personally don't see that as unreasonable.
[1] - casinoutansvensklicens dot co
[2] - utansvensklicens dot casino
[3] - casino-utan-svensk-licens dot com
Open source needs to find a way to make money and backlinks is a reasonable way of doing it. I should say for my own open source project I refuse backlinks to gambling sites on morality grounds though - although looking at how much revenue it might bring in on a monthly basis, there is a lot of temptation there.
I'm probably missing something.
Make sense, Bulma is a CSS-only framework while Bootstrap (last time I used it) also has JavaScript parts to it, so naturally it'd have less to offer.
That said, I had performance issues on the site in Firefox. Very noticeable when switching between dark / light mode. Not sure if anyone else saw the same?
Bulma worked for me, I could create a web site with forms and not exactly pretty design, but not a complete eye-sore and it worked both on mobile and on desktop. Just a page-reload web site with separate pages and a Python backend with some kind of python library where you write HTML in Python syntax.
Really enjoyed how easy it was to understand and build with. Around that time I also enjoyed skeleton and a couple others.
There were several I tried that just did not sink in for me, one by yahoo I think and then I tried tailwind a couple of times.
In my quest for quick, super lightweight / fast load / no bloat builds.. bulma would be my go-to if I needed to use a framework for speed with quick to publish..
lately I have also been just building some with straight grid and css line by line, mainly for the practice and in the quest of using the absolute lightest / fastest to load / core web vitals kind of quest.
Long story short, I was hesitant about Bulma because I feared it will eventually succumb to the same fate the Materialize CSS did. But the framework looked so elegant and easy, I have decided to go with it. Was very happy with my decision so far.
I am now double happy seeing it well maintained and it having a fresh update. Thank you for this framework!
(Also, that would be a good domain name for myself ;)
Also, sorry! Already bought the domain a while back ;)
The closest to that in CSS is color-contrast() which isn't in any browser yet. There's a lot CSS still can't do.
The actual interpolation/processing would still be outside of the browser.
IIRC, the normative framework for this is pretty new, and I don't now the rules about function names.
The pain with SASS et al is real though.
Most frequent offenders in my experience:
- the max() function
- the division symbol occuring in values of native properties such as grid-column or aspect-ratio
Both have been deprecated in newer versions, but it is impossible to automatically fix this unless you know that all of your (S)CSS was written before these features were introduced.
So if a function in CSS is func(), then a custom author-defined function will always be --func() and it should be parsed and safely ignored by browsers or things that don't understand it, but still present in your CSS for tools to read and operate on so you can define custom features and use them within standard CSS no matter how or where you are providing the support (you could process some things in advance like a preprocessor, or it might be a feature that only makes sense to support client-side in a browser or at the time the CSS is being evaluated).
Totally makes sense and fits well with CSS custom properties.
While naming rules as syntax might seem smelly when it exceeds banning keywords as identifiers, I find this to be a sensible and well-thought-out rule, similar to the Custom Element dash-tag-name rule (notwithstanding other issues with the Web Component standard)
It's KISS and does it's best to make a good tradeoff regarding forwards-compatibility.
Putting that effort into a JS version of the library might be better
It's encouraging to see Tailwind recognizing this and embracing it more thoroughly in their 4.0 alpha.
It says v1 is a full rewrite though... what does that mean? I would expect v0 to be a rewrite and v1 to be when that stabilizes. Could this have been silently fixed?
Does Bulma have accordions? I cannot find them on https://bulma.io/documentation/start/overview/
I'd love to use this because it looks good, but this makes me lose trust.
1. It's absolutely awesome that 1.0 did not break compatibility with the old HTML. That's quality.
2. Bulma 1.0 finally has a grid component. Very nice, as my site is basically one big grid, and the flexbox solution from before was missing equal height boxes. Though the grid performance seems aweful on my old test phone, but that might not be bulma's fault?
3. I refuse to use build pipelines in my free time for web projects, and with that limitation I never felt in control of bulma. It was default colors or nothing (or custom CSS, which as an artificial limitation I tried to limit to a minimum here). Now, there is CSS variables support and that might be perfect for me - but the docs do not cover how to use that, and whether it's built in a way that they can be used. Can I for example set a custom primary color? The docs show changing the link color to some numeric value, that does not translate for me.
That's a bit disappointing after reading about themes and color palettes in the changelog.
4. Even with my very limited usage of bulma's colors, the new dark mode did not work for me. My site has a "has-background-light" class at the body, because otherwise bulma's boxes have an unbearably low contrast at their borders/shadows with the background, especially at their top. But "has-background-light" stays a light background even in dark mode. That sounds reasonable and like a mistake on my side, until the docs don't present a "has-background-light-dark" or something like this, something that changes from light to dark dynamically.
5. Regardless of that, I wouldn't use the default dark mode, it's too dark (and my site embeds images with white background, which I can't change - would have to use a filter maybe).
6. The form helpers, specifically the dropdowns, still feel nice. Though I had to include some hacks to get them to work on mobile and desktop.
7. The color definitions used break the browser dev tools contrast check tool, the colors aren't resolved. This is especially problematic as not all default colors are accessible, the yellow warning color for example has too low a contrast for a white background, with which it's presented in the docs. A framework like this really should only have accessible default colors.
8. The framework does not feel completely thought out with regards to responsiveness. Specifically, often you want to have your outer element only have some margin until the viewport gets very small. But the mx-* margin helper has no variant with included breakpoint, the layout's container `is-fluid` modifier sets a fixed 32px margin, way too much on small screens.
I read the github readme and I still don't know what it does (other than it's a CSS framework). The only link that looks useful is the documentation link which leads to a 404 page.
I just wanna see an overview or some examples, I'm confused how this isn't the first thing shown on the github page.
I'd say we should judge the entire project by this awful UX and stay far away from it.
Why native English speakers like so much to shorten words so much? To me, a non native, a11y reads like ally and in no means reads accessibility. Any tips on that?
i18n was coined by Digital Equipment Corporation in the 1970s or 1980s. https://en.wikipedia.org/wiki/Internationalization_and_local...
https://www.accessibility.com/glossary/a11y claims that this was initially a joke, which explains a lot.
https://en.wikipedia.org/wiki/Numeronym#Numerical_contractio...
Three of those are (ironically) related to making content legible to everyone.
But mostly only the same four as you.
a-ccessibilit-y => ccessibility is 11 characters => a11y
Though i18n for internationalisation has been around for so long now that when I see something like a11y or k8s or etc. I assume it's Another One Of Those and go find out what the long version is.
You do need a font where 1 versus l is obvious, but that's also true of reading code so most of us probably -do- have such a font already.
(I can see why it's confusing; all I can really say is "you get used to it eventually" and possibly "sorry" ;)
Fun fact! These are called "numeronyms".
I mean, if they were taking the piss, I might find it amusing.