7 ms·
Bulma – Flexbox CSS framework
- louismerlin 8y agoI use Bulma for almost all of my web projects :) Great syntax, great style. But why post it on Hacker News ? There does not seem to be an update ?
- NegativeLatency 8y agoPeople post stuff that’s of general interest. This is the first I’ve heard of this particular framework.
- louismerlin 8y agoIt gets posted here every three months or so... But it's great if new people discover it every time
- Exuma 8y agoThat's cool
- aldoushuxley001 8y agoI just moved from Bootstrap to Bulma. Initially just because I didn't want to use jquery anymore and I like that Bulma is only CSS. Having made the switch though, I couldn't be happier. Everything just feels so much easier with Bulma. And Bulma's use of flexbox makes horizontal alignment & vertical centering ridiculously easy. Highly recommend trying it out. Can be learned in minutes effectively.
- conradfr 8y agoWell I mean you can use only the CSS/SASS part of Bootstrap if you want :) Having said that I'm not totally a fan of Bootstrap v4 (over v3) so I might give Bulma a chance.
- aldoushuxley001 8y agoAbsolutely that was a possibility, but felt Bulma was a cleaner approach.
- adventured 8y agoI ended up almost entirely skipping over Flexbox in favor of Grid. I understand a lot of developers transitioned through Flexbox and or still primarily use it, however I'm curious where a Flexbox framework fits into the future given the rapid adoption of Grid that is occuring. It seems clear that Grid is going to overwhelm Flexbox adoption and make it entirely pointless. Why would someone choose to adopt Bulma now?
- PascalW 8y agoI adopted Bulma, but not for the flexbox aspect. It's nice to use Bulma's CSS components, easy to tweak via SASS and in general a much more pleasurable experience for me compared to Bootstrap. I think a lot of the components in Bulma use Flexbox, but I consider this an implantation detail I don't care about.
- ludwigschubert 8y agoGrid is not meant to replace Flexbox. I like to think of Grid as CSS’s 2D layout system, while Flexbox is its 1D layout system. I do agree that it seems pointless to adopt a Flexbox based framework to do what is more clearly expressed in Grid. (People often like using frameworks for the pre-styled components, so that may be one factor...)
- slow_donkey 8y agoI use both extensively, how have you completely replaced flexbox with grid? From my perspective they serve different purposes where grid works well at page layout and flexbox makes smaller section layouts easier (esp. rows)
- bulatb 8y agoGrid tells boxes where to go. Flex tells content how to take up space. Technically the window is a box with content, and technically your content can be split into a grid of boxes, so grid and flex can kind of do each other's jobs if you force them. But if your content isn't really boxes or your grid is really content, consider using the other.
- Kagerjay 8y ago
- ryanpetrich 8y agoBackground music is much too loud in the introductory video. Makes it difficult to hear the presenter.
- CharlesW 8y agoIf you're a developer looking to avoid the same mistake, use "ducking"[1] to help make sure that your music bed doesn't overwhelm foreground audio. Even low-end tools like iMovie[2] support this, although the feature may be called something like "lower volume of other clips". [1] https://en.wikipedia.org/wiki/Ducking https://en.wikipedia.org/wiki/Ducking [2] https://www.cnet.com/how-to/tips-to-become-an-imovie-master/ https://www.cnet.com/how-to/tips-to-become-an-imovie-master/
- koboll 8y agoBulma is great. But it occupies an awkward position sandwiched between Bootstrap and CSS grid. If you only need to support modern browsers, grid is the most attractive and powerful option. And if you need to support old IE, you probably need a pre-flexbox solution. So the use case for Bulma is a bit limited these days. Or at least that's the conclusion I reached when pondering using it.
- deleted 8y ago[deleted]
- pspeter3 8y agoDo you have any good grid references? I know how it conceptually works but struggle to apply it
- adventured 8y agoHere are a few good references to get started: http://cssgridgarden.com/ http://cssgridgarden.com/ https://hacks.mozilla.org/2017/10/an-introduction-to-css-grid-layout-part-1/ https://hacks.mozilla.org/2017/10/an-introduction-to-css-gri... https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_La... https://www.layoutit.com/grid https://www.layoutit.com/grid (useful for building examples to review) https://alligator.io/css/css-grid-layout-fr-unit/ https://alligator.io/css/css-grid-layout-fr-unit/ (it's important to understand the fr unit)
- pspeter3 8y agoThanks!
- ataylor32 8y agohttps://www.youtube.com/playlist?list=PLu8EoSxDXHP5CIFvt9-ze3IngcdAc2xKG https://www.youtube.com/playlist?list=PLu8EoSxDXHP5CIFvt9-ze...
- ReverseCold 8y ago
- girishso 8y agoBulma is my go to css framework these days, after semantic ui and bootstrap before that, mainly because no jquery/js dependence.
- s3nnyy 8y agoWe built https://jobs.coderfit.com https://jobs.coderfit.com using it and are really happy about the usability especially for not so "frontend-talented" developers.
- mcbetz 8y agoIf you are looking for light-weight (no Jquery) and flexible alternatives to Bootstrap, you might also like utility toolkit (combine classes for flexible design systems) like Tachyon (http://tachyons.io/ http://tachyons.io/) or TailwindCSS (https://tailwindcss.com/ https://tailwindcss.com/). These toolkits have sped up my webdev while make me feel like really controlling what I do (Bootstrap always felt like working against the system when customizing stuff)
- petepete 8y agoAlso Milligram. Super minimal, so much so even I can understand how it all works. https://milligram.io https://milligram.io
- mcrittenden 8y agoMilligram looks neat but it's not the same idea as utility first CSS framework like Tailwind and Tachyons.
- petepete 8y agoYeah that's definitely the case. I tend to use it as a minimal foundation and build on top. I haven't used Tachyons but like Tailwind. My problem with utility-first frameworks is that I prefer to do my styling in Sass than by adding loads of classes to elements in the template. Both are valid approaches though and I can see why people prefer both.
- nedp 8y agoYou can also apply TailwindCSS classes into any stylesheet preprocessor of your choice such as SASS[0] (@apply) then style it to your liking which is why I'm very delighted to use this instead of Tachyons. [0] - https://tailwindcss.com/docs/extracting-components https://tailwindcss.com/docs/extracting-components
- krat0sprakhar 8y ago+1. Recently read this awesome article on using Tailwind (https://frontendnews.io/editions/2018-08-08-tailwind-css-tutorial https://frontendnews.io/editions/2018-08-08-tailwind-css-tut...) and it seems utility-first CSS is a really interesting idea. Would definitely try it on my next project.
- swalsh 8y ago+1 testimonial for bulma here. I use it for everything. I love how simple it is.
- aphextron 8y agoThe whole point of CSS grid was that we wouldn’t need frameworks anymore.
- _fizz_buzz_ 8y agomy understanding is that grid and flexbox are not the same thing.
- aphextron 8y agoI’m just saying this is using flexbox for exactly what CSS grid was designed to do. You’re better off just sticking to the browser standards and keeping this stuff really simple, rather than introducing dependencies.
- fibo 8y agoBulma is really nive, I am creating a React component library wrapping it http://g14n.info/trunx http://g14n.info/trunx
- liquidise 8y ago251 instances of `!important`. This feels like strong opinionation to me. When you need to start customizing this framework, there will be some hoops to jump through in order to maintain upgrade-ability of the underlying file itself.
- duckqlz 8y agoFrom Dragonball: Bulma (n): a phonetic misspelling of "bloomers," i.e., girls' underwear
- strzibny 8y agoI am just trying it out for my side project (https://www.gettandem.com https://www.gettandem.com) and liking it so far, however the time will tell... (it's WIP so nothing is polished). I was considering either no framework (as before), Tachyons and Bulma. After quick demo of moving one page to Bulma I liked it enough to give it a go. To the argument of CSS grid vs flexbox, as others already mentioned, it's kind of implementation detail from the user point of view.
- adityasaky 8y agoThere’s already an app called Tandem where you chat with people to learn a language. Just a heads up.
- strzibny 8y agoMy project is very old haha (~7 years)! And was built for my own needs to find people in Brno where I studied. Since then many more projects for language exchange appeared. Honestly I would not start it today just like that :). But since it's running I want to make it more modern now.
- eric_khun 8y agoJust started a landing page for a side project today with bulma: https://nodablock.com/ https://nodablock.com/ I'm not a frontend/design guy at all, and remember CSS as something really troublesome just to center things... With bulma, I didn't touch a line of css, and had something responsive without thinking much! I'm really satisfied with the results and the time spent to do it (about 2 hours). What's also great is that it helps keep the design consistent. Hopefully it will stay as good with the main dashboard I'm building. It definitely gave a boost to my ego, and makes me even more excited about pursuing the project! Any feedbacks on how to improve that?
- applecrazy 8y agoOne small piece of feedback: your hero text in the middle of the page isn't actually centered. While not a big deal, it just looks better if the `column` on line 84 containing all the text is of width 8, with offset of two (since Bulma's grid is 12-column). Before (index.html:84): <div class="column is-7 is-offset-3"> After (index.html:84): <div class="column is-8 is-offset-2">
- eric_khun 8y agowell, it's now a lot better! thank you :)
- sweetp 8y agoI used it to throw together a product page pretty quickly (https://minim.li https://minim.li)
- mgalka 8y agoReally nice to have the flexbox grid and vertical centering
- Bonobosandsand 8y agoAfter painfully looking for a grid system for a while, we decided to ditch bootstrap and the idea of a using a css-library and to simply use styled-components, some defined breakpoint strings and flexbox and couldn't be happier.
- ggcdn 8y agoI really dislike how Bulma doesn't style html elements by default, instead requiring things like <input class="input" ..../> Why not just target input elements with some sensible default styling?
- y4mi 8y agoBecause there is no "don't apply {selector} to this element" tag... If there was, this would be a wonderful UX. But there isn't, so it would complicate customization
- ronaldl93 8y agoBulma is awesome <3