Or, to convert the title to English, The Blueprint Grid Builder.
Three days ago, I learned jQuery (in just about an hour, because it’s so damn easy). I knew about Blueprint for quite a while, but never used in production, and probably never will. I’ll leave Blueprint’s limitations for another post.
Let’s agree on a few things. Blueprint claims to aid grid-based design. That’s not entirely accurate. Yes, really. Columns aren’t grids, and the Web will probably never see true, “gridesigns”. Regardless, Blueprint is great for quick prototypes.
Gridizle, a.k.a. The Blueprint Grid Builder, a.k.a. my idea of a hacked-up, patched-up, single-page program, uses Blueprint to build a layout, and it assumes you know what class="span-8 prepend-1 border" means. If you don’t, please read a the Blueprint tutorial.
How It Works
Blueprint’s layout is split into 24 columns, each is 30px wide with a 10px right margin. You can customize these numbers with the Grid Generator, but for now, Gridizle assume Blueprint’s defaults.
Click “Add column” button and choose the number of spans for your column. A new column will be added to the main layout. Columns are distinguished with a top and bottom border.
You can add more columns to the main layout, or inside other columns. Clicking any column will highlight it in Blinding Yellow, and will allow you to add new columns inside it. Click anywhere outside the main layout to deselect all columns. New columns will be added to the main layout now.
<hr /> acts as a row separator. When your columns span less than 24, you can insert a separator to start a new row. Double-click the separator to remove it.
“Column border” adds a border class to the column. A Blueprint’s column border appears in the middle of the gutter on the right of that column.
“Column last” adds the last class to the column. Suppose you have a row split into four columns. Your columns will have span-6, which adds up to 24. However, the last column will jump to the next row because it has an extra margin on the right, making it 10px wider than what it’s supposed to be. Blueprint’s last class removes this margin, which aligns the last column properly.
You can increase or decrease prepend and append values by clicking the corresponding +/- buttons. These values are useful when you want to adjust the columns positioning.
Play with interface for a while, I’m sure you’ll get the hang of it.
Limitations
- Gridizle doesn’t calculate the maximum allowed number of spans in nested columns.
- Adding a full border around columns, instead of a top and bottom border, messes Blueprint’s layout. So for now, Gridizle’s columns look funny.
- Showing and hiding HTML code should be done in a popup window, instead of using the ugly
$('.container').append()hack. class="last"could, and should be calculated automatically.- Appending and prepending don’t know when to stop. So don’t over do it.
- Column spans can’t be changed, for now. When adding columns, try to pay attention to the span number you choose.
- This is a pre-pre-alpha software. I’ll try to improve it whenever I have a chance. However, since I’m licensing it under GPL, you’re free to hack on it.