오래간만의 Blueprint 갱신 소식

CSS 댓글 달기

Blueprint가 0.7로 갱신되었다. 갱신된 지 오래간만이라 바뀐 내용도 조금 많은데, 우선 반갑게도 새로운 자기만의 스타일로 CSS 수정하고 압축할 수 있게 하는 Ruby script(compress.rb)가 추가되었고, 디렉토리 구조도 단순하게 정리되었다. 그리고 .column class가 필요없게 되면서 .span-x 형식의 class 만으로 column을 구분지울 수 있게 되면서 더 정리된 느낌이 들지만, div에서만 column 지정이 가능하기 때문에, 경우에 따라 제약이 될 수도 있을 것 같다. 이외에도 많은 벌레들이 잡혔다고. Blueprint 0.7 변경 사항

약간의 디렉토리 구조의 변경으로 실제 사용하기 위해 HTML의 head에 다음과 같이 적용해 주어야 한다. (IE를 위한 CSS 파일의 위치가 바뀌었다.)

<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">
<!--[if IE]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->

이번 갱신에서 가장 눈에 띄는 변화로 compressor 스크립트(lib/compress.rb)를 들 수 있는데, 이 놈은 압축 뿐만이 아니라 설정 파일(settings.yml)을 기준으로 여러 프로젝트에 위치하는 CSS 파일을 한꺼번에 자신의 입맛에 맞게 생성할 수도 있다.
터미널에서 compress.rb가 위치한 디렉토리로 이동 후, $ ruby compress.rb -h를 치면 아래와 같은 용법을 확인할 수 있다.

$ ruby compress.rb -h
Usage: compress.rb [options]
Blueprint Compressor
 
options
  -o, --output_path=OUTPUT_PATH    Define a different path to output
                                   generated CSS files to.
  -n, --namespace=BP_NAMESPACE     Define a namespace prepended to all Blueprint classes
                                   (e.g. .your-ns-span-24)
  -p, --project=PROJECT_NAME       If using the settings.yml file, PROJECT_NAME is the
                                   project name you want to export
  --column_width=COLUMN_WIDTH      Set a new column width (in pixels) for the output grid
  --gutter_width=GUTTER_WIDTH      Set a new gutter width (in pixels) for the output grid
  --column_count=COLUMN_COUNT      Set a new column count for the output grid
  -h, --help                       Show this help message.

보이다시피, 프로젝트별 설정을 위해 settings.yml 파일이 필요한데, 간단한 예로 딸려오는 settings.example.yml파일을 참고하면 된다.

my_project:
  path: /path/to/my/project/stylesheets
  namespace: custom-namespace-1-
  custom_css:
    ie.css:
      - custom-ie.css
    print.css:
      - docs.css
      - my-print-styles.css
    screen.css:
      - subfolder-of-stylesheets/sub_css.css
  custom_layout:
    column_count: 12
    column_width: 70
    gutter_width: 10
  plugins:
    - fancy-type
    - buttons

여기서는, 우선 각 프로젝트의 이름이 있고 각 프로젝트의 해당 디렉토리 위치와 BP(Blueprint) class 앞에 붙게 될 namespace, 그리고 BP 이외의 추가되는 custom css 파일을 지정할 수 있다.
또한 custom_layout 항목에서는 기본적으로 사용되는 24 column, 전체 너비 950px, column간 10px margin 말고, 사용 환경에 맞는 column의 갯수와 너비, 그리고 gutter(column 간의 margin)을 따로 지정할 수 있다. plugins 항목에서는 추가로 제공되는 여러 BP plugins 중에서 사용하고자 하는 놈을 선택해 준다.
마지막으로, semantic_classes 항목이 있는데, 이 놈은 그 동안 순결주의 웹 표준 개발자들로부터 약간의 비난을 받아왔던 의미없는 class 사용에 대한 반응으로 추가된 듯 하다. 이 놈은 단순하게 실제 BP를 사용하면서 지정해 두었던 class의 pattern을 이용해서 여기에 대응하는 의미를 갖는 이름의 id나 class로 대치시켜주는 기능을 하지만, 순수 결백 주의자들에게는 반가운 기능일지도.
사소한 변화로, clearing floats를 위해 사용됐던 .clear class가 .clearfix로 이름이 바뀌었고, 기본적 clearing을 위한 .clear (clear:both;) class가 추가되었다.

마지막 적용은, $ ruby compress.rb -p MY_PROJECT_NAME만 쳐주면 끝.

이렇게 Blueprint도 1.0 버전에 가까워 지면서 더욱 성숙되고 편해져 가는 모습을 보니, 믿음직하군.

꼬리표:

관련된 주제의 글

댓글을 남겨 주세요