ui 비교

http://www.monolinea.com/css-frameworks-comparison/

The heavyweights

The most common, the most known, the most complete (arguably). I’m not going to go deep into this category, since there is more than enough info on these around.

Bootstrap

The granddady of all frameworks, the most known and used.

Pros:

Huge support & community. Lots of plugins, addons, styles, forks, ports… Very actively developed & supported.

Cons:

Big, bloated (you can customize and leave out stuff, but it’s big by default). Opinionated about design choices.

Specs (v. 3.03):

• Uses: LESS, jquery, glyphicons
• Features: grids (mobile-first), ui elements, s, customizer, javascript, the kitchen sink
• Suports: IE 8+

Foundation

The other big framework, differs from bootstrap in philosophy: it’s meant to be more of a starting point than a do-it-all solution.

Pros:

Leaner. More neutral (and IMO, better looking) base styles. Great documentation. Training. Backed by Zurb.

Cons:

Less adoption, less resources. Lack of support for IE8-, which can be a dealbreaker for some client sites.

Specs (v. 5.0.2):

• Uses: SASS (SCSS), jquery, foundation icon fonts
• Features: grids (mobile-first), ui elements, customizer, javascript, the kitchen sink
• Suports: IE 9+
• Site • GitHub

The middleweights

I looked at lesser known but full-featured frameworks, and these two stood out.

Gumby

I had heard of Gumby a while ago, when it was basically a grid system, so I was pleasantly surprised to see that it has evolved into a great framework with a few extras like tiled layouts and retina images.

Pros:

Nice looking! Complete, some unique features. Leaner than the heavyweights. Good documentation, downloadable PSDs.

Cons:

Less than confidence-inspiring name ;) . Unknown, not very popular.

Specs (v. 2.6):

• Uses: SASS , jquery,
• Features: grids (based on 960 grid), ui elements, customizer, javascript
• Suports: IE 8+
• Site • GitHub

Groundwork

This is a recent discovery, I had not really heard about this framework, and found it to be really complete. It features a pretty solid- looking grid that lets you specify how containers behave at different breakpoints (like the big boys) and responsive typography.

Pros:

A lot of emphasis on animation, some unique features.

Cons:

Not very good documentation (little more than examples). Unknown, feels young.

Specs (v. 2.6):

• Uses: SASS (SCSS) , jquery,
• Features: grids , ui elements,  javascript
• Suports: IE 8+
• Site • GitHub

The lightweights

When you don’t want every element under the sun, but rather a base with grids, type and the most common ui elements (forms, navs) these are a good bet:

Pure

Developed by Yahoo, and apparently the successor of YUI, this framework seems to be the minimalist utopia of a framework. Even the name sounds light and airy.

Pros:

Tiny. Supertiny. And you can include only the modules you want (base, grids, tables, forms, navs, buttons). You can even link to it from Yahoo’s CDN.  Nice looking, with minimal design. IE7 support, which is rare these days.

Cons:

My biggest problem is the grid. It was originally built using inline-block elements with negative letter-spacing. But that meant that it could break the letter-spacing on every element on a page if you used webfonts or did not have certain fonts installed. There are workarounds to this, but it seems to be missing the point of using a framework. The latest version(s?) seem to be moving towards a flexbox-based grid for browsers that support it, but it leaves me uneasy knowing Pure can fail in certain browser/OS combos.

Pure has no LESS/SASS, which means you’ll have to do things the old-fashioned way. They do have a skin builder, but it seems pretty rudimentary.

Specs (v. 0.3.0):

• Uses:  jquery
• Features: grids , basic ui elements,  javascript
• Suports: IE 7+
• Site • GitHub

Base

Even the name sounds just about right. A base to build something on. It’s built on a 960 grid system, and some very basic and barely styled ui elements.

Pros

Small, simple, hardly any styles to override. Wide browser support. Choose from LESS or SASS

Cons:

No advanced grid options.

Specs (v. 2):

• Uses:  LESS or SASS
• Features: grids , basic ui elements,  basic javascript
• Suports: IE 7+
• Site

Kube CSS

Kube describes itself as minimalistic, and it is- both in style and features.

Pros:

Minimal javascript. Good set of features, no more and no less.

Cons:

Not sure how actively it’s developed, there seems to be little news around it. Default styles are not the best-looking. Little support and documentation (but then again, probably not much is needed).

Specs (v. 2):

• Uses:  LESS
• Features: grids , basic ui elements,  javascript
• Suports: IE 8+
• Site 
  

Honorable mentions

• Semantic UI – like the name says, focused on semantic classes and flexible  HTML elements, with nice-looking and well-thought out ui elements. Made with LESS.
• Kickoff – Nice-sized framework with percentage-based grids, type, and minimal UI elements. Made with SASS. Awesome orange color.
• KnaCSS- small library focused on OOCSS, with grids and positioning. Has both LESS and SASS versions.
• Ink- Suprisingly complete framework, with grids, ui elements, icons. Made with LESS.

My winners

For the heavy lifting, I’ll go with Bootstrap. Foundation seems to be better, but I don’t think Bootstrap’s ecosystem can be beaten. If I use Bootstrap, I know I’ll have all the functionality, tutorials, support, plugins, etc that I need.

For the basics only, I’ll try out Base. Pure was very very close, but the grid issue makes me uneasy. Pure is still young, and I have faith in it’s future.

Any potential winners that I’m missing?