[GroundWorkCSS] Twitter Bootstrap의 새로운 대안

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도 좋다