Bulma – A modern CSS framework based on Flexbox | Hacker News Reader

Bulma – A modern CSS framework based on Flexbox

bulma.io

106 pointsreimertz45 comments

Bulma was on HN about six months ago as well, discussion is interesting:

https://news.ycombinator.com/item?id=11005510

Thanks! In that discussion http://flexboxgrid.com/ seems to be the most upvoted alternative.

What I find is a nuisance with flexbox in general, is that I end up with a large amount of DOM-hierarchy, made up by elements that do nothing semantically and are only needed for layout purposes.

Example from flexboxgrid:

<div class="row">

    <div class="col-xs">

        <div class="box">auto</div>

            <div class="row">

                <div class="col-xs">

                    <div class="box">auto</div>

                </div>

            </div>

        </div>

    </div>

</div>

I know the world isn't perfect and probably flexbox is still the best solution for more complex but responsive layouts, though.

That's exactly why I tried Bulma for a small project today, and really got on well with it.

No rules you need to know for what can be put inside which other thing - everything (that I've wanted to try) Just Works.

I checked up on this project earlier this week and their own homepage had content going off the edge of the viewport getting cut out of view.

If you want to convince me to use your framework, the demo site shouldn't appear broken at two different widths.

Video from this week: http://staticresource.com/bulma.mp4

That's more about that particular use of the :before pseudo class pulling content out to the left of the grid. And it may even be the design decision they made. (It fixes as soon as there's a breakpoint, so I don't think it's a large issue.)

> It fixes as soon as there's a breakpoint, so I don't think it's a large issue.

Seriously?

Let me rephrase that:

> It's broken at whole ranges of widths; the user has either to change `html{ zoom }`, change their browser width to something they didn't want, or live with it.

Don't do that to your users.. I always browse with Chrome somewhere between 1/3 and 3/4 width; the number of sites that try to use mobile view is ridiculous - if my width is <1024px I must be using my phone? When did that become acceptable?!

If you want me to watch your video, don't put horrible music on it.

I'm surprised by the level of effort put into the bug report video.

I think GP just turned on their screengrab software without turning off whatever they were listening to, or changing the settings to not capture sound.

A) I don't really care if you like or enjoy the video, I captured a recording of a bug at a point in time not for entertainment.

B) I didn't add anything to it, that's just what was happening on my computer at the time

What's the song in the video?

https://www.youtube.com/watch?v=6diBt5lx3xM

What software did you use to capture the video?

For anyone who's interested in some flexbox-based patterns for building UI components, take a gander at flexboxpatterns.com, too.

Man why you gotta call it bulma.

Yeah, horrible name.

All the best named projects give you an idea of what the project is about without having to describe it.

Bootstrap definition - of a person or project, using one's own resources rather than external help. (describes the project.)

Foundation definition - an underlying basis or principle for something. synonyms: basis, starting point, base... (describes the project)

Skeleton definition - an internal or external framework of bone, cartilage, or other rigid material supporting or containing the body of an animal or plant. (describes the project)

Blueprint definition - a photographic print that shows how something will be made (describes the project)

Pure definition - not mixed or adulterated with any other substance or material. (describes the project)

Groundwork definition - preliminary or basic work. (describes the project)

Materialize definition - [Material] Google's design guidelines [ize] make or become. (describes the project)

Columnal definition - archaic of, like, or relating to a column (describes the project)

TopCoat definition - the last layer of paint that is put on a surface (describes the project)

Ink definition - a colored fluid used for writing, drawing, printing, or duplicating. (describes the project)

Bulma definition - "bloomers", or women's loose-fitting knee-length underpants. Also Japanese for short gym shorts worn by girls. (who the fuck named this thing)

I found this hilarious. Genuinely interested in hearing if there's a meaning behind the name.

the man/woman probably just likes dragonball z.

Counter argument: some of the most used software systems in history have names that have almost 0 connection to what they're doing (unless you're willing to go through contortions to figure out their name, see recursive acronyms).

Chrome - web browser?

C - programming language? (actually almost all programming languages suffer from this problem; most libraries or frameworks have this problem as well)

Skype - video/audio chat?

Firefox - web browser?

Excel - spreadsheets?

Spring - Java framework?

Etc.

For all the discussions about naming I see on Hackernews, I see little evidence that naming actually matters when selecting a product. The only correlation I'd expect would be some sort of immediate negative connotation. I.e. someone names a video editing app something like "Disaster".

You sort of made my point...

Chrome definition - the user interface overhead that surrounds user data and web page content. (describes the project)

C definition - because its features were derived from an earlier language called "B" (describes the project)

Skype definition - originated from the words "sky" and "peer." (describes the project)

Firefox definition - originally titled Phoenix, the mythical firebird that rose triumphantly from the ashes of its dead predecessor (Netscape). Phoenix was eventually renamed, due to trademark issues, to Firefox. (describes the project)

Excel definition - to be exceptionally good at or proficient in an activity or subject. (describes the project)

Spring definition - to move or jump suddenly or rapidly upward or forward. (describes the project)

Ummm... you have a really weird definition for "describes the project".

Describes the project IMHO means: if I give a note with the application name to a person who hasn't yet used it or heard of it, he'll be able to sort of figure out what the software does based on the name.

There's no way someone who hasn't ever heard about "Chrome" will figure out that it's a web browser (only browser developers and a decent group of web developers even know that the browser interface is called "chrome" in jargon).

If you have to go into the project's history/lore/archives/jargon, the name doesn't "describe the project".

If you want some examples of "describes the project", Notepad, Wordpad, Internet Explorer, iTunes, iPhone, these are some examples of names that actually "describe" :)

Re: Chrome. When it was introduced it was small and fast. IOW, it didn't have a lot of chrome in the trucker sense. Now it is big and slow and does have a lot of chrome is the trucker sense.

"Bulma definition - "bloomers", or women's loose-fitting knee-length underpants. Also Japanese for short gym shorts worn by girls."

I'm from the UK and have never heard of this word Bulma. I agree it's not a pleasant-sounding word (too close to bulimia to me). Is this a commonly understood word in the US? Or is it slang? A quick search in the Cambridge Online dictionary (in both British and American English) comes up empty. It may be that the author wasn't aware of the meaning.

http://dictionary.cambridge.org/dictionary/british/

http://dictionary.cambridge.org/dictionary/american-english/

Its not, Bulma is a character in DragonBall-Z, she was named after Japanese gym shorts.

https://en.wikipedia.org/wiki/Bulma

Her name "Buruma" is the Japanese pronunciation of "bloomer", a type of gym shorts worn by Japanese girls at school.[5][7][8][9] As with most characters in the Dragon Ball series, Bulma's name is consistent with those of the rest of her family. All of Bulma's family members are named after underclothing of some sort.[9] Her father's name is Dr. Briefs, while her son and daughter are named Trunks and Bra (ブラ Bura?, "Bulla" in the English anime dub) respectively.

Pretty sure the author meant to name the framework after the character and failed to realize what the character was named after.

Semantic UI is even worse. You'd think you finally found a css framework that allows custom names on every element (and then using mixins to apply rules).

Nope – it's the same hell of col-xs-12-l etc. that bootstrap got us in 10 years ago.

What are you talking about? Semantic means 'relating to meaning in language or logic.' And you use words in the framework.

There isn't any ` col-xs-12-l` it's like `"ui eight wide column"` so it's nice to read.

Flxbxrizr

Sounds like bulimia.

Maybe the authors are huge fans of Dragon Ball.

http://dragonball.wikia.com/wiki/Bulma

If the name is based on DBZ, then +5 :-)

I haven't kept up with CSS practices for a loooong time. How do I use a css framework on my site for a few pages without causing the user to download hundreds of kilobytes of unused rules?

I imagine there are linters which only compile the interesting bits; do they support jinja/django templates?

Minification + gzip is probably enough depending on your needs. Bootstrap, which is a fairly large css framework, is 23kb from the CDN link on their site.

Modern CSS frameworks try to be modular, aided by some form of css preprocessor. As a result, you can typically import only the parts your site uses.

Also, as the sibling comment points out, minification + gzip will take that even further.

Tree shaking with UnCSS: https://github.com/giakki/uncss

http://i.imgur.com/hbAPKRL.jpg

Still a bug or two to work out on mobile, maybe. Looks great for the most part, though!

Really glad to see flexbox getting more traction.

Browser support for flexbox [1]:

full support: All evergreen browsers (incl. MS Edge, Safari 6.1+, mobile Safari 7.1+)

partial support: IE11+

This framework currently does not fully support IE11 [2]

[1] http://caniuse.com/#feat=flexbox [2] https://github.com/jgthms/bulma/issues/252

Actually, even IE10 has a fairly usable flexbox implementation, it's just based on a draft spec, so the property names and values are a bit weird.

Just avoid the old webkit draft (the only reason you'd consider it these days is for old <4.4 android phones) if you're working toward backwards compatibility, it's not worth the pain.

We are testing this out for our ModDB redesign right now. Enjoying the process, happy to answer questions should people have them

This looks interesting, and definitely addresses some common pain points.

Why does every framework for web development have to be described as "modern"? A more apt description would be "A CSS framework based on Flexbox for you to use until a new one comes along."

This is the sixth submission of this in about six months.

Bulimia

Maybe I'm just a bitter asshole but when people describe something as "A modern X" it immediately makes me roll my eyes. It tends to be redundant (i.e. you're already saying it uses Flexbox) or passive-aggressive ("my way is the modern way and yours is totally ancient!") or both.

Search github for the keyword "modern". Javascript projects BLOW everything away. CSS is second. These people drink each others koolaid.

Reply on news.ycombinator.com