
Bulma: A CSS framework to consider - matt_sh
https://matwrites.com/bulma-css-framework-for-2018/
======
dexwiz
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.

~~~
onion2k
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.

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

~~~
onion2k
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](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-...](https://www.rachelandrew.co.uk/archives/2016/11/26/should-
i-try-to-use-the-ie-implementation-of-css-grid-layout/)

Mozilla article about progressive enhancement and Grid -
[https://developer.mozilla.org/en-
US/docs/Web/CSS/CSS_Grid_La...](https://developer.mozilla.org/en-
US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement)

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

~~~
onion2k
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.

~~~
newfoundglory
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?

~~~
onion2k
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.

------
justkez
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](https://www.bestcoffee.guide) [1]
[http://tachyons.io](http://tachyons.io)

~~~
mhd
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/](https://tailwindcss.com/)

~~~
1_player
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).

------
zer01
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](https://phishfinder.io)
and [https://certstream.calidog.io](https://certstream.calidog.io)

------
orliesaurus
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 :)

------
pg_bot
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](https://caniuse.com/#feat=css-grid)

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

------
jitl
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://cssreference.io/)

[https://marksheet.io/](https://marksheet.io/)

------
cshenton
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.

------
petre
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.

------
uzername
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).

------
Someone1234
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.

------
kerberos84
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...](http://blog.cleancoder.com/uncle-
bob/2015/08/06/LetTheMagicDie.html)

~~~
j_4
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).

~~~
polotics
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.

------
stanislavb
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.

------
ym705
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.

------
rk06
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.

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

~~~
rk06
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.

------
philip1209
We have built [https://www.moonlightwork.com](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.

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

------
antoineMoPa
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").

------
peter_retief
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/#/](https://buefy.github.io/#/)

------
Annatar
1\. why must there always be a framework?

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

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

But hey, as the XKCD comic says:

[https://xkcd.com/927/](https://xkcd.com/927/)

------
bricss
[https://picturepan2.github.io/spectre/](https://picturepan2.github.io/spectre/)

~~~
ww520
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.

------
OscarTheGrinch
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.

------
blocked_again
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/](https://picturepan2.github.io/spectre/)

~~~
blocked_again
I am switching back to Bulma again

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

------
adamcccc
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.

------
rapnie
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 :)

------
jstewartmobile
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.

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

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

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

[https://i.imgur.com/UryNOCR.jpg](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.

