6 ms·
Bulma – A modern CSS framework based on Flexbox
- cjcenizal 10y agoFor anyone who's interested in some flexbox-based patterns for building UI components, take a gander at flexboxpatterns.com, too.
- firefoxd 10y agoMan why you gotta call it bulma.
- soperj 10y agoYeah, horrible name.
- phaed 10y agoAll 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)
- tasteup 10y agoI found this hilarious. Genuinely interested in hearing if there's a meaning behind the name.
- amagumori 10y agothe man/woman probably just likes dragonball z.
- oblio 10y agoCounter 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 10y agoYou 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)
- 10y ago
- matt4077 10y agoSemantic 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.
- penagwin 10y agoWhat 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.
- Waterluvian 10y agoFlxbxrizr
- estefan 10y agoSounds like bulimia.
- muterad_murilax 10y agoMaybe the authors are huge fans of Dragon Ball. http://dragonball.wikia.com/wiki/Bulma http://dragonball.wikia.com/wiki/Bulma
- kampsduac 10y agoIf the name is based on DBZ, then +5 :-)
- scrollaway 10y agoI 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?
- TheDrizzle43 10y agoMinification + 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.
- dragonshed 10y agoModern 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.
- allendoerfer 10y agoTree shaking with UnCSS: https://github.com/giakki/uncss https://github.com/giakki/uncss
- err4nt 10y agoI 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
- toddmorey 10y agoThat'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.)
- OJFord 10y ago> 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?!
- phaed 10y agoIf you want me to watch your video, don't put horrible music on it.
- vanderZwan 10y agoI think GP just turned on their screengrab software without turning off whatever they were listening to, or changing the settings to not capture sound.
- tasteup 10y agoI'm surprised by the level of effort put into the bug report video.
- aorth 10y agoBulma 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 10y agoThanks! 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 10y agoThat'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.
- zwlee28 10y agoBulimia
- dotch 10y agoReally 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 10y agoActually, 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.
- enraged_camel 10y agoMaybe 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 10y agoSearch github for the keyword "modern". Javascript projects BLOW everything away. CSS is second. These people drink each others koolaid.
- JustSomeNobody 10y agoWhy 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."
- percept 10y agoThis looks interesting, and definitely addresses some common pain points.
- throwanem 10y agohttp://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!
- intenscia 10y agoWe are testing this out for our ModDB redesign right now. Enjoying the process, happy to answer questions should people have them
- gkya 10y agoThis is the sixth submission of this in about six months.