Twitter-bootstrap CSS 프레임워크

최근 웹개발 쪽에서는 Twitter에서 제공하는 CSS 프레임워크인 Bootstrap에 대한 관심이 높아졌습니다. 특히, Ryan Bates가 운영하는 그 유명한 Railscasts.com 에서는 2월28일 Twitter Bootstrap에 대한 기본사용법에 대한 스크린캐스트를 소개한 바 있는데, 저에게도 신선한 충격을 안겨 다 주었습니다.

이미지어제 그저께 이틀동안 http://lab.wordstory.net 웹사이트 스타일링변경 작업을 했습니다.

1인 개발자로 레일스 어플리케이션 작업을 하다보면 항상 웹 레이아웃과 스타일링이 변변치 못해서 유저들에게 깔끔한 느낌을 주지 못했습니다. 사실 웹사이트를 방문하다 보면 전체적인 디자인이 첫인상을 강하게 남게 되는데, 바로 이런 부분을 손쉽게 구현할 수 있는 훌륭한 스타일링 툴로서 적극적으로 추천합니다.

Twitter Bootstrap 공식 홈페이지를 방문해 보면 첫 느낌이 도큐먼트가 잘 준비되어 있어 마치 맛있는 자장면 한그릇을 연상케 합니다.

물론, 매우 깔끔한 느낌의 다양한 jQuery plugins도 지원하고 기본적으로 LESS css를 지원합니다. SASS에 익숙한 저로서는 조금 부담스러운 부분이었지만, 유료버전이기는 하나 Railscasts.com의 More on Twitter Bootstrap을 보면 쉽게 SASS스타일로 변경가능합니다.

여기서 simple_form 2 이라는 젬을 소개합니다. 물론 Ryan의 스크린캐스트에서 소개한 것이지만, 복잡한 form_for 헬퍼메소드를 간결하게 코딩할 수 있는 해 주는 매우 편리한 젬입니다. simple_form이 최근 2.0버전을 내놓으면서 bootstrap을 완벽지원하기 시작했습니다.

또한 flash 메시지도 완벽하게 표현할 수 있고, form validation 부분도 멋지게 표시해 줍니다.

아참 bootstrap-will_paginate 젬이란 것이 있어서 will_paginate의 bootstrap 버젼도 있더군요.

아직 운영서버로 배포하지 않았지만, 서버 업그레이드 작업이 완료되면 조만간에 선보이도록 할 것입니다.

시간이 허락하면 여러분도 시도해 보시고 Twitter Bootstrap의 깔끔한 느낌을 만끽하시기 바랍니다.

글쓴이: 최효성

외과전문의,웹프로그래밍,컴퓨터 일러스트레이션 / Surgeon, Medical Illustration, Web Programmer

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중