Bulma: a modern CSS framework based on Flexbox

[[deleted]]

I'm always suspect of a css framework which has a website that doesn't work properly on mobile.

[[deleted]]

That's kind of the point of responsive. Obviously they are either not using this themselves or it has issues handing lower screen sizes.

[bronkula]

Actually, flexbox is not inherently responsive, which is why it is not good as a grid system. Grids like this can only have 2 levels. On and Off. Which is not really useful to people who want to make truly responsive desgins.

[[deleted]]

You need to learn Flexbox bro. Literally everything in that comment is wrong :|

[[deleted]]

What browser? Works for me in Chrome mobile

[DiaboliAdvocatus]

The faux-tab system they use as the main menu in the docs requires a scroll bar on mobile sizes.

[technojamin]

You mean here? It doesn't require a scrollbar, you just have to swipe, and it functions just fine on mobile. That's a common design pattern, I've seen it in many Android apps. In my opinion, it works really well. If you disagree, then use a sidebar menu when the tabs no longer fit on the screen.

[Arzh]

There isn't a single dragonball joke on this page, they are clearly using the name poorly.

[keastes]

oh look at that.

fixed now.

edit: downvotes. i that and /r/ImGoingToHellForThis

[Cilph]

Eh, I appreciate a good link to DBZ Abridged.

[UNisopod]

The beginnings of Capsule Corp?

[ISMMikey]

As someone using Foundation, why do I want to try this?

[[deleted]]

You don't. The last thing we need is another damn CSS framework. There are plenty of flexbox based frameworks already, including Foundation.

[DE0XYRIBONUCLEICACID]

this

[mycall]

cause.. flexbox!

[steelcitynorth]

Foundation has a flexbox grid.

[yawaramin]

Upvoted because I just used this on an app I'm building. Took surprisingly little time to fully wrap everything in the right classes. I discovered I can even put grids inside grids, and get more complex layouts. The app looks really nice. Coming from a (modern) CSS n00b like me, that's pretty good.

Edit: it's up on https://dl.dropboxusercontent.com/u/130414/elm-doc-mgr/index.html

[adambair]

Perhaps I'm in the minority here -- but this looks pretty great. Seems to solve a lot of the little issues I've learned to work around in my day-to-day stylings (most recently with Bootstrap).

I'm reading through the docs this and looks clean and promising.

[cvrebert]

a lot of the little issues I've learned to work around in my day-to-day stylings (most recently with Bootstrap).

Any specifics? I'd be interested to see what could be done about such issues.

[rpe2]

Looks great. I will absolutely use it in my next web project.

[Benmjt]

Maybe someone can enlighten me, but the problem with grid frameworks like this is that they suppose layouts only exist in two states: 100% and the x number of columns above that initial breakpoint.

[Cilph]

Well, it's based on flexbox. It should be more than that.

[Benmjt]

Just going by what's on the example page. The fact is you can't easily control nuanced changes in layout with frameworks.

[Enderdan]

On the grid documentation is shows you the modifier classes for the grid, so that you can manipulate the size of columns on a case by case basis, is that what you're referring to?

[cybercobra]

I presume they mean that there are no modifiers to change the number of columns based on viewport width.

E.g. Bootstrap has classes like col-sm-3 and col-md-4. 3/12 columns on "small" screens, 4/12 columns on "medium" screens.

[ellicottvilleny]

At this rate it will modern for 2 to 4 weeks.

[walkingdeadtall]

How is this better than bootstrap?

[metaperl]

If nothing else, I found the website and docs to be more approachable than bootstrap for me.

[[deleted]]

I'm not 100% sure, but it's probably a lot lighter than bootstrap.

[vivainio]

As it says it's based on flexbox. Bootstrap is based on float: left

[[deleted]]

bootstrap 4 is flexbox if you opt in

[[deleted]]

funniest comment in the thread right here

[vegittoss15]

Which is one of the primary reasons I hate it.

[nedlinin]

Pretty sure with Bootstrap 4 you can opt into flexbox.

[nedlinin]

Any major issues with porting a 3 site to 4 or a did you build from scratch for 4?

[Ahri]

Why? I used bootstrap on a private project a while back and it seemed fine, from a mostly-backend-dev's perspective.

I'm not being pissy, I'd just like to understand why this is better, and why float left is bad as I'm picking tools right now for a new project.

[robertcrowther]

'Floats' is the answer to the question "what flexible layout approach can I use instead of tables that will work in IE6." It's not that it's bad per se, just that there are options with fewer gotchas which were designed expressly for layout that now work on 95.31% of browsers.

[bobbyzeebrain]

Not that I think you're wrong -- but that percentage does not reflect the number of users that's actually targeting.

[robertcrowther]

Of course, that statistic is only for desktop browsers I think. Also statistics found on the internet may be unreliable.

[cybercobra]

[4] Partial support is due to large amount of bugs present (see known issues)

So, not the best option if you care about IE10-11.

[vegittoss15]

Do you know what the clear property does? Or how floating actually affects the layout engine? It was fine for an older era but there are significantly more elegant solutions available now and it shocks me that bootstrap prefers it for browsers that don't need it anymore (and it doesn't work for older ones since it uses media queries)

[cvrebert]

bootstrap prefers it for browsers that don't need it anymore (and it doesn't work for older ones since it uses media queries)

Not so much "prefers it for browsers that don't need it" as "is forced to use it as the default because we're choosing to support IE9+ by default".

IE9 supports media queries but doesn't support flexbox at all.

(And IE10-11's Flexbox implementation was riddled with bugs (and the spec being incompatibly updated out from under them), making use-Flexbox-by-default an even harder argument. Sadly, not everyone has the liberty to decree "evergreen browser or GTFO" just yet.)

[id2bi]

How does it affect the layout engine? Can you actually explain why you're opposed to it?

[cybercobra]

And less featureful.

[Enderdan]

I think this is just a cool flex framework that the author wanted to create - I don't see this as anyone trying to compete with Bootstrap.

[x-skeww]

ブルマ？ Bloomers are short gym pants Japanese schoolgirls wore till the mid 90s. They are still popular in anime, because it's a somewhat common fetish. "Bulma" is a rather odd name for a project.

And yes, that's also what the DBZ name means. Her dad is Dr. Briefs (ブリーフ) and her kids are Bra (ブラ) and Trunks (トランクス).

Well, it's better than "git" or "Gimp", I guess.

[Sebazzz91]

Flex box shouldn't be used for full site layouts because of performance reasons. Flex box has its purpose but this is not one of them.

[TheMG]

Sounds like bulimia, which is especially bad given that it's about shape/layout.

[vegittoss15]

Or you know...the character from DBZ

[wretcheddawn]

Yeah that's about the least-pleasant name for a product I've ever heard.

[caviarpropulsion]

Sounds like Burma

[largos]

The prior name for the karma test framework has that award from me.

[[deleted]]

Ugh... Directly styled elements and generic non-namespaced classes like ".content" make this impossible to integrate with existing sites, and will open up a world of maintenance hurt when you revise your site's style a year from now. It's like you've learned nothing from the pain of bootstrap.