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

31–40 of 43 posts

Re: Bulma: Modern CSS framework based on Flexbox

#31

Post by vayeate »

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!

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.

Re: Bulma: Modern CSS framework based on Flexbox

#32

Post by Tomte »

antsar wrote: post #28
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.

Yes. Thank you (also to the sibling commenters).

Re: Bulma: Modern CSS framework based on Flexbox

#33

Post by jessedhillon »

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…

IMO the optimal framework would be Google's Angular-Material, except for the fact that it is massively coupled with AngularJS for no reason. The assigning of layouts to row/columns, and dividing the space within are done very easily. Someone would be wise to use their system as the basis of a great CSS-only framework.

https://material.angularjs.org/latest/

Re: Bulma: Modern CSS framework based on Flexbox

#34

Post by hackerboos »

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…

If I was starting a new site today I'd roll with:

- PostCSS (with plugins: cssnext, variables, mixins, nested, autoprefixer)

- Lost Grid

- Typographic (http://corysimmons.github.io/typographic)

- Boy - if I had to support legacy browsers (https://github.com/corysimmons/boy)

Re: Bulma: Modern CSS framework based on Flexbox

#35

Post by qwyxzy »

antsar wrote: post #28
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.

Nicely done.

Re: Bulma: Modern CSS framework based on Flexbox

#36

Post by wanda »

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…

FYI: I included ButaneCSS twice by mistake.

Re: Bulma: Modern CSS framework based on Flexbox

#37

Post by yawaramin »

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

Re: Bulma: Modern CSS framework based on Flexbox

#38

Post by [deleted] »

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…

[deleted]

Re: Bulma: Modern CSS framework based on Flexbox

#40

Post by wanda »

jessedhillon wrote: post #33
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…

IMO the optimal framework would be Google's Angular-Material, except for the fact that it is massively coupled with AngularJS for no reason. The assigning of layouts to row/columns, and dividing the space within are done very easily. Someone would be wise to use their system as the basis of a great CSS-only framework. https://material.angularjs.org/latest/

I've looked at this for all of three minutes, but it appears that it's basically an Angular version of Masonry with a dash of flexbox.

Masonry is something I'd love to implement in pure CSS, but it's not really possible. You need to know the heights and then be able to position your grid items absolutely, it's not something that can be done dynamically without using JavaScript.

You can use CSS3 Columns, but then your content is going to be displayed in a counter-intuitive order. It works great for a photo grid or Pinterest-style site, but most cases require some kind of intuitive display order. I am especially thinking of e-commerce, where it's imperative to offer the end-user the ability to sort products alphabetically, and search results in terms of relevance or whatever.

Post reply on HN