Bootstrap을 사용하는 것이 너무 식상하다면 새로나온 CSS Framework인 GroundWorkCSS를 사용해 보자. Bootstrap이 도시적 간편함이 묻어 있다면 GroundWorkCSS는 인간미 있는 편안한 전원생활을 즐기는 느낌이랄까?
1. 설정
- 홈페이지 상단 우측 "Templates" 옆에 다운로드 아이콘 클릭 (GitHub Repository)
- 중요파일
+ css/groundwork.css
+ js/groundwork.all.js
- 옵션파일
+ css/groundwork-ie.css (IE Compatibility)
+ js/libs/html5shiv.min.js (IE Compatibility)
+ css/font-awesome-ie7.min.css (IE Compatibility)
+ js/plugins/jquery.cycle2.js (Required for Cycle2)
- 설정
// HTML head 안에
<link type="text/css" rel="stylesheet" href="/css/groundwork.css">
<!--[if IE]><link type="text/css" rel="stylesheet" href="/css/groundwork-ie.css"><![endif]-->
<!--[if lt IE 9]><script type="text/javascript" src="/js/libs/html5shiv.min.js"></script><![endif]-->
<!--[if IE 7]><link type="text/css" rel="stylesheet" href="/css/font-awesome-ie7.min.css"><![endif]-->
// HTML 최하단에
<script type="text/javascript" src="/js/plugins/jquery.cycle2.js"></script>
<script type="text/javascript" src="/js/groundwork.all.js"></script>
- jquery.cycle2.js 는 뭐지? 이미지 슬라이드 기능이다
2. 기능
- Bootstrap에서 제공하는 font typography, button, tab, menu, grid, etc등은 기본 제공한다
- RWD (Responsive Web Design) 를 지원한다
- 웹화면을 위한 Template Layout도 제공한다
- 단 Bootstrap의 Javascript로 첨부한 기능을 전부 만족하진 못하지만 jQuery Plugins 통해서 보충하면 될듯함
- 제공하는 Components
<참조>
- 홈페이지 : http://groundwork.sidereel.com/
- 저장소 : https://github.com/groundworkcss/groundwork
- 다양한 CSS Framework 들 비교 : 개인적으로 Metro UI도 좋다
'HTML5, CSS3 > CSS' 카테고리의 다른 글
| [Bootstrap] jQuery UI와 Angular.js 사이에서 (2) | 2013.11.28 |
|---|---|
| [UI Kit] CSS Framework 어떤 것을 사용할 것인가? (1) | 2013.11.27 |
| [RWD] 반응형 웹 디자인 - 개념 잡기 (0) | 2013.05.09 |
| [Compass] 이해하기 (0) | 2013.04.20 |
| [Sass] Syntactically Awesome Style Sheet (0) | 2013.04.20 |
