Blueprint CSS 프레임워크를 이용한 Grid System 구현을 도와주는 Boks라는 이름의 Air 애플리케이션이 나왔다. grid와 baseline rhythm 설정이 가능하고, 자신의 CSS 파일도 따로 추가해서 디자인 결과물을 압축된 단일 CSS 파일로 합쳐서 뽑아낼 수 있다.
요새 참 많은 유용한 Air 애플리케이션들이 계속 등장하는군.

한동안 개발 주춤 상태에 있는 blueprintcss를 대신해서, 몇몇 개발자들이 모여서 Github에다 새로운 repository의 둥지를 틀고, 이와 동시에 새로운 프로젝트 홈페이지를 열면서 개발을 계속 이어나가기 시작했다.

지금의 현상은 Google Groups에 위치해 있는 Blueprint CSS의 유저 그룹이 스팸 처리가 안되는 등 원 개발자의 관리가 전혀 이루어지지 않고 있으면서 미리 예견된 상황이었다. 활기찬 개발로 다시 한번 CSS frameworks의 붐을 이어갈 수 있을까?

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 버전에 가까워 지면서 더욱 성숙되고 편해져 가는 모습을 보니, 믿음직하군.

CSS frameworks 중 하나로 많은 사람들로부터 주목받고 있는 blueprintcss에는 기초 작업으로 다양한 종류의 웹 브라우저들이 기본적으로 가지고 있는 저마다 다른 스타일을 기본값으로 초기화 하는 reset.css 정의 파일을 가지고 있다. 이 파일은 Eric Meyer씨가 제안했던 reset 스타일을 기반으로 하고 있는데, 이 곳에는 body의 line-height 값으로 단위가 생략된 1.5가 지정되어 있다.

단위가 생략된 line-height을 사용하면 객체에 지정되어 있는 글꼴의 원래 크기에 단위가 생략된 line-height 수치를 곱한 결과 값을 돌려주게 되는데, 이렇게 하면 글꼴 크기가 서로 다를 경우, line-height도 글꼴 크기와 비례한 값을 얻을 수 있게 된다.

그런데, 최근 A List Apart에 올라온 “How to Size Text in CSS” 제목의 글을 읽고 나서, 단위가 생략된 line-height을 쓸 경우, 서로 글꼴 크기가 다른 여러 column들을 보유한 layout을 디자인 할 경우 vertical rhythm과 관련해서 문제를 안고 있는 것을 알 수가 있다. vertical rhythm을 추구하는 디자인은 글꼴 크기에 관계없이 일정한 line-height을 갖게 하려는 것이기에 당연한 얘기일 것이다. 그래서, vertical rhythem을 고려한 디자인이라면, line-height 값으로 글꼴 크기 변화에도 자유로운 상대적 단위인 em을 써주면 예제 페이지에서 보여주는 바와 같이 모든 브라우저들에서 글꼴 크기에 상광없이 일정한 line-height 값을 얻을 수 있단다.

결국, 다양한 구조의 column layout 디자인을 쉽게 해주는 것이 blueprintcss framework의 사용 목적이라면, line-height 값도 상황에 따라 단위를 써주는 것이 좋을 듯하다.

웹 개발 과정에 있어서 웹 페이지 속 UI 동작을 구현하는데 필요한 기본적인 기능들을 모아놓은 JavaScript Library들이 제공되면서 개발자들의 손을 한 시름 덜어주게 되었고, 결국 남은 여력을 프로젝트에 더 집중하게 되면서 작업의 효율성을 증가시켜 주었듯이, 마찬가지로 웹 페이지의 기본 layout을 잡을 때 반복적으로 수행되던 CSS 작업에서도 빠른 작업 수행 속도를 붙여줄 수 있는 framework 형태의 여러 조력자들이 등장하고 있다.

개인적으로 JavaScript Library로는 jQuery를 그리고 CSS framework로는 blueprintcss를 주로 사용하게 되면서, 예전에 공개했던 HTML 문서 생성을 위한 TextMate용 snippet에도 작은 변화가 있었다.
여기에 그 바뀐 내용을 공개하면, 우선 아래는 HTML 4.01 Strict DocType을 위해 “page4” tab trigger로 지정된 HTML snippet이다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ko" dir="ltr">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>${1:Title}</title>
    ${2:<link rel="stylesheet" href="${3:css/blueprint/}screen.css" type="text/css" media="screen, projection" />
    <link rel="stylesheet" href="$3print.css" type="text/css" media="print" />
    <!--[lt IE 7]><link rel="stylesheet" href="$3lib/ie.css" type="text/css" media="screen, projection"><![endif]-->
    }<style type="text/css" media="screen">
    /* <![CDATA[ */
 
    /* ]]> */
    </style> 
    ${4:<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
    }<script type="text/javascript">
    // <![CDATA[ 
        $0
    // ]]> 
    </script> 
  </head>
  <body id="${5:page}">
    <div class="container">
      <div class="column span-${6:24}">
        <h1>${7:Header}</h1>
      </div>
      <div class="column span-${8:20}">
        ${9:Main content}
      </div>
      <div class="column span-${10:4} last">
        ${11:Right sidebar}
      </div>
      ${12:<div class="column span-24">
        ${13:Footer}
      </div>}
    </div>
  </body>
</html>

기본적으로 지정되어 있는 HTML 문서의 구조는, 오른쪽에 작은 sidebar가 위치한 보편적인 2 column 구조로 위 아래에 Header와 Footer가 위치하고 있다.

다음은 같은 구조를 가진 XHTML 1.0 Strict DocType 문서를 위한 HTML snippet. tab trigger로 “page”가 지정되어 있다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ${1:${2:xml:lang="ko"}${3: lang="ko"}} dir="ltr">
  <head>
    <meta http-equiv="Content-Type" content="${4:application/xhtml+xml}; charset=utf-8" />
    <title>${5:Title}</title>
    ${6:<link rel="stylesheet" href="${7:css/blueprint/}screen.css" type="text/css" media="screen, projection" />
    <link rel="stylesheet" href="$7print.css" type="text/css" media="print" />
    <!--[lt IE 7]><link rel="stylesheet" href="$7lib/ie.css" type="text/css" media="screen, projection"><![endif]-->
    }<style type="text/css" media="screen">
    /* <![CDATA[ */
 
    /* ]]> */
    </style> 
    ${8:<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
    }<script type="text/javascript">
    // <![CDATA[ 
      $0
    // ]]> 
    </script> 
  </head>
  <body id="${9:page}">
   <div class="container">
      <div class="column span-${10:24}">
        <h1>${11:Header}</h1>
      </div>
      <div class="column span-${12:20}">
        ${13:Main content}
      </div>
      <div class="column span-${14:4} last">
        ${15:Right sidebar}
      </div>
      ${16:<div class="column span-24">
        ${17:Footer}
      </div>}
    </div>
  </body>
</html>

간단한 것이지만, 손놀림을 덜 수 있는 또 하나의 꼼수다.