13 ms·
The Bulma CSS framework reaches 1.0
- pauleveritt 3y agoUnless I'm mistaken, 1.0 is 3x bigger than 0.9 for minified version? 647 Kb.
- imjonse 3y agoIt is a full rewrite in Sass, with CSS variables, themes and colors being the main novelty.
- chrisweekly 3y agoIMHO Sass is becoming something of a liability, as its APIs can conflict w/ increasingly capable pure CSS.
- err4nt 3y agoIt'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.
- cantSpellSober 3y agoEh they have some really well-done Sass functions, finding "enough contrast" for example: https://github.com/jgthms/bulma/blob/main/sass/utilities/functions.scss#L200-L214 https://github.com/jgthms/bulma/blob/main/sass/utilities/fun... 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.
- moritzwarhier 3y agoI 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.
- err4nt 3y agoAs 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).
- moritzwarhier 3y agoThanks 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.
- cantSpellSober 3y ago...and now they have Sass functions to handle reading/writing CSS vars: https://github.com/jgthms/bulma/blob/main/sass/utilities/css-variables.scss#L9-L30 https://github.com/jgthms/bulma/blob/main/sass/utilities/css... Putting that effort into a JS version of the library might be better
- CSSer 3y agoI 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.
- c-hendricks 3y agonode-sass has been deprecated for about 4 years now: https://sass-lang.com/blog/libsass-is-deprecated/ https://sass-lang.com/blog/libsass-is-deprecated/
- CSSer 3y agoHeh, I didn’t know that. I just occasionally encounter very old projects that use it. Good riddance.
- nicoburns 3y agoIf you want something faster than dart-sass, then https://github.com/connorskees/grass https://github.com/connorskees/grass (a rust implementation) is pretty good these days (although it doesn't quite have full compatibility yet).
- whatamidoingyo 3y agoI've been using Bulma for years and was surprised there wasn't a 1.0 yet. It is by far my favorite CSS framework.
- deleted 3y ago[deleted]
- shtack 3y agoIn case the devs are reading, the documentation link from the Github description is broken (https://bulma.io/documentation/overview/start/ https://bulma.io/documentation/overview/start/), but https://bulma.io/documentation https://bulma.io/documentation works
- deleted 3y ago[deleted]
- actionfromafar 3y agoI 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.
- worble 3y agoI 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. https://github.com/jgthms/bulma/issues/3548 https://github.com/jgthms/bulma/issues/3548
- diggan 3y agoIf 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.
- bbx 3y agoFair point. I'm planning on making those elements "tag" agnostic. That way, you can use a CSS class or a <button> instead of an <a>.
- evantbyrne 3y agoHave you considered the possibility of programming? Found this in a few seconds with no prior knowledge of the project: https://github.com/jgthms/bulma/blob/main/sass/components/tabs.scss 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.
- hsjsbeebue 3y agoIt isn’t necessarily a bug. You have do to a lot if digging and discussion before you establish that.
- evantbyrne 3y ago[flagged]
- philipov 3y agoIs this named after the Dragonball character?
- LaundroMat 3y agoThe older site used to have a reference to Dragonball, so yes.
- vidalee 3y agoYes! As you can see by the primary color of the framework :)
- faitswulff 3y agoRIP Akira Toriyama. I wonder if the 1.0 announcement was related to his passing.
- pull_my_finger 3y agoWell 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.
- dev1ycan 3y agohttps://www.youtube.com/watch?v=mUXe8vqdvx4 https://www.youtube.com/watch?v=mUXe8vqdvx4 :^)
- microflash 3y agoI fondly remember Bulma from my college day projects. Nowadays, I simply use CSS.
- ramesh31 3y agoThe inputs are still great for maintaining consistency and a11y. I generally do all my own layouts, and then use Bulma for form elements.
- translucyd 3y agoPlease 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?
- lucasmullens 3y agoIt’s a Google naming convention. Internationalization (i18n) and accessibility (a11y) are the main two you’ll see.
- jhardy54 3y agoAlso Kubernetes (k8s). See-also: https://en.m.wikipedia.org/wiki/Numeronym https://en.m.wikipedia.org/wiki/Numeronym
- CharlesW 3y ago> It’s a Google naming convention. i18n was coined by Digital Equipment Corporation in the 1970s or 1980s. https://en.wikipedia.org/wiki/Internationalization_and_localization https://en.wikipedia.org/wiki/Internationalization_and_local... https://www.accessibility.com/glossary/a11y https://www.accessibility.com/glossary/a11y claims that this was initially a joke, which explains a lot.
- lyu07282 3y agoI d2't k2w w2t y1u m2n, I u1e t3e a1l t1e t2e
- p2hari 3y agoJust wanted to say thanks for everyone behind Bulma. It is one of the best one to pick up if you are looking for quick prototyping to some heavy work.
- Alifatisk 3y agoYeah the classnames are so well thought out
- scop 3y agoDoes 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?
- _v7gu 3y agoFunnily enough, the main case is getting cheap reputable backlinks for those companies
- _fat_santa 3y agoI think it's more that they provide backlinks. If you're a gambling company this is pretty much the only way you can advertise in the US.
- qotgalaxy 3y ago[dead]
- jeltz 3y agoIt 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.
- diggan 3y agoWhich, 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. [1] - casinoutansvensklicens dot co [2] - utansvensklicens dot casino [3] - casino-utan-svensk-licens dot com
- joeyhage 3y agoI 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
- ggambetta 3y agoVery 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 :)
- deleted 3y ago[deleted]
- kthartic 3y agoBut what is Bulma? 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.
- globalise83 3y agohttps://bulma.io/ https://bulma.io/
- deleted 3y ago[deleted]
- ksylvest 3y agoBulma is an awesome CSS framework! If anyone is interested I worked on a wrapper React component library for Bulma called Tights: https://github.com/ksylvest/tights https://github.com/ksylvest/tights
- lacoolj 3y agoYES I love Bulma CSS I am so glad to see this. Thank you contributor(s)!
- farleykr 3y agoJust out of curiosity: does anyone know why so many of the sponsors listed on bulma.io are casinos and betting sites?
- voat 3y agoCheap SEO backlinks
- theallan 3y ago$100/m is cheap for a back link? (honest question - I've no idea). 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.
- Andrex 3y ago> $100/m is cheap for a back link? (honest question - I've no idea). Depending on the backlink and ambitions for the website in question, I personally don't see that as unreasonable.
- kube-system 3y agoThere 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.
- sph 3y agoThey have a lot of money to launder. Better to spend some of it to reduce exposure, and increase SEO ranking.
- johnchristopher 3y agoProbably 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à.
- toddmorey 3y agoI 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.
- Ringz 3y agoApart from the great CSS framework, I think you could slowly suggest GHS (GitHub Stars) as a new ISO standard.
- toddmorey 3y agoYeah 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.
- diggan 3y ago> skim open issues 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?
- jawmes8 3y agoI usually look for duplicate issues that aren’t being addressed, or if there’s just a lot of seemingly non-trivial ones that go unanswered
- sph 3y agoFor me the presence of a stale bot that automatically closes issues after 30 days - like Bulma - is a major red flag. 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.
- dawnerd 3y agoIf anyone from Bulma sees this, it's a little off-putting when your sponsors section is mostly online casinos.
- EthicalSimilar 3y agoHuh, you really weren’t kidding..
- deleted 3y ago[deleted]
- deleted 3y ago[deleted]
- geenat 3y agoShould have dumped the build step.
- conradfr 3y agoI worked on a project that was using Bulma last week and to be honest, while not bad per se, it just felt like Bootstrap but with a lot less to offer. I'm probably missing something.
- kovezd 3y agoThat's the appeal: is lightweight.
- conradfr 3y agoI guess that makes sense.
- diggan 3y ago> it just felt like Bootstrap but with a lot less to offer. 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.
- partiallypro 3y agoBootstrap 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.
- ThePhysicist 3y agoOh 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/ 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.
- Alifatisk 3y agoI remember using Bulma years ago, and they just hit 1.0? What’s the reason it took so long?
- onli 3y agoI use bulma for a small site of mine: https://www.sustaphones.com/ 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.
- alentred 3y agoJust 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! [0] https://2023.stateofcss.com/en-US/css-frameworks/ https://2023.stateofcss.com/en-US/css-frameworks/
- ademup 3y agoBulma.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.
- stevenicr 3y agoRemade an old site using bulma around 2020 (https://globaladvancedmedia.com/ 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.
- codingclaws 3y agoDoes CSS really need frameworks?
- summarity 3y agoBulma is pretty neat, I made https://findsight.ai/ 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.
- bradgessler 3y agohttps://daisyui.com https://daisyui.com is a really great middle ground—you can move as fast as you would in Bulma, then drop down into the weeds with TW if you need it.
- creativeCak3 3y agoI 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/ https://thebigg.dev/). Congrats on reaching a 1.0!
- ryanbigg 3y agoYour personal site is so minimal, that it doesn’t even load on my phone. Is the URL right? (Also, that would be a good domain name for myself ;)
- creativeCak3 3y agoYes, the url (https://thebigg.dev/ 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 ;)
- ryanbigg 3y agoAh took a moment to load the second time round but it got there. Regular iPhone user here, but based down under.
- creativeCak3 3y agoThat 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.
- somishere 3y agoAlways 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?
- password4321 3y agoHere a list of tiny CSS frameworks shared recently: https://news.ycombinator.com/item?id=39793513#39795288 https://news.ycombinator.com/item?id=39793513#39795288
- somishere 3y agoAmazing, thanks for the link.
- holoduke 3y agoCan you use this without compiling? I just want to press f5 in my browser. No command line.
- rendaw 3y agoThis 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 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?
- block_dagger 3y agoBeen using Bulma since 2018 on every new project. Love it.
- ilamparithi 3y agoMicronaut + 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.
- dxxvi 3y agoI'm glad that you go with Micronaut (not Spring Boot).
- deleted 3y ago[deleted]
- dxxvi 3y agoHow does Bulma compare to Boostrap (I know that Bootstrap has js too) in terms of features and components? Does Bulma have accordions? I cannot find them on https://bulma.io/documentation/start/overview/ https://bulma.io/documentation/start/overview/