
Bulma – A modern CSS framework based on Flexbox - reimertz
http://bulma.io/
======
aorth
Bulma was on HN about six months ago as well, discussion is interesting:

[https://news.ycombinator.com/item?id=11005510](https://news.ycombinator.com/item?id=11005510)

~~~
woodpanel
Thanks! In that discussion [http://flexboxgrid.com/](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.

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

------
err4nt
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](http://staticresource.com/bulma.mp4)

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

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

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

------
firefoxd
Man why you gotta call it bulma.

~~~
soperj
Yeah, horrible name.

~~~
phaed
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)

~~~
oblio
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".

~~~
phaed
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)

~~~
oblio
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" :)

------
scrollaway
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?

~~~
allendoerfer
Tree shaking with UnCSS:
[https://github.com/giakki/uncss](https://github.com/giakki/uncss)

------
throwanem
[http://i.imgur.com/hbAPKRL.jpg](http://i.imgur.com/hbAPKRL.jpg)

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

------
dotch
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](http://caniuse.com/#feat=flexbox) [2]
[https://github.com/jgthms/bulma/issues/252](https://github.com/jgthms/bulma/issues/252)

~~~
9point6
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.

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

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

------
JustSomeNobody
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."

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

------
zwlee28
Bulimia

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

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

