Bootstrap 의 업그레이드 도구? Kickstrap

게시자: 대문 demun 카테고리: 퍼블리셔/Bootstrap 2012.07.08 06:00
얼마전 부트스트랩을 소개한적이 있었습니다. 보자마자 티스토리 스킨에 적용을 해보았지요....
Bootstrap - 홈페이지 개발 및 디자인을 위한 혁명적인 도구 => http://demun.tistory.com/2133
부트스트랩(Bootstrap)에 관한 유용한 도구 =>  http://demun.tistory.com/2136 

부트스트랩으로 만들어본 티스토리 스킨 참고 이미지.
그냥 흰색 배경에 사이드바는 아코디언 메뉴로 만들어 봤습니다. 
상단 네비게이션은 부트스트랩에서 지원하는 드롭다운으로 만들었구요.
또 하단에는 탭메뉴를 적용해봤습니다.



부트스트랩도 완전하지는 않았습니다. 아니 티스토리에 적용하는데 잇어 단점도 보이더군요.
특히 자바스크립트 부분이 티스토리는 치환자를 사용하기 때문에 아코디언 부분이 적용이 잘 안되더군요.
이번에 소개하는 kickstrap 은 bootstrap 을 좀더 보완해서 이것 저것 많더군요.
역시 보자마자 시간을 내서 뚝딱 티스토리 스킨으로 만들어 봤습니다.

kickstrap은 녹색테마가 기본입니다.
네비게이션이 녹색이지요..기본은 부트스트랩과 같습니다.


티스토리에서 메인메뉴에 해당하는 블로그 메뉴가 치환자가 있는관계로 그냥은 사용하지 못합니다.
따로 html 을 마크업해서 드롭다운을 적용했습니다.
 


본문 상단의 빵부스러기 현재위치는 부트스트랩에서 지원하는것과 같습니다.약간의 트윅이 필요하구요.
관리자로 로그인했을때 보여지는 수정화면은 색깔을 달리해봤습니다. 물론 이색도 다 지원합니다.
 


댓글부분은 부트스트랩과 비슷합니다.
단 킥스트랩은 웹폰트를 사용해서 아이콘을 표시합니다. 부트스트랩 보다 더 많은 아이콘을 지원합니다.
하단의 그림중에서 comment list 는 웹폰트를 적용한 것입니다.
 


kickstrap 과 bootstrap 과의 다른점은 아래와 같습니다.

  Bootstrap Kickstrap
 아이콘 이미지 사용  이미지와 웹폰트를 이용 (IconMoon)
 html 마크업 html5.js 포함 마크업  html5 boilerplate 이용 
 그리드 시스템  격자 사용  OLCG: One Line CSS Grid
(css 한줄로 격자만듬)
 form  부트스트랩용 form 마크업
(이것도 상당이 좋습니다)
 Chosen Select Boxse(더막강)
jQuery를 이용한 셀렉트박스 
 css3  일반 css3 이용  animate 추가(더막강)
 Progress bars 이것도 좋음   이건 더 좋음
 JS Plugins 상당이 좋음.다양함  부트스트랩+jGrowl

결과론적으로 비교표에서는 Kickstrap 이 더 좋다고 나오네요.....
아무래도 부트스트랩에 몇가지 더 추가함으로써 기능적으로는 더 막강한 재료를 이용할수 있다는 건 사실입니다.
하지만 부트스트랩만으로도 휼륭한 테마를 만들수가 있습니다.
물론 제가 해보니 부트스트랩만으로는 힘듬니다. 추가적으로 있어야 할건 있어야지요.

여기에 킥스트랩은 더 추가됨으로써 활용의 폭은 더 있으나 이것도 마찬가지로 이것만으로는 휼륭한 테마가 나오지는 않음.
물론 두개다 좋은것인것만은 사실입니다.

원문이 전부 영어라서....활용하는데 있어 어려움이 있습니다.
아는 방법은 직접 해보는것....

여러분도 활용해보세요. 외국에서는 이것을 활용한 테마와 이야기들이 많이 있네요....
Bootstrap =>  http://twitter.github.com/bootstrap/index.html 
Kickstrap =>   http://ajkochanowicz.github.com/Kickstrap/index.html
신고

댓글