boostとは

boostはフレームワークのフレームワークです。 BlueprintCSSやjQueryなど、クロスブラウザを実現するための標準的なフレームワークを内包し、開発メンバー全体でシンプルかつ統一的なコードを書くためのルールを提供しています。

boostに含まれるフレームワーク

boostには以下のフレームワークが含まれています。

Blueprint CSS（一部）
jQuery1.3.2

boostのメリット

boostは、WEB開発者につきものの諸問題を解消します。

開発者によってディレクトリ構成がバラバラ - boostは統一的なルールを定めています
再利用性の低いHTML, CSS, Javascript - 誰でもいつでも簡潔なコード記述が実現します
いつも同じコードを書く煩わしさを解消 - よく使うコードをプリセットで提供します
HTML head内に読み込む外部JSファイルが多すぎて汚い - JSインポータで1ファイルを読み込むだけ

head内の読み込みサンプル

boostを利用するには、まずHTMLのhead内に以下のコードを貼付けます。

<!-- BOOST start -->
<link type="text/css" rel="stylesheet" href="boost/css/screen.css" />
<link type="text/css" rel="stylesheet" href="boost/css/print.css" media="print" />
<!--[if lt IE 8]><link type="text/css" rel="stylesheet" href="boost/css/ie.css" /><![endif]-->
<link type="text/css" rel="stylesheet" href="boost/boost.css" />
<script type="text/javascript" src="boost/boost.js"></script>
<!-- BOOST end -->

<!-- CUSTOM START -->
<link type="text/css" rel="stylesheet" href="style.css" />
<script type="text/javascript" src="script.js"></script>
<!-- CUSTOM END -->

BOOST startからBOOST endまでは全HTMLファイルで読み込むだけです。パスさえ合っていれば、後は何も編集する必要はありません。

CUSTOM startからCUSTOM endに含まれる2ファイルが、編集対象となるファイルです。

HTMLソース例

boostを利用する事で、簡潔で一貫したクロスブラウザ対応のHTMLが実現します。

<div id="header" class="row">
    <div class="block clearfix">
        
        <div class="col left">
            <a id="logo" href="#" title="テストサイト">テストサイト</a>
        </div><!-- col -->
        
        <div class="col right last">
            <ul class="nav clearfix">
                <li><a href="#">HOME</a></li>
                <li><a href="#">このサイトについて</a></li>
                <li><a href="#">お問い合わせ</a></li>
            </ul>
        </div><!-- col -->
        
    </div><!-- block -->
</div><!-- #header -->

<div id="menubar" class="row">
    <div class="block">
        <ul class="nav clearfix">
            <li><a class="menu1" href="#">menu</a></li>
            <li><a class="menu2" href="#">menu</a></li>
            <li><a class="menu3" href="#">menu</a></li>
            <li><a class="menu4" href="#">menu</a></li>
            <li><a class="menu5" href="#">menu</a></li>
            <li><a class="menu6" href="#">menu</a></li>
        </ul>
    </div><!-- block -->
</div><!-- #menubar -->

<div id="contents" class="row">
    <hr class="space" />

    <div class="block clearfix">
    
        <div class="col left">
            hello world.
        </div><!-- col -->
        
        <div class="col mid">
            hello world. 
        </div><!-- col -->
            
        <div class="col right last">
            hello world. 
        </div><!-- col -->
    
    </div><!-- block -->
</div><!-- #contents -->

<div id="footer" class="row">
    <hr class="space" />
    
    <div class="block">
    
        <div class="nav clearfix">
            <ul>
                <li><a href="#">menu</a></li>
                <li><a href="#">menu</a></li>
                <li><a href="#">menu</a></li>
            </ul>
        </div>
        
        <p class="copyright">2009 (C) Some Company Corp.</p>
        
    </div><!-- block -->
</div><!-- #footer -->

スタートガイド

インストールと使用方法についてはスタートガイドを参照して下さい。

boostを使用しているプロジェクト

スイーツ情報サイトアンドスイーツ

おことわり

立ち上げて間もないため未整備箇所ばかりですが、これからアップデートしていきます。

twitter http://twitter.com/tomodian