[ css ] 최고의 반응형 CSS 프레임워크 18선 > html&css

1. Bootstrap

가장 많은 사람들이 쓰고 가장 널리 알려진 부트스트랩입니다. LESS를 사용하였으며 12컬럼 반응형 그리드 시스템, 

수많은 위젯, 컴포넌트, 자바스크립트 플러그인을 지원하며 다운받을때 원하는 기능만 커스터마이즈 할수있습니다.

2. Foundation

013년 2월에 최초의 Mobile first 프레임워크라는 캐치로 릴리즈된 Foundation4. Sass와 Compass를 사용

부트스트랩보다 더 오래된 프레임워크로 현재 부트스트랩 아성에 버티는 거의 유일한 프레임워크

https://foundation.zurb.com/

3. Pure: CSS Framework

부트스트랩같은 여타 프레임워크들이 Modernizr를 싸용하는 반면 Pure는 nomalize.css를 사용하여 기본 레이아웃에 자바스크립트를 배제한것이 특징

아주 작은 사이즈의 css 파일단위로 쪼개서 레이아웃이나 버튼, 테이블같은 컴포넌트들을 원하는것만 골라 쓸수있다는 장점

4. Skeleton

반응형, 모바일 친화적인 개발이 가능한 작은 보일러플레이트

가벼운 960 그리드기반으로 사이트의 기초를 빠르게 설계할 수 있다

5. Base Framework

LESS로 개발된 12컬럼 960px 그리드 기반의 CSS 프레임워크

컴포넌트, 위젯등이 올인원 패키지로 배포

6. Gumby Framework

SASS와 Compass로 개발된 반응형 960 그리드 기반의 프레임워크입

부트스트랩과 같이 버튼, 폼, 네비게이션과 같은 UI 키트를 제공해주며 다운받을때 Customize를 통해 원하는것만 취할 수 있다

7. Responsive Grid System

이름이 반응형 그리드 시스템

8. Columnal

1140px 기반의 반응형 CSS 프레임워크

스케치와 플랜짜는 용도의 그리드 시스템에 관한 PDF문서와 빠른 개발을 위한 wireframe 템플릿이 패키지

최신 브라우저를 위한 미디어 쿼리와 IE6와 7용 다운그레이드돤 12컬럼 984 또는 960px 와이드 버젼이 제공

이미지나 미디어의 폭이나 높이를 정의하지않아도 자동으로 줄여서 맞춰줌.

Creative Commons Attribution-ShareAlike 3.0 United States 라이센스입니다 확인후에 사용

9. InK

부트스트랩같은 빠른 개발이 가능한 HTML, CSS Javascript UI를 위한 프론트엔트 프레임워크

부트스트랩과 비슷하게 LESS와 FontAwesome을 사용

Ink는 DOM 조작, 편리한 통신단, 페이지 효과등을 위한 InK JS Core라 부르는 코어 자바스크립은 엔진을 가지고 있다

10. blueprint

블루프린트는 견고한 기틀을 제공해주는 CSS 프레임워크

사용이 쉽고 민감한 타이포그래피, 유용한 플러그인, 프린트용 스타일시트등을 제공

11. Bourbon NEAT

NEAT는 오픈소스 유동형 그리드 프레임워크

Sass와 믹스인 라이브러이인 Bourbon을 사용하여 몇분안에 충분히 강력한 반응형 레이아웃을 만들어낼 수 있다

12. Ingrid

인그리드는 각각의 유닛에 클래스 사용을 줄이는 것을 목표로 하고있는 가볍고 유동적인 CSS 레이아웃 시스템입

간섭이 적고 반응형 레이아웃을 재설계하기 쉬우며 확장성과 커스터마이징도 쉽다

13. Susy

Compass CSS 프레임워크의 플러그으로 자신만의 그리드 프레임워크를 만들 수 있다.

Static, Fluid 그리고 Magic 세가지 서로 다른 타입의 그리드를 만들 수 있다. 

https://code.tutsplus.com/tutorials/responsive-grids-with-susy--net-27893

14. YAML

2005년부터 지금까지 계속 개발되고있는 반응형 모듈화 CSS 프로임워크

잘 구성된 HTML5, CSS3 파일들과 4.6kb밖에 안되는 풋프린트, 독립적인 컨트롤이 가능한 그리드 컬럼 폭, 홈.

반응형의 유동성, 고정폭, 내장그리드. 하나의 완전한 웹사이트를 위한 완전한 세트의 구성들은 모든게 확장하나는건 둘째치고 개인홈에 링크달고 무료로 쓰던가 상업용으로는 돈내고 써야함

15. Less Framework 4

유동적인 다중컬럼 웹사이트 레이아웃을 만들수 있는 CSS 프레임워크

24px 행간에 최적화된 8컬럼 그리드와 그리드의 수직리듬과 평행하는 황금비율에 기초한 타이포그래피 세트를 포함

하나의 그리드기준으로 4개의 레이아웃과 3개의 타이포그래피 세트

16. Maxmert

부트스트랩처럼 보기좋고 신선하지만 더 새로운것들을 제공해주는 SASS기반의 프레임워크

그리드, 타이포그래피, 폼, 테이블, 버튼 같은 주요 UI뿐만 아니라 드랍다운 툴팁, 메뉴, 알림, 모달등의 위젯과 컴포넌트를 제공

클릭이벤트에따른 자바스크립트 애니메이션 효과가 아주 참신하고 인상적

여러 유명 JQuery라이브러리들을 잘 엮어 놓은 것 같다

다만 버전 0.0.2에서 멈춰있고 활성화되어있는 커뮤니티를 찾을 수 없는게 흠

17. Metro UI CSS

마이크로소프트에서 제공하는 메트로UI 디자인가이드를 따라 만든 독립적인 CSS 솔루션

메트로 타일즈, 알림, 버튼등 참신하지만 정교함이 떨어짐 

대부분의 쓸만한 메트로 CSS가 유료인받면 부트스트랩기반의 BootMetro와 비교해봐도 오픈소스 프로젝트로서 높은 완성도를 가지고있다

18. Fries

아시다시피 국내상황과 반대로 해외에서 모바일 개발의 기준은 여전히 아이폰이다

아이폰앱부터 만들고 아이폰에서의 퍼포먼스부터 챙긴다

Jquery Mobile같이 아이폰에서 정상동작하나 안드로이드에서 극악의 성능이 나오는 프레임워크들이 많이 있다

자바스크립트 라이브러리도 아이폰 룩을 가진 소스들이 많기 때문에 Fries는 아이폰룩을 벗어내고 안드로이드UI를 골라입혔다는 차원에서 반대로 참신한게 아닐까 생각됩니다. 

폰갭과의 연동성도 좋아서 안드로이드 UI기준의 모바일 웹/앱을 한번에 지원하기 좋을 듯