7 ms·

Bulma 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 at

by koboll 8y ago

Bulma 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 ago
Do you have any good grid references? I know how it conceptually works but struggle to apply it
- adventured 8y ago
  Here 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 ago
    Thanks!
- ataylor32 8y ago
  https://www.youtube.com/playlist?list=PLu8EoSxDXHP5CIFvt9-ze3IngcdAc2xKG https://www.youtube.com/playlist?list=PLu8EoSxDXHP5CIFvt9-ze...
- ReverseCold 8y ago
  Grid: http://cssgridgarden.com http://cssgridgarden.com Flexbox: http://flexboxfroggy.com http://flexboxfroggy.com
- tacotime 8y ago
  Wes Bos' series is nice if you're looking for something a little more long-form/hand-holdy. I have the same problem and was working through it earlier today. Comes with exercise files for each newly introduced concept. You have to provide your email. https://cssgrid.io/ https://cssgrid.io/
audiolion 8y ago
If you extracted just the grid piece from Bulma then your comparison works. But Bulma also comes with design choices for buttons, cards, modals, and other common web components. Bulma is modular though so if you dont want a piece you dont need to take it. While I haven't found a project to use it on, I think it could be fun to work with if you dont want to design everything yourself.
reaperducer 8y ago
grid is the most attractive and powerful option I like grid, but I think too many people believe it's the cure-all for everything. For me, grid is not an option. The eight web sites I currently maintain all have to support IE11, so no grid. Plus, grid doesn't handle certain design elements as well as Flexbox, or even inline-block do. There are certain design guidelines specified by certain government agencies and the consultants I work with that are simply not possible in grid. I use grid in a few of my personal projects and it's useful for those. But grid is just another tool, like Flexbox. As for Bulma, I watched the video and it doesn't appear to be anything special to me. It doesn't seem to solve any problems that a dozen other CSS frameworks do. Also, if you're going to put out a 2:43 pitch video, at least make your fake web site look interesting, not like the other 542,234,280 other identical-looking Bootstrap web sites out there.
- dyeje 8y ago
  Out of curiosity, could you give an example of a design guideline from a government / consultant that's not possible in grid?
  - reaperducer 8y ago
    Since I'm not on my work computer, I can't cite any of the documents. But a lot of it has to do with button and box alignment, especially when there is an unknowable number of elements, each of unknown length. As mentioned in my previous comment, grid isn't possible because I have to support a sizable number of IE11 and WinXP visitors. One example of where things fall down in Flexbox is when you have a number of boxes/buttons in what is, to the user, a grid. If you use justify-content: space-around to match the designer's specifications, you end up with orphans centered in the last row. To meet ease of reading guidelines, those orphans should be left-aligned. I think it looks like low-grade dog food, but there's a lot of eye-tracking research that shows people ignore items centered in the last row because they think it's decoration, or an ad. If it's left-aligned, that signals that it's part of the rest of the grid. It's in these cases that inline-box is still the best way to go. Speaking of ads, one thing I've learned in the last two years from all these research studies is that pretty much anything put in a right column is ignored. People have become inured to ads there that they nearly always assume that content is an ad, even if it's navigation. So one of the big guidelines is that navigation is always either 1, front-and-center; 2, top-line; or 3, left column, even in right-to-left languages.

by koboll 8y ago

deleted 8y ago

[deleted]

pspeter3 8y ago

Do you have any good grid references? I know how it conceptually works but struggle to apply it

adventured 8y ago
Here 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 ago
  Thanks!
ataylor32 8y ago
https://www.youtube.com/playlist?list=PLu8EoSxDXHP5CIFvt9-ze3IngcdAc2xKG https://www.youtube.com/playlist?list=PLu8EoSxDXHP5CIFvt9-ze...
ReverseCold 8y ago
Grid: http://cssgridgarden.com http://cssgridgarden.com Flexbox: http://flexboxfroggy.com http://flexboxfroggy.com
tacotime 8y ago
Wes Bos' series is nice if you're looking for something a little more long-form/hand-holdy. I have the same problem and was working through it earlier today. Comes with exercise files for each newly introduced concept. You have to provide your email. https://cssgrid.io/ https://cssgrid.io/

audiolion 8y ago

If you extracted just the grid piece from Bulma then your comparison works. But Bulma also comes with design choices for buttons, cards, modals, and other common web components. Bulma is modular though so if you dont want a piece you dont need to take it. While I haven't found a project to use it on, I think it could be fun to work with if you dont want to design everything yourself.

reaperducer 8y ago

grid is the most attractive and powerful option I like grid, but I think too many people believe it's the cure-all for everything. For me, grid is not an option. The eight web sites I currently maintain all have to support IE11, so no grid. Plus, grid doesn't handle certain design elements as well as Flexbox, or even inline-block do. There are certain design guidelines specified by certain government agencies and the consultants I work with that are simply not possible in grid. I use grid in a few of my personal projects and it's useful for those. But grid is just another tool, like Flexbox. As for Bulma, I watched the video and it doesn't appear to be anything special to me. It doesn't seem to solve any problems that a dozen other CSS frameworks do. Also, if you're going to put out a 2:43 pitch video, at least make your fake web site look interesting, not like the other 542,234,280 other identical-looking Bootstrap web sites out there.

dyeje 8y ago
Out of curiosity, could you give an example of a design guideline from a government / consultant that's not possible in grid?
- reaperducer 8y ago
  Since I'm not on my work computer, I can't cite any of the documents. But a lot of it has to do with button and box alignment, especially when there is an unknowable number of elements, each of unknown length. As mentioned in my previous comment, grid isn't possible because I have to support a sizable number of IE11 and WinXP visitors. One example of where things fall down in Flexbox is when you have a number of boxes/buttons in what is, to the user, a grid. If you use justify-content: space-around to match the designer's specifications, you end up with orphans centered in the last row. To meet ease of reading guidelines, those orphans should be left-aligned. I think it looks like low-grade dog food, but there's a lot of eye-tracking research that shows people ignore items centered in the last row because they think it's decoration, or an ad. If it's left-aligned, that signals that it's part of the rest of the grid. It's in these cases that inline-box is still the best way to go. Speaking of ads, one thing I've learned in the last two years from all these research studies is that pretty much anything put in a right column is ignored. People have become inured to ads there that they nearly always assume that content is an ad, even if it's navigation. So one of the big guidelines is that navigation is always either 1, front-and-center; 2, top-line; or 3, left column, even in right-to-left languages.