CSS Front-end Frameworks with comparison | Hacker News Reader

CSS Front-end Frameworks with comparison

usablica.github.com

98 pointsafshinmeh35 comments

Really great comparison chart. One thing that I, personally, would like to see is the relative sizes of each of the libraries (or at least their core, minified includes). While it certainly wouldn't control my decision of which framework to use, it would certainly be interesting to see which frameworks achieve what functionality with x amount of code.

Also helpful would be a brief list of functionality so you can make a comparison more fairly. Bootstrap's minified 122kB css weight (with responsive) is huge compared to that of Skeleton's 12kB, but the former has more features. Or Toast, with it's 3.7kB min size but even fewer features than Skeleton.

Skeleton: http://www.getskeleton.com/

Toast: http://daneden.me/toast/

Bootstrap: http://twitter.github.com/bootstrap/

FWIW, I think, Helium is the winner here under 30kb with Bootstrap look https://news.ycombinator.com/item?id=5108821

Yeah I'm agree, good idea. We'll add it for next version.

+1 This is important. Compressed and non-compressed size.

only min+gzip. The other sizes do not matter one bit, unless you like to blindly intuit how much potential inline documentation there is.

Foundation 4 is ie9+ while there is a snippet to enable the grid for ie8 and the rest should mostly work just fine http://foundation.zurb.com/docs/support.html Foundation 3, which is still supported, is ie8+ http://foundation.zurb.com/old-docs/f3/support.php

Bootstrap will also soon drop ie7 support in the 3.x branch.

Thanks for your information and excuse me for this problem. We just manage this project on Github, https://github.com/usablica/front-end-frameworks

Could you please report a bug for us?

np, submitted there

I hate to be that guy, but the chart would be a lot more useful if the colors were used to communicate something rather than just being pretty. Ideally items that were better (e.g. were compatible with older versions of a browser) would have more visual weight than those that were worse. The less/sass and tablet/desktop sections do it better, but the browser section is pretty useless.

Thanks for your suggestion, but can I know why you think the browsers compatibility column is useless? Should I change it to something better?

I think he means that the browser compatibility column should take advantage of color as well. Maybe more attractive/brighter colors could be representative of frameworks that are compatible with older browsers.

Exactly. Browser compatibility is an important factor and is definitely useful; it would just be nice if a quick glance could tell me whether a particular framework was "more" or "less" compatible.

I really like Bourbon Neat: http://neat.bourbon.io/

Hhhm, nice framework. We'll add it for next version, thanks.

Please do! Bar none, it's my favorite CSS framework out there!

Missing root-css which is based on Stylus, and is imo the best framework.

Could you please submit an issue on our Github for that?

Thanks for the tip! (For those who needed to search, as I did: http://roots.cx/css/)

Do you know of any other Stylus-based frameworks, for comparison?

Great. It would be nice, to compare the size in KB also.

Sure, yeah.

More detailed comparison of LESS frameworks: https://coderwall.com/p/spkngq

Cool!

Great list. What criteria are you using to sort this list?

I think it would be helpful to show the date of last development activity for each framework, be it a most recent github commit or release date of latest version. Some of the frameworks haven't been updated in over 3 years and it would be nice to distinguish these quickly.

Currently there's no mechanism for their sorting, but we'll add it for next versions, good idea.

I used 960gs for the first time last night, to build the template for http://daeken.com/ (had to finally switch from Posterous). It was amazingly simple, even for someone completely CSS brain-dead. Really can't say enough good things about it.

neat. not digging the contrast in the browser section though. also, is there really a need to show the huge barely visible browser icon next to each figure? just use browser icons (in their native colors) as column headers.

Thanks. Yeah good idea, I think we can change the table to prevent redundant data.

Am I the only one looking at the 34 items in the list (34!!) and thinking "do we really need all of these?" Isn't the sheer volume of new stuff constantly coming out gone a bit out of hand?

What is the meaning of "SASS" and "LESS" column ?

Shows the stylesheet language that used in the framework. lesscss.org or sass-lang.com

This feels a bit sneaky: http://cl.ly/image/3c0A471T1K1X

Ow, sorry :) I think we should change the text of the box.

Sorry, but didn't someone release one of these all of two weeks ago? Sad times...

Oh, Block's grid system looks sweet, I've got to take a better look at that.

Reply on news.ycombinator.com