Liquid Blueprint CSS Plugin

This plugin converts blueprint from a fixed size layout to a liquid layout. It will expand and shrink the container's size to match the browser's size. However, it will not shrink to anything smaller than blueprint's default size (950px).

Installation

Compressor

If you use the compressor to generate the library, simply create a folder named liquid in the BLUEPRINT_DIR/blueprint/plugins folder and place the screen.css file in it. Next, add liquid to your plugin list. The compressor will automatically include it after the original grid, thus overwritting it.

Drop-in

If you do not use the compressor, but simply want to drop the plugin in the website, upload it to your website, and add link to it after the blueprint library. Simply fill the part between the parentheses.

<link rel="stylesheet" href="(LOCATION OF THE LIQUID SCREEN.CSS)" type="text/css" media="screen, projection">

Usage

Use blueprint just as you would, and watch the grid adjust!

Note: Liquid supports the use of "blocks", like so:

<div class="container">
    <div class="block" id="header">
        <div class="span-16" id="title">
            <h1>Title</h1>
        </div>
        <div class="span-8 last" id="search">
            <form>...</form>
        </div>
        <div class="span-24 last" id="navigation">
            ...
        </div>
    </div>

    <div class="block" id="content">
        ...
    </div>

    <div class="block" id="footer">
        <div class="span-20" id="footer_navigation">
            ...
        </div>
        <div class="span-4 last" id="copyright">
            ...
        </div>
    </div>
</div>