
Bulma – Flexbox CSS framework - anw
https://bulma.io/
======
mcbetz
If you are looking for light-weight (no Jquery) and flexible alternatives to
Bootstrap, you might also like utility toolkit (combine classes for flexible
design systems) like Tachyon ([http://tachyons.io/](http://tachyons.io/)) or
TailwindCSS ([https://tailwindcss.com/](https://tailwindcss.com/)). These
toolkits have sped up my webdev while make me feel like really controlling
what I do (Bootstrap always felt like working against the system when
customizing stuff)

~~~
cygned
I tried like every CSS framework/library out there and eventually I always
come back to Tachyons. If you don’t know it, try it out!

With all its great aspects, I still want to point two things that constantly
annoy me; the default breakpoints are - imho - not enough for complicated
responsive layouts; and when you start to use custom classes, you will find
yourself in situations where breakpoint overrides don’t work properly anymore.
I have yet to find a scalable solution for both.

~~~
mcrittenden
I'm curious why you don't use Tailwind, which seems basically like Tachyons
except with configuration for things like breakpoints?

~~~
cygned
Basically because I haven’t looked that much into Tailwind yet. Maybe I should
do so.

------
koboll
Bulma is great. But it occupies an awkward position sandwiched between
Bootstrap and CSS grid.

If you only need to support modern browsers, grid is the most attractive and
powerful option. And if you need to support old IE, you probably need a pre-
flexbox solution. So the use case for Bulma is a bit limited these days. Or at
least that's the conclusion I reached when pondering using it.

~~~
pspeter3
Do you have any good grid references? I know how it conceptually works but
struggle to apply it

~~~
adventured
Here are a few good references to get started:

[http://cssgridgarden.com/](http://cssgridgarden.com/)

[https://hacks.mozilla.org/2017/10/an-introduction-to-css-
gri...](https://hacks.mozilla.org/2017/10/an-introduction-to-css-grid-layout-
part-1/)

[https://developer.mozilla.org/en-
US/docs/Web/CSS/CSS_Grid_La...](https://developer.mozilla.org/en-
US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout)

[https://www.layoutit.com/grid](https://www.layoutit.com/grid) (useful for
building examples to review)

[https://alligator.io/css/css-grid-layout-fr-
unit/](https://alligator.io/css/css-grid-layout-fr-unit/) (it's important to
understand the fr unit)

~~~
pspeter3
Thanks!

------
liquidise
251 instances of `!important`. This feels like strong opinionation to me. When
you need to start customizing this framework, there will be some hoops to jump
through in order to maintain upgrade-ability of the underlying file itself.

------
louismerlin
I use Bulma for almost all of my web projects :) Great syntax, great style.

But why post it on Hacker News ? There does not seem to be an update ?

~~~
NegativeLatency
People post stuff that’s of general interest.

This is the first I’ve heard of this particular framework.

~~~
louismerlin
It gets posted here every three months or so... But it's great if new people
discover it every time

------
aldoushuxley001
I just moved from Bootstrap to Bulma. Initially just because I didn't want to
use jquery anymore and I like that Bulma is only CSS.

Having made the switch though, I couldn't be happier. Everything just feels so
much easier with Bulma. And Bulma's use of flexbox makes horizontal alignment
& vertical centering ridiculously easy.

Highly recommend trying it out. Can be learned in minutes effectively.

~~~
conradfr
Well I mean you can use only the CSS/SASS part of Bootstrap if you want :)

Having said that I'm not totally a fan of Bootstrap v4 (over v3) so I might
give Bulma a chance.

~~~
aldoushuxley001
Absolutely that was a possibility, but felt Bulma was a cleaner approach.

------
adventured
I ended up almost entirely skipping over Flexbox in favor of Grid. I
understand a lot of developers transitioned through Flexbox and or still
primarily use it, however I'm curious where a Flexbox framework fits into the
future given the rapid adoption of Grid that is occuring. It seems clear that
Grid is going to overwhelm Flexbox adoption and make it entirely pointless.
Why would someone choose to adopt Bulma now?

~~~
bulatb
Grid tells boxes where to go. Flex tells content how to take up space.

Technically the window is a box with content, and technically your content can
be split into a grid of boxes, so grid and flex can kind of do each other's
jobs if you force them. But if your content isn't really boxes or your grid is
really content, consider using the other.

------
eric_khun
Just started a landing page for a side project today with bulma:
[https://nodablock.com/](https://nodablock.com/)

I'm not a frontend/design guy at all, and remember CSS as something really
troublesome just to center things... With bulma, I didn't touch a line of css,
and had something responsive without thinking much! I'm really satisfied with
the results and the time spent to do it (about 2 hours). What's also great is
that it helps keep the design consistent. Hopefully it will stay as good with
the main dashboard I'm building. It definitely gave a boost to my ego, and
makes me even more excited about pursuing the project!

Any feedbacks on how to improve that?

~~~
applecrazy
One small piece of feedback: your hero text in the middle of the page isn't
actually centered. While not a big deal, it just looks better if the `column`
on line 84 containing all the text is of width 8, with offset of two (since
Bulma's grid is 12-column).

Before (index.html:84):

    
    
        <div class="column is-7 is-offset-3">
    

After (index.html:84):

    
    
        <div class="column is-8 is-offset-2">

~~~
eric_khun
well, it's now a lot better! thank you :)

------
girishso
Bulma is my go to css framework these days, after semantic ui and bootstrap
before that, mainly because no jquery/js dependence.

------
aphextron
The whole point of CSS grid was that we _wouldn’t_ need frameworks anymore.

~~~
_fizz_buzz_
my understanding is that grid and flexbox are not the same thing.

~~~
aphextron
I’m just saying this is using flexbox for exactly what CSS grid was designed
to do. You’re better off just sticking to the browser standards and keeping
this stuff really simple, rather than introducing dependencies.

------
swalsh
+1 testimonial for bulma here. I use it for everything. I love how simple it
is.

------
strzibny
I am just trying it out for my side project
([https://www.gettandem.com](https://www.gettandem.com)) and liking it so far,
however the time will tell... (it's WIP so nothing is polished).

I was considering either no framework (as before), Tachyons and Bulma. After
quick demo of moving one page to Bulma I liked it enough to give it a go.

To the argument of CSS grid vs flexbox, as others already mentioned, it's kind
of implementation detail from the user point of view.

~~~
adityasaky
There’s already an app called Tandem where you chat with people to learn a
language. Just a heads up.

~~~
strzibny
My project is very old haha (~7 years)! And was built for my own needs to find
people in Brno where I studied. Since then many more projects for language
exchange appeared.

Honestly I would not start it today just like that :). But since it's running
I want to make it more modern now.

------
fibo
Bulma is really nive, I am creating a React component library wrapping it
[http://g14n.info/trunx](http://g14n.info/trunx)

------
Bonobosandsand
After painfully looking for a grid system for a while, we decided to ditch
bootstrap and the idea of a using a css-library and to simply use styled-
components, some defined breakpoint strings and flexbox and couldn't be
happier.

------
s3nnyy
We built [https://jobs.coderfit.com](https://jobs.coderfit.com) using it and
are really happy about the usability especially for not so "frontend-talented"
developers.

------
ggcdn
I really dislike how Bulma doesn't style html elements by default, instead
requiring things like

<input class="input" ..../>

Why not just target input elements with some sensible default styling?

~~~
y4mi
Because there is no "don't apply {selector} to this element" tag... If there
was, this would be a wonderful UX. But there isn't, so it would complicate
customization

~~~
ggcdn
I suppose that is the couteous path to take. Personally, I'd love a framework
that I could just drop in and it will make things look good with minimal
additional markup.

------
sweetp
I used it to throw together a product page pretty quickly
([https://minim.li](https://minim.li))

------
ryanpetrich
Background music is much too loud in the introductory video. Makes it
difficult to hear the presenter.

~~~
CharlesW
If you're a developer looking to avoid the same mistake, use "ducking"[1] to
help make sure that your music bed doesn't overwhelm foreground audio. Even
low-end tools like iMovie[2] support this, although the feature may be called
something like "lower volume of other clips".

[1]
[https://en.wikipedia.org/wiki/Ducking](https://en.wikipedia.org/wiki/Ducking)
[2] [https://www.cnet.com/how-to/tips-to-become-an-imovie-
master/](https://www.cnet.com/how-to/tips-to-become-an-imovie-master/)

------
duckqlz
From Dragonball:

Bulma (n): a phonetic misspelling of "bloomers," i.e., girls' underwear

------
mgalka
Really nice to have the flexbox grid and vertical centering

------
ronaldl93
Bulma is awesome <3

------
Exuma
That's cool

