CSS Front-end Frameworks with comparison

http://usablica.github.com/front-end-frameworks/compare.html?v=2.0

by afshinmeh • 13 years ago

98 35 13 years ago

usablica.github.com

KaoruAoiShiho• 13 years ago

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

afshinmeh11• 13 years ago

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

Cyranix• 13 years ago

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?

jbarrow• 13 years ago

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.

afshinmeh11• 13 years ago

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

ethanpil• 13 years ago

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

lowboy• 13 years ago

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/

johnx123-up• 13 years ago

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

FuzzyDunlop• 13 years ago

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

afshinmeh11• 13 years ago

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

leeoniya• 13 years ago

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.

afshinmeh11• 13 years ago

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

benburton• 13 years ago

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

afshinmeh11• 13 years ago

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

brianfryer• 13 years ago

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

lignuist• 13 years ago

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

afshinmeh11• 13 years ago

Sure, yeah.

daeken• 13 years ago

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.

kurrent• 13 years ago

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.

afshinmeh11• 13 years ago

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

maebert• 13 years ago

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

afshinmeh11• 13 years ago

Cool!

zalew2• 13 years ago

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.

afshinmeh11• 13 years ago

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?

zalew2• 13 years ago

np, submitted there

d232• 13 years ago

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.

afshinmeh11• 13 years ago

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

Hytosys• 13 years ago

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.

jimymodi• 13 years ago

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

afshinmeh11• 13 years ago

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

bung• 13 years ago

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

netfeed• 13 years ago

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

gotofritz• 13 years ago

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?

CSS Front-end Frameworks with comparison

Related Stories