I have always loved the helper syntax for this framework:
button is-medium is-loading has-text-left
That's just so pleasingly readable to me. Bulma is much more css component oriented (contains classes like button and tab) than utility oriented (tailwind-style). But there are a few utility helpers like margin and padding (pt-1, ml-2, etc).
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.
Yeah I know stars are a fairly worthless vanity metric, but it's the best quick proxy that I know of for community size on this sort of project. I usually check stars and skim open issues. Sometimes a code search to see how many projects and what sort of projects consume the library.
I wish the auto-close bot could be considered a red flag for the exact reasons you stated, but unfortunately it’s in effect on tons of actually good projects, so it’s not useful as a signal.
Checking issues can be a little less useful than it used to be. I know that the FastAPI project plays games where they close issues and refile them as discussions so as to keep the apparent count low.
My favourite for small projects (the only kind of project I do ^^) is Pure.css [0]. It is wonderfully small, about 1/20th of the size of Bulma. Small enough to actually read and understand.
This is the first time I've heard of the Yahoo! BSD License. It was an improvement when the original BSD license dropped conditions, so this seems like a step backwards, license-wise.
I used to use Bulma a lot, but become frustrated by the fact certain items require you to use <a> tags for styling even if you don't want them to be clickable links, which is pretty bad for accessibility.
If you skip using the href attribute, I think most accessibility tools wont see them as links anymore. Doesn't solve the issue but might be a workaround in the meantime.
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.
Oh wow, quite happy about this, for a while it seemed the project was abandoned, really glad Jeremy keeps working on this :) The new website (https://bulma.io/) also looks very slick. I could totally see that he'd be able to monetize this like Tailwind, it's a really well thought-out framework with a good compromise between responsiveness, utility classes and components.
Probably it's the same person/web agency casinos go to ? Or all the sponsors are entities from a larger casino/betting group and the inside dev./web agency uses bulma et voilà.
Looking at the links: probably not. These look like shady casinos and casino affiliates. Most likely they do it for cheap high quality backlinks. Several of them promote unregulated casinos targetting the Swedish market.
There are/were places where you could get really cheap (or free!) backlinks, but most search engines got wise to that trick, and those backlinks (links from spammy sites with little organic traffic) aren't very valuable anymore. To get a link on a reputable standalone website, $100/m seems cheap to me. What better alternatives are there at this quality level? A B2B partnership/sponsorship? You can easily spend 5 digits for that.
Does anybody know why Bulma has a large number of gambling companies sponsoring it? If you look at the sponsor list you will see a huge portion is gambling related. Does it offer something that that industry finds particularly valuable?
It is also some illegal casinos which target the Swedish market "utan spelpaus" means that it is a casino which ignores the Swedish anti-addiction self block. And "utan svensk licens" means that they do not have a Swedish gambling licence.
Which, funnily enough, is expanded on in no less than three[1][2][3] dedicated websites that are essentially called "Casino-Without-Swedish-License" in various ways, and are also linked as sponsors on the bulma.io website.
I did not realize this until now, thanks for pointing it out. I will have to find an alternative because explaining to clients that I use software that openly and prolifically “sells out” to casinos isn’t something I want to spend my time doing
Daft question, but if you hadn't realised, then your client's obviously asked that question yet (and might not)?
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.
Sure, if you have the privilege to make your life unnecessarily harder than it is, then choosing another CSS framework based on whether it has shady sponsors or not is a great pastime.
I was gonna make a jokey comment, but I’m seriously at a loss for words. This is the most overtorqued ridiculous take I’ve read all week. Who cares who else is using the free libraries that you’re using?
Bootstrap is too heavy even when you customize what you're getting, I wish that Foundation would get an update that strips its jQuery dependency, but that project seems mostly dead though I prefer it.
Bulma is pretty neat, I made https://findsight.ai/ using it. It keeps you moving. I love Tailwind, but sometimes you need even less control to stay on track and not rabbithole on design details.
Always on the lookout for a quality (low/no js) CSS framework. One that uses sane structural paradigms and doesn't leave a build beholden to 3rd party documentation / questionable design decisions. One that is straightforward to pull back / strip out when the time comes. One with reasonable overheads (branding, download size, etc). And with all that in place - one that handles forms / browser chrome well. Yet to find it, but this looks like it comes pretty close. I'm willing to try it.
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?
I have done very very little frontend, and I get confused easily by all the newfangled cool stuff, but a few years ago I had to do "Frontend in Anger".
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.
Remade an old site using bulma around 2020 (https://globaladvancedmedia.com/ ) - it had been a wysiwyg publish via old netobjects fusion, with wordpress for a couple of sections.
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.
Just early this week I spent some time (in fact, a bit too much time) on the "State of CSS 2023" [0], choosing the CSS framework for "my next hobby project". The usual thing: I don't know CSS well enough, but got bored by Bootstrap, and am still scared of Tailwind...
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!
I love the simplicity of Bulma! For someone that does not want to dig into the mess that css can be, it simplifies a lot. I built my personal site with it (https://thebigg.dev/). Congrats on reaching a 1.0!
Yes, the url (https://thebigg.dev/) is correct. I just tested on my phone and it's loading just fine--I have an Android phone and test it on Firefox and Chrome and works just fine. Interesting that it does not load for you...what phone/browser are you testing it on?
Also, sorry! Already bought the domain a while back ;)
That actually kind of makes sense. The framework I'm using (Yew) compiles down to WASM. So the entire website is loaded up-front first. It's like loading an entire app on your browser. The idea is once you load it, it should go really fast.
I also refuse to touch node-sass (Bulma wisely opted for the Dart implementation, so this is a bit of a tangent). Node itself partially shares the blame for the binding situation, and it's improving with Node ABI. Regardless, it's just too complex a dependency when, as you pointed out, pure CSS is increasingly very capable.
It's encouraging to see Tailwind recognizing this and embracing it more thoroughly in their 4.0 alpha.
If you want something faster than dart-sass, then https://github.com/connorskees/grass (a rust implementation) is pretty good these days (although it doesn't quite have full compatibility yet).
It's also possible to define custom author-defined features fully within standard CSS syntax, which can then be safely picked up and processed by tools (server side or client-side) and handled without needing a custom language and its own custom syntax. It's a solution that's far, far bigger than the problem it solves.
I think the comment you are responding to is thinking about native ways to extend CSS without violating or extending the syntax rules. For example, @-rules.
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.
As far as I know the rules were set in stone by 2013 or around there so while they haven't been widely taught or have tons of blog posts written about them they are safe and futureproof in that way. From what I understand around the time of the design of the syntax for CSS custom properties (which have '--' a double-dash prefixed to the start of the term) they decided that all author-defined parts of CSS syntax will always begin with a double dash '--', which is like a vendor prefix (e.g. '-webkit-' or '-moz-' etc) but with no vendor.
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).
Thanks for the info!
That was the rule I was hoping exists but couldn't bother to look up.
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.
This issue has been open for over four years now, I'm surprised more people aren't hitting this despite being a mobile-first css framework: https://github.com/jgthms/bulma/issues/2769
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?
Well apparently, among other things, it includes a complete rewrite to use Dart Sass, so I doubt they did all that to honor Toriyama, when the only link is the name being a random reference to one of his secondary characters.
Bulma.io layout is broken in landscape mode on my phone (responsively and full page refresh) with several sections going beyond the edge of the page. Firefix on Pixel 7.
I'd love to use this because it looks good, but this makes me lose trust.
Micronaut + VueJS + Bulma is my go to stack now. I like the minimalistic approach of Bulma. Was able to create a responsive single page app with minimal effort. Themes feature is a welcome addition.
I use bulma for a small site of mine: https://www.sustaphones.com/. Some impressions from my usage, after having just updated to 1.0:
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.
Please dont take this as criticism and just a question:
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?
It's not a native English speaker thing, it's a cool tech i-don't-have-time-to-waste-writing-words thing. Outside of the tech world no native English speaker would have any idea what a11y was supposed to represent either. We do love shortening words but usually in a more natural way.
I suspect it's basically "wanted shorter terms for things that couldn't be turned into an acronym" because ... well, because we're lazy and like typing less.
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" ;)
Very happy to see this here! I don't use Bulma (mainly because I don't use CSS) but I had the pleasure of working with Jeremy in the past, and he deserves every bit of recognition for this! Insanely talented frontend developer, super nice guy, excellent football teammate :)
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.