6 ms·

Bulma: Modern CSS framework based on Flexbox

146 points by dkannan 11y ago

mjibson 11y ago
Having previously built some medium-sized apps with bootstrap and material, this is something I'd like to try for my next project. It looks simpler than either of those other two, and has enough other stuff to make it usable out of the box, unlike something like skeleton which was too minimalist for me to use easily. I haven't used flexbox ever myself. Could someone summarize why flexbox makes this framework effective?
- RickS 11y ago
  Flexbox layouts "work like you think they work" for the most part, which is really nice, and far better than their predecessors. The 3 "holy shit we needed this before!" features IMO are: vertical centering, height matching (if you have 3 columns in a row, and one has more text, all 3 columns will have the same bottom position), and the ability to evenly distribute objects across space. check this out for more: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ caveat: flexbox support, while passably good, is still shaky in places.
  - leeoniya 11y ago
    the ability to dynamically fill the remaining space is also huge.
- SwellJoe 11y ago
  "Could someone summarize why flexbox makes this framework effective?" Ever tried to center something vertically? Flex box does it easily. Is also makes it easier to do responsive layouts, with much simpler markup and styling.
RickS 11y ago
Did a quick pass of the docs, and the grid system seems to be opinionated/unconfigurable w/r/t changing column ratios as device width scales. Everything is 100% width at mobile size, and once you pass that breakpoint, there's no adjustment mechanism at any other size. That's a big step backwards from bootstrap's col-breakpoint-width, IMO. It also fails to address nesting columns within each other. This feels more like a rudimentary grid system that happens to have some button styles, rather than a "framework". If you want a bootstrap-like grid experience with flexbox and sans the bloat, I've had a decent experience with this: http://flexboxgrid.com/ http://flexboxgrid.com/
- deleted 11y ago
  [deleted]
- ivan_ah 11y ago
  Yeah http://bulma.io/documentation/grid/ http://bulma.io/documentation/grid/ could definitely use some improvement for different screen sizes, but the rest is very well styled...
- Numberwang 11y ago
  Do you have a a good resource for some bloat to go with that grid experience as well?
- bybjorn 11y ago
  Foundation Sites (F6) also comes with flexbox grid btw. It's optional, you can switch it on in the sass settings and use the same html markup as before.
SwellJoe 11y ago
Flexbox is lovely, and this framework looks great...but, does it work with crappy browsers (e.g. every IE version prior to Edge)?
- RickS 11y ago
  According to caniuse[1], IE support is janky, period. 1. http://caniuse.com/#feat=flexbox http://caniuse.com/#feat=flexbox
  - jmknoll 11y ago
    IE 10 and 11 are supported with browser prefixes, so you're only losing out on 8 and 9, which constitute ~2 of all internet traffic. Some non-trivial percentage of IE 8 and 9 users have them installed only for specific websites and internal corporate sites. There just can't be that many people browsing the web with IE 8 and 9. Additionally, we need to draw the line somewhere, especially given how much easier flexbox makes front-end styling.
    - frik 11y ago
      Caniuse.com shows the global usage share statistics (based on data from StatCounter GlobalStats for December 2015) next to each entry. IE 7: 0.05% IE 8: 1.18% IE 9: 0.91% IE 10: 0.87% IE 11: 6.45% Edge 12: 0.67% Edge 13: 0% Edge 14: 0% For comparision: Chrome 47: 20.46% Chrome (Android) 47: 17.45% The full list: http://caniuse.com/usage-table http://caniuse.com/usage-table IE 8, IE 9 and IE 10 are still more widely used than Win10 with its Edge browser. Don't use flexbox for your start page, especially if you want to do business (SaaS). It will be completely broken in IE8/9 and look like shit. Corporate managers will close your website instantly.
  - ry_ry 11y ago
    In practice 10 support is patchy, but can usually be fixed using the wonky old syntax and minimal hacking. For general use 11/Edge are fine. In fact, a usable desktop view for IE9 is relatively easy to frig with %widths and a handful of padding hacks.
deleted 11y ago
[deleted]
cfv 11y ago
This can be beautiful, but I'd need SOME KIND of back-compatible functionality, even if it's just to tell old IE users "hey you're totally missing on stuff, check this out"
inlineint 11y ago
It looks great. I think I will use it in my hobby projects instead of Bootstrap.
Tomte 11y ago
I haven't found a way to handle <aside> with Flexbox. Intended behaviour is that you're writing paragraphs of , then a that you wish to annotate, then the <aside>, then some more . The aside should be, well, on the side. In the margin. So far, with floating <aside> you need to have the <aside> before the that it belongs to, which is semantically false. I had hopes with Flexbox to finally solve this issue, but it doesn't look possible, because if you imagine it as a big grid of two columns, the text would have to flow through only the left column, while only the <aside> would have to be pushed to the right column.
- nailer 11y ago
 Wouldn't row-reverse fix that?
 - deleted 11y ago
 [deleted]
- jlukic 11y ago
 If you use margin: auto on an element inside a flex container (for example margin-left:auto to float right), you can position a floated element in correct content order.
- antsar 11y ago
 Is this what you're looking to do? https://jsfiddle.net/sadz6va6/ https://jsfiddle.net/sadz6va6/ Disclaimer: New to flexbox myself. Might have committed some sins.
 - Tomte 11y ago
 Yes. Thank you (also to the sibling commenters).
 - qwyxzy 11y ago
 Nicely done.
- deleted 11y ago
 [deleted]
wanda 11y ago
Just as popular JavaScript libraries spawn many superfluous forks and microframeworks, the landing of Flexbox has resulted in dozens of these CSS 'frameworks' and grid systems: 1. http://basegui.de http://basegui.de 2. https://github.com/ButaneCSS/butanecss https://github.com/ButaneCSS/butanecss 3. http://juicedcss.com http://juicedcss.com 4. http://bowlingx.github.io/flexcss http://bowlingx.github.io/flexcss 5. http://codepen.io/geoffyuen/pen/ogrPbZ http://codepen.io/geoffyuen/pen/ogrPbZ 6. https://github.com/meerita/flexsasscandy https://github.com/meerita/flexsasscandy 7. http://getmdl.io/components/index.html#layout-section/grid http://getmdl.io/components/index.html#layout-section/grid 8. https://kevinpy.com/Projects/Flexo https://kevinpy.com/Projects/Flexo 9. http://philippkuehn.github.io/gridilydidily http://philippkuehn.github.io/gridilydidily 10. http://stylusgrid.com http://stylusgrid.com 11. https://github.com/IonicaBizau/gridly https://github.com/IonicaBizau/gridly 12. https://github.com/colourgarden/avalanche https://github.com/colourgarden/avalanche 13. https://milligram.github.io/ https://milligram.github.io/ 14. https://github.com/ButaneCSS/butanecss https://github.com/ButaneCSS/butanecss 15. http://bulma.io/documentation/grid/ http://bulma.io/documentation/grid/ 16. http://gridlex.devlint.fr/ http://gridlex.devlint.fr/ 17. http://crabcss.com http://crabcss.com and that's but a fraction of the full list. I haven't bothered to sit down and actually assess whether these flexbox grids actually differ from each other (my gut says that it's not possible for them to differ too much). My gut also tells me that there has to be an apex, an optimal Flex-based grid from which there can be no improvement. I think a big part of the problem of why websites all look a bit similar is because they're all developed using Bootstrap, Bourbon or Foundation, and apparently on the rare occasion where a front-end framework is not used, an offshoot or "heavily-inspired by" alternative is used instead. Nobody is thinking about what /could/ be, but rather what can be done in the least time to produce the best approximation of a contemporary website. Nobody wants to push the boundaries. Maybe we've reached an optimal paradigm for the design and layout of websites. I don't think so. I always implement my own CSS, mainly because I really don't like carrying frameworks around. If I need all of a framework's features, I'll consider using it. Since I never need all of a framework's freatures, that never happens. If I ever do need a full front-end framework's worth of features, here's a framework that seems flexible, modular and solid to me: http://www.basscss.com/ http://www.basscss.com/ and if you want a great grid, look at this: http://peterramsing.github.io/lost/ http://peterramsing.github.io/lost/ and if you want to wait for a more powerful future grid tool, investigate the CSS Grid Spec: http://gridbyexample.com/ http://gridbyexample.com/ http://gridbyexample.com/examples/page-layout/ http://gridbyexample.com/examples/page-layout/ http://abookapart.com/products/get-ready-for-css-grid-layout http://abookapart.com/products/get-ready-for-css-grid-layout https://24ways.org/2015/grid-flexbox-box-alignment-our-new-system-for-layout/ https://24ways.org/2015/grid-flexbox-box-alignment-our-new-s... https://rachelandrew.co.uk/archives/2015/11/03/three-years-with-css-grid-layout/ https://rachelandrew.co.uk/archives/2015/11/03/three-years-w... https://rachelandrew.co.uk/archives/2015/04/14/grid-layout-automatic-placement-and-packing-modes/ https://rachelandrew.co.uk/archives/2015/04/14/grid-layout-a...
deleted 11y ago
[deleted]
romanovcode 11y ago
Am I the only one who doesn't understand why every single piece of code needs to be installed through npm? Even css? Come on!
- jherdman 11y ago
  In this particular case it's because Bulma is using node-sass as a precompiler. I'd wager a guess this is true of most CSS packages that you're finding on NPM. Additionally, it's more pleasant to use than Bower (in my humble opinion).
- vayeate 11y ago
  There's nothing forcing you. The code is right there in the repo. You're welcome to download it via Github's download button, cloning via git, or NPM. NPM is a very helpful option because it's the fastest and easiest way to get it into my project and not have to copy and paste stuff around either from my OS UI or command line. Just `npm install` then possibly writing a line in a gulpfile to copy the css where I need it if using unaltered.
- igl 11y ago
  I blame webpack.
yawaramin 11y ago
I've been working on a toy CRUD app in Elm, after hearing that Richard Feldman wants to 'make the backend team jealous!' and wanting to see why I should be jealous. Anyway, I managed to quickly style it with Bulma yesterday, and I think it looks nice: https://dl.dropboxusercontent.com/u/130414/elm-doc-mgr/index.html https://dl.dropboxusercontent.com/u/130414/elm-doc-mgr/index...

146 points by dkannan 11y ago

Having previously built some medium-sized apps with bootstrap and material, this is something I'd like to try for my next project. It looks simpler than either of those other two, and has enough other stuff to make it usable out of the box, unlike something like skeleton which was too minimalist for me to use easily. I haven't used flexbox ever myself. Could someone summarize why flexbox makes this framework effective?

RickS 11y ago
Flexbox layouts "work like you think they work" for the most part, which is really nice, and far better than their predecessors. The 3 "holy shit we needed this before!" features IMO are: vertical centering, height matching (if you have 3 columns in a row, and one has more text, all 3 columns will have the same bottom position), and the ability to evenly distribute objects across space. check this out for more: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ caveat: flexbox support, while passably good, is still shaky in places.
- leeoniya 11y ago
  the ability to dynamically fill the remaining space is also huge.
SwellJoe 11y ago
"Could someone summarize why flexbox makes this framework effective?" Ever tried to center something vertically? Flex box does it easily. Is also makes it easier to do responsive layouts, with much simpler markup and styling.

RickS 11y ago

Did a quick pass of the docs, and the grid system seems to be opinionated/unconfigurable w/r/t changing column ratios as device width scales. Everything is 100% width at mobile size, and once you pass that breakpoint, there's no adjustment mechanism at any other size. That's a big step backwards from bootstrap's col-breakpoint-width, IMO. It also fails to address nesting columns within each other. This feels more like a rudimentary grid system that happens to have some button styles, rather than a "framework". If you want a bootstrap-like grid experience with flexbox and sans the bloat, I've had a decent experience with this: http://flexboxgrid.com/ http://flexboxgrid.com/

deleted 11y ago
[deleted]
ivan_ah 11y ago
Yeah http://bulma.io/documentation/grid/ http://bulma.io/documentation/grid/ could definitely use some improvement for different screen sizes, but the rest is very well styled...
Numberwang 11y ago
Do you have a a good resource for some bloat to go with that grid experience as well?
bybjorn 11y ago
Foundation Sites (F6) also comes with flexbox grid btw. It's optional, you can switch it on in the sass settings and use the same html markup as before.

SwellJoe 11y ago

Flexbox is lovely, and this framework looks great...but, does it work with crappy browsers (e.g. every IE version prior to Edge)?

RickS 11y ago
According to caniuse[1], IE support is janky, period. 1. http://caniuse.com/#feat=flexbox http://caniuse.com/#feat=flexbox
- jmknoll 11y ago
  IE 10 and 11 are supported with browser prefixes, so you're only losing out on 8 and 9, which constitute ~2 of all internet traffic. Some non-trivial percentage of IE 8 and 9 users have them installed only for specific websites and internal corporate sites. There just can't be that many people browsing the web with IE 8 and 9. Additionally, we need to draw the line somewhere, especially given how much easier flexbox makes front-end styling.
  - frik 11y ago
    Caniuse.com shows the global usage share statistics (based on data from StatCounter GlobalStats for December 2015) next to each entry. IE 7: 0.05% IE 8: 1.18% IE 9: 0.91% IE 10: 0.87% IE 11: 6.45% Edge 12: 0.67% Edge 13: 0% Edge 14: 0% For comparision: Chrome 47: 20.46% Chrome (Android) 47: 17.45% The full list: http://caniuse.com/usage-table http://caniuse.com/usage-table IE 8, IE 9 and IE 10 are still more widely used than Win10 with its Edge browser. Don't use flexbox for your start page, especially if you want to do business (SaaS). It will be completely broken in IE8/9 and look like shit. Corporate managers will close your website instantly.
- ry_ry 11y ago
  In practice 10 support is patchy, but can usually be fixed using the wonky old syntax and minimal hacking. For general use 11/Edge are fine. In fact, a usable desktop view for IE9 is relatively easy to frig with %widths and a handful of padding hacks.

deleted 11y ago

[deleted]

cfv 11y ago

This can be beautiful, but I'd need SOME KIND of back-compatible functionality, even if it's just to tell old IE users "hey you're totally missing on stuff, check this out"

inlineint 11y ago

It looks great. I think I will use it in my hobby projects instead of Bootstrap.

Tomte 11y ago

I haven't found a way to handle <aside> with Flexbox. Intended behaviour is that you're writing paragraphs of , then a that you wish to annotate, then the <aside>, then some more . The aside should be, well, on the side. In the margin. So far, with floating <aside> you need to have the <aside> before the that it belongs to, which is semantically false. I had hopes with Flexbox to finally solve this issue, but it doesn't look possible, because if you imagine it as a big grid of two columns, the text would have to flow through only the left column, while only the <aside> would have to be pushed to the right column.

nailer 11y ago
Wouldn't row-reverse fix that?
- deleted 11y ago
  [deleted]
jlukic 11y ago
If you use margin: auto on an element inside a flex container (for example margin-left:auto to float right), you can position a floated element in correct content order.
antsar 11y ago
Is this what you're looking to do? https://jsfiddle.net/sadz6va6/ https://jsfiddle.net/sadz6va6/ Disclaimer: New to flexbox myself. Might have committed some sins.
- Tomte 11y ago
  Yes. Thank you (also to the sibling commenters).
- qwyxzy 11y ago
  Nicely done.
deleted 11y ago
[deleted]

wanda 11y ago

Just as popular JavaScript libraries spawn many superfluous forks and microframeworks, the landing of Flexbox has resulted in dozens of these CSS 'frameworks' and grid systems: 1. http://basegui.de http://basegui.de 2. https://github.com/ButaneCSS/butanecss https://github.com/ButaneCSS/butanecss 3. http://juicedcss.com http://juicedcss.com 4. http://bowlingx.github.io/flexcss http://bowlingx.github.io/flexcss 5. http://codepen.io/geoffyuen/pen/ogrPbZ http://codepen.io/geoffyuen/pen/ogrPbZ 6. https://github.com/meerita/flexsasscandy https://github.com/meerita/flexsasscandy 7. http://getmdl.io/components/index.html#layout-section/grid http://getmdl.io/components/index.html#layout-section/grid 8. https://kevinpy.com/Projects/Flexo https://kevinpy.com/Projects/Flexo 9. http://philippkuehn.github.io/gridilydidily http://philippkuehn.github.io/gridilydidily 10. http://stylusgrid.com http://stylusgrid.com 11. https://github.com/IonicaBizau/gridly https://github.com/IonicaBizau/gridly 12. https://github.com/colourgarden/avalanche https://github.com/colourgarden/avalanche 13. https://milligram.github.io/ https://milligram.github.io/ 14. https://github.com/ButaneCSS/butanecss https://github.com/ButaneCSS/butanecss 15. http://bulma.io/documentation/grid/ http://bulma.io/documentation/grid/ 16. http://gridlex.devlint.fr/ http://gridlex.devlint.fr/ 17. http://crabcss.com http://crabcss.com and that's but a fraction of the full list. I haven't bothered to sit down and actually assess whether these flexbox grids actually differ from each other (my gut says that it's not possible for them to differ too much). My gut also tells me that there has to be an apex, an optimal Flex-based grid from which there can be no improvement. I think a big part of the problem of why websites all look a bit similar is because they're all developed using Bootstrap, Bourbon or Foundation, and apparently on the rare occasion where a front-end framework is not used, an offshoot or "heavily-inspired by" alternative is used instead. Nobody is thinking about what /could/ be, but rather what can be done in the least time to produce the best approximation of a contemporary website. Nobody wants to push the boundaries. Maybe we've reached an optimal paradigm for the design and layout of websites. I don't think so. I always implement my own CSS, mainly because I really don't like carrying frameworks around. If I need all of a framework's features, I'll consider using it. Since I never need all of a framework's freatures, that never happens. If I ever do need a full front-end framework's worth of features, here's a framework that seems flexible, modular and solid to me: http://www.basscss.com/ http://www.basscss.com/ and if you want a great grid, look at this: http://peterramsing.github.io/lost/ http://peterramsing.github.io/lost/ and if you want to wait for a more powerful future grid tool, investigate the CSS Grid Spec: http://gridbyexample.com/ http://gridbyexample.com/ http://gridbyexample.com/examples/page-layout/ http://gridbyexample.com/examples/page-layout/ http://abookapart.com/products/get-ready-for-css-grid-layout http://abookapart.com/products/get-ready-for-css-grid-layout https://24ways.org/2015/grid-flexbox-box-alignment-our-new-system-for-layout/ https://24ways.org/2015/grid-flexbox-box-alignment-our-new-s... https://rachelandrew.co.uk/archives/2015/11/03/three-years-with-css-grid-layout/ https://rachelandrew.co.uk/archives/2015/11/03/three-years-w... https://rachelandrew.co.uk/archives/2015/04/14/grid-layout-automatic-placement-and-packing-modes/ https://rachelandrew.co.uk/archives/2015/04/14/grid-layout-a...

deleted 11y ago

[deleted]

romanovcode 11y ago

Am I the only one who doesn't understand why every single piece of code needs to be installed through npm? Even css? Come on!

jherdman 11y ago
In this particular case it's because Bulma is using node-sass as a precompiler. I'd wager a guess this is true of most CSS packages that you're finding on NPM. Additionally, it's more pleasant to use than Bower (in my humble opinion).
vayeate 11y ago
There's nothing forcing you. The code is right there in the repo. You're welcome to download it via Github's download button, cloning via git, or NPM. NPM is a very helpful option because it's the fastest and easiest way to get it into my project and not have to copy and paste stuff around either from my OS UI or command line. Just `npm install` then possibly writing a line in a gulpfile to copy the css where I need it if using unaltered.
igl 11y ago
I blame webpack.

yawaramin 11y ago

I've been working on a toy CRUD app in Elm, after hearing that Richard Feldman wants to 'make the backend team jealous!' and wanting to see why I should be jealous. Anyway, I managed to quickly style it with Bulma yesterday, and I think it looks nice: https://dl.dropboxusercontent.com/u/130414/elm-doc-mgr/index.html https://dl.dropboxusercontent.com/u/130414/elm-doc-mgr/index...