Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Bulma: Modern CSS framework based on Flexbox

github.com

Post reply on HN
Print view View original

21–30 of 43 posts

Re: Bulma: Modern CSS framework based on Flexbox

#21

Post by wanda »

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

2. https://github.com/ButaneCSS/butanecss

3. http://juicedcss.com

4. http://bowlingx.github.io/flexcss

5. http://codepen.io/geoffyuen/pen/ogrPbZ

6. https://github.com/meerita/flexsasscandy

7. http://getmdl.io/components/index.html#layout-section/grid

8. https://kevinpy.com/Projects/Flexo

9. http://philippkuehn.github.io/gridilydidily

10. http://stylusgrid.com

11. https://github.com/IonicaBizau/gridly

12. https://github.com/colourgarden/avalanche

13. https://milligram.github.io/

14. https://github.com/ButaneCSS/butanecss

15. http://bulma.io/documentation/grid/

16. http://gridlex.devlint.fr/

17. 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/

and if you want a great grid, look at this: 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/examples/page-layout/

http://abookapart.com/products/get-ready-for-css-grid-layout

https://24ways.org/2015/grid-flexbox-box-alignment-our-new-s... https://rachelandrew.co.uk/archives/2015/11/03/three-years-w... https://rachelandrew.co.uk/archives/2015/04/14/grid-layout-a...

Re: Bulma: Modern CSS framework based on Flexbox

#22

Post by k__ »

wanda wrote: post #21

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 2. https://github.com/ButaneCSS/butanecss 3. http://juicedcss.com 4. http://bowlingx.github.io/flexcss 5. http://codepen.io/geoffyuen/pen/ogrPbZ 6. https://github.com/meerita/flexsasscandy 7. http://getmdl.io/components/in…

It really comes down to dev speed. Thats why I don't write CSS anymore

I can simply sprinkle CSS classes around and then ask someone to create a Bootstrap theme for me.

Re: Bulma: Modern CSS framework based on Flexbox

#23

Post by [deleted] »

wanda wrote: post #21

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 2. https://github.com/ButaneCSS/butanecss 3. http://juicedcss.com 4. http://bowlingx.github.io/flexcss 5. http://codepen.io/geoffyuen/pen/ogrPbZ 6. https://github.com/meerita/flexsasscandy 7. http://getmdl.io/components/in…

[deleted]

Re: Bulma: Modern CSS framework based on Flexbox

#25

Post by leeoniya »

RickS wrote: post #5
mjibson wrote: post #2

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 effectiv…

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…

the ability to dynamically fill the remaining space is also huge.

Re: Bulma: Modern CSS framework based on Flexbox

#26

Post by [deleted] »

nailer wrote: post #19
Tomte wrote: post #15

I haven't found a way to handle with Flexbox. Intended behaviour is that you're writing paragraphs of , then a that you wish to annotate, then the , then some more . The aside should be, well, on the side. In the margin. So far, with floating you need to have the 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 y…

Wouldn't row-reverse fix that?

[deleted]

Re: Bulma: Modern CSS framework based on Flexbox

#27

Post by jlukic »

Tomte wrote: post #15

I haven't found a way to handle with Flexbox. Intended behaviour is that you're writing paragraphs of , then a that you wish to annotate, then the , then some more . The aside should be, well, on the side. In the margin. So far, with floating you need to have the 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 y…

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.

Re: Bulma: Modern CSS framework based on Flexbox

#28

Post by antsar »

Tomte wrote: post #15

I haven't found a way to handle with Flexbox. Intended behaviour is that you're writing paragraphs of , then a that you wish to annotate, then the , then some more . The aside should be, well, on the side. In the margin. So far, with floating you need to have the 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 y…

Is this what you're looking to do?

https://jsfiddle.net/sadz6va6/

Disclaimer: New to flexbox myself. Might have committed some sins.

Re: Bulma: Modern CSS framework based on Flexbox

#30

Post by jherdman »

romanovcode wrote: post #29

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!

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).
Post reply on HN