Bulma: A CSS framework to consider | Hacker News Reader

Bulma: A CSS framework to consider

matwrites.com

108 pointsmatt_sh55 comments

Nice collection of fonts, padding, and colors. But not much more. A Column system and responsiveness are hardly features in a CSS framework, more like a bare requirements. The no extra DOM elements is nice, but does it choke if I do use some extra elements? Can I nest these elements without them blowing up?

I always think its strange frameworks like this make you override SASS variables to customize, and talk about SASS modularity. If you are working with SASS, you likely have the skill set to make something like this yourself, or are already working with a Designer. In fact, I think its a good exercise for any Front End Dev to go through the exercise of creating something like this. Pick a good font set, a color pallet (there are sites for that), and standard padding size (16px, 12px, 8px, 4px works well), and you have all you need.

The article had 0 code examples, and only a vague overview of a novel Tile layout. (Is that just display: grid?) Both links from the article to "Bulma" were download pages. I had to go several steps to get to an example. Nothing sets this apart from the million other CSS frameworks.

Why all that negativity? CSS frameworks are mostly about good defaults(initial decisions) that you can build on and I really like the defaults of Bulma.

A CSS framework doesn't need to do something unseen before to be good, It's not competition.

UI Frameworks that try to be something more use JS and this breaks some frameworks, especially frameworks with virtual DOM like React or Vue.

I like Bulma, the only thing is that the community is still small, so you can't browse through endless button or dropdown alternatives.

Unless you need to support old browsers you can do all your columns and responsiveness work in Grid and Flexbox natively. Grid in particular is far better at layout than even the best framework (it has named areas, reflow options, all sorts of useful stuff). You no longer need a framework for any responsive layout. Consequently CSS frameworks should be becoming minimal on the layout stuff.

Agreed. My last project I dumped a column system for just writing flexbox and grid CSS with vendor prefixing done by a post processor. It was very nice. I find most column systems only use 75% of flexbox, and miss some of the possible settings. Flexbox attributes are named very poorly though, and there was a learning curve on which attributes did what.

"No longer" as long as browser support is there? Are people polyfilling for grids or what?

IE10 and IE11 support Grid, albeit a slightly different syntax to an older spec. CSS Grid is not new. IE support was there long before the other browsers. You don't need to write two entirely separate layouts to use Grid. You don't need a polyfill.

Jen Simmons made a really good video about exactly this topic - https://www.youtube.com/watch?v=7msERxu7ivg

Rachel Andrews' blog post about IE and Grid - https://www.rachelandrew.co.uk/archives/2016/11/26/should-i-...

Mozilla article about progressive enhancement and Grid - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_La...

Since when was IE10 the oldest and least standards compliant browser out there?

It isn't, but it is the oldest browser that still has enough market share to be worth supporting (in some limited circumstances). We're not discussing IE5.5 because it has effectively zero users.

I assume you know that I wasn't thinking of IE 5.5. Why not just say that you personally don't have to support anything below IE10 and so you didn't bother thinking about them?

For 99.99% of websites and apps Grid is ideal for layout. There might be things that still need to work in browsers that are too old to support it, but they're not useful when it comes to discussions about how to build websites.

Some web developers out there are still supporting ActiveX components that no one is willing to replace. I don't think anyone would advocate building a new site using ActiveX though. At some point we have to move forward and adopt new technologies that improve the way things are built. We're at a point in web dev where Grid is ready for mainstream use.

And then come mobile browsers.

Last time I checked, polyfills for flexbox sucked big time. Just did not work. Maybe the landscape has changed, as it often does in JS.

Given no decent flexbox polyfills, I would doubt the existence of a good grid polyfill. If we can't do flexbox, how do we cope with grid?

Have used Bulma a bit and definitely easy to get up and running with something practical and aesthetically pleasing.

However for a recent site build [0] we went with Tachyons [1] - for anyone who's not come across it; give it a try!

The immutability of the styles make it so quick to iterate and develop. Despite the start-up cost of learning something new (with a slightly different approach), I'd say it's significantly quicker to get something done with.

[0] https://www.bestcoffee.guide [1] http://tachyons.io

I'm torn a bit between Tachyons and Tailwind[1]. The latter shares some of Tachyons ideas, but a bit less terse and with more tooling support.

[1]:https://tailwindcss.com/

I've played with both, and my vote definitely goes to Tailwind.

Tachyons popularised the concept of functional CSS, but it's very hard to customize (a lot of copy/paste, custom cli tool to recompile), whereas Tailwind has a per-project configuration file for colors, breakpoints, etc. and you can build components out of their CSS primitives (if you use PostCSS).

+1 for Tachyons.

I'm not a web developer and I used Tachyons for a personal website and a front end for a tool. It felt very comfortable to work with, and the examples section they have was incredibly useful as a mix & match copy/paste source. Loved the results.

One doubt about tachyons. Can I use it with CSS grid?

Wow Tachyons looks really nice, I like the colours a lot.

Having used Bulma for a few years now to build everything from product to open source stuff, I highly recommend it!

It's currently in use both at https://phishfinder.io and https://certstream.calidog.io

I used it for a few side projects, it has got a good "getting-started" guide with a lot of examples...easy to hack stuff together. It's been a while since Bulma was released and it only gets better. I'm glad it's getting maintained and contributors keep making it better and better! Thank you :)

I would highly consider moving to CSS grid for new projects. It landed in most major browsers about a year ago[0] and is a joy to use. Having a proper layout system built into the browser removes the need for a lot of the features of these frameworks and it is clearly where the puck is going so you should skate towards it.

[0]: https://caniuse.com/#feat=css-grid

How do you change or add things to CSS Grid without editing CSS?

I love this framework. The author, Jeremy Thomas, has got some serious design skills. I like all the things he's put out, even the pretty old stuff still looks excellent.

https://cssreference.io/

https://marksheet.io/

I picked up Bulma for my startup’s landing page and account admin (URL in my profile), and as a backend engineer who finds the front end ecosystem overwhelming, Bulma was refreshingly sensible.

Default styling feels a lot like github with a little less information density.

Looks nice. The is-two-fifths classes involve more tought than Bootstrap's col-md-3 but then I saw that you can also use is-1 to is-12 which seems way easier than thinking "which one of one third or two fifths is smaller?".

Bulma 0.6.2 is bigger than bootstrap 3.3.7 at 223k vs 146k for bootstrap, considering only the css size since Bulma doesn't have any js or icons.

I shared Bulma with my team little under a year ago while Bootstrap 4 was still in development. Bulma doesn't have all the bells and whistles CSS-wise of Bootstrap, and it also doesn't require _jquery_ into the page, it lets us write our own components (which is a pro and con of its own).

I'd like to give this a shot but partial IE 10+ support is a non-starter. Bootstrap is imperfect but continues to support IE 10 and 11.

Over 10% of our business users use Internet Explorer, due to NPAPI plugins (Java Applets, ActiveX, etc); it is their default browser within those companies.

I see the framework cancer now conquering CSS world as it did with back-end and JS world. The question is do we really need these frameworks?

I want to remind Robert Martin's advice about this issue; "Never buy magic! Before you commit to a framework, make sure you could write it. Do this by actually writing something simple that does the basics that you need. Make sure the magic all goes away. And then look at the framework again. Is it worth it? Can you live without it?"

http://blog.cleancoder.com/uncle-bob/2015/08/06/LetTheMagicD...

> Can you live without it

One should interpret "you" as "y'all" here. An individual can maintain their own framework-in-a-small-project pretty reasonably. However, as you build a team and codebase, there is a great benefit to either using an existing framework with its existing documentation or to extracting your framework into something that can be separately documented. That way, it is easier for new-joiners to understand the overall structure and woodgrain of your project which lets them more easily understand any given piece.

I agree with your overall comment though. More resources like http://rebuilding-rails.com/ should be available so that people understand how their frameworks actually fit together.

EDIT: Except for beginners. If you're starting out programming, it is more important for you to be able to get things working than to worry about writing a framework from scratch. If a framework has solid tutorial docs and especially solid installation docs, go for it. However, if you find yourself trying to glue 3 different frameworks together without a tutorial to follow, you probably want to be using different tools. Find something like http://chimera.labs.oreilly.com/books/1234000000754 which comes with automated testing and tells you how to set it up.

That sounds incredibly anachronistic, like much of what Robert Martin thinks is reasonable.

Computers are layers upon layers upon layers of magic, and while it's obviously beneficial to understand as much as possible, it takes a lifetime to understand it all. Low level programming languages just happen to be the layer he started out at, and obviously preaches that everything above is mostly pointless magic, ease of use and productivity be damned, and everything below is "absurdly simple" (lol).

Well no, because the word "magic" has a very specific meaning in this context: it means systemic dependencies, consequences, or action at a distance, that are uncontrolled, and of which you have no or limited or incorrect understanding. Linux for example, has pretty much no such "magic", top to bottom of the stack.

I'm currently rewriting one of my projects in Bulma, and it feels amazing. So far my experience with it (~1 week) is better compared to both Bootstrap & Foundation.

I use Bulma CSS for starting my projects and it's awesome! Was a Bootstrap guy before but I find Bulma more easy and sexier.

I once gave bulma a shot. I liked bulma a lot especially, because it was clean, had good docs, did not require js.

However, I moved to bootstrap.

However my major pain with bulma was styling table elements by defalt, and the styling can't be turned off.

This issue does not happen with bootstrap because bootstrap styles are opt-in.

Bulma styles are opt-in as well. Instead of importing just the base file, you could of imported everything except table.sass in elements.

And if I want to use the styles on table 1, but not on table 2?

Moreover, that will only work when you are compiling sass, if you are using bulma for quick prototyping, you will use dist files.

We have built https://www.moonlightwork.com using Bulma. It's such a simple and pleasurable framework to use. The Buefy project provided Bulma components in Vue.js, which we also use.

Just a reminder: Make sure to pause your adblocker on the websites of open source projects you use.

There are some problems with bulma, but overall, I think it is a very good choice to build new UIs from scratch. I used it with rails and the form "bulma-ification" process was quick and the result is nice.

Since it is quite new, some parts are still mildly annoying, such as too long classes for certain elements (.has-text-centered should just be .text-center like bootstrap or .is-center). Also, I had some conflicts with a code highlighter because both styled ".number" elements. I would prefer ".is-number". So in general, they have to be more consistent on their class names, tweak some of them and watch out for too simple class names (".number").

I have been using it with vuejs, it really cleans up the css and works well will reactive elements. Also nice UI components with https://buefy.github.io/#/

1. why must there always be a framework?

2. why do so many people want to build one?

I guess it's a learning experience as much as anything else.

But hey, as the XKCD comic says:

https://xkcd.com/927/

https://picturepan2.github.io/spectre/

I've used Spectre recently on a browser extension with great result. I'm amazed at the amount of feature packed into that little framework.

This is my framework of choice. Super minimal, and no JavaScript included (just how I like it).

I'm using Bulma on a re-design project now. I've had problems in the past tracking down shifting dependencies using other front end frameworks, so I cloned Bulma from github, avoiding npm, and am using Scout to compile Sass.

It's well documented and lightweight, so far so good.

I started using Bulma for my new project but later switched to Spectre.css. I like Spectre better. It's lighter and cleaner.

https://picturepan2.github.io/spectre/

I am switching back to Bulma again

Nice. I don't like any of the more popular frameworks for the reasons mentioned. Looks worthy of a shot!

I really can't see what this has over Semantic at all - Flex, modular and clean design is just the tip of the iceberg. The only thing is its classes are often pretty verbose and it's almost like learning another language to get it to place nice sometimes.

very cool, especially considering that Semantic UI comes in at a whopping >500 kb (without careful optimization) and needs additional tweaking to make it responsive :)

If you're using a JS framework that manages the DOM (like React, Vue, or Elm), using a JS-free CSS framework like Bulma is the way to go.

I don't know how this made it to the frontpage

My guess is: 1) Bootstrap fatigue, 2) enthusiasm for CSS grid

I don't mean to sound snarky, but Bulma's landing page looks cluttered and just... ugly.

https://i.imgur.com/UryNOCR.jpg

Of course, the presentation of the framework may have no bearing on its quality; this is just my first impression.

Reply on news.ycombinator.com