Blueprint: A CSS Framework

예전에 CSS로 뭔가를 테스트 할 때 그리드나 몇 픽셀의 어긋남을 확인하기가 너무 힘들어서, 5×5 pixel 짜리 그리드가 그어진 이미지를 배경으로 넣어놓고 확인하던 기억이 있다.
이런식으로 CSS를 만지기 위해 개개인이 각자의 컴퓨터에서 하던 것들을 몇몇이 모여서 좀 더 합리적으로 정리해 낸 것 같은 프로젝트가 있다.

blueprint

Blueprint CSS

http://code.google.com/p/blueprintcss/

+ 2008.12.30)
오피셜 사이트 등장
http://www.blueprintcss.org/

BP가 밝힌 BP의 기능

  • 쉽게 커스터마이징 할 수 있는 그리드
  • 감각적인 타이포그래피
  • 어디서든 상대적인 폰트 사이즈
  • 기본적인 타이포그래피 설정
  • 완벽한 CSS reset
  • 인쇄를 위한 스타일시트
  • 압축된 버전 포함
  • 쓸모 없는 것은 포함하지 않음

HTML의 기본 설정이 디자인에 적합하지 않은 것들이 있어서 그러한 설정들을 reset하는 CSS를 따로 만들어서 쓰는 경우가 있는데, YUI에서도 공개된 것이 있고 BP도 참고할 만하다.

내가 생각하는 BP CSS를 사용할 수 있는 때

  • 처음 CSS 파일들의 구조를 잡아야 할 때
  • CSS를 바로 입히면서 디자인을 하는데 그리드가 잘 잡혔으면 할 때
  • 처음에 CSS에서 어떤 것들을 셋팅해야하는지 잘 모르겠을 때
  • 기본적인 CSS 항목들이 정의 되어 있는 상태에서 작업을 시작하고 싶을 때

단순히 내가 생각하는 쓰임이고, CSS에서 어떤 것이 정답이라고 얘기할 순 없기 때문에 참고용으로 쓸만하다고 생각하다.

See a sample website built with BP, or a demonstration of the grid or a demonstration of the typography.

사용하기 전에 샘플 페이지에서 분위기를 일단 파악하고, 튜토리얼은 꼭 읽어 보는 것이 좋다.