Blueprint Grid CSS Generator

Version: v.04 (2007-08-29)

INTRODUCTION:

This tool will help you generate more flexible versions of Blueprint's grid.css and compressed.css and grid.png files. Whether you prefer 8, 10,16 or 24 columns in your design, this generator now enables you that flexibility with Blueprint.

NB! The default Blueprint CSS files are already generated for you to copy below.

USAGE:

Enter your desired number of columns.
Your column width.
Enter the width of your margin.
Enter the desired page width.
Click 'Generate CSS' button and copy the results from the Generated Code section.

Generator Form:

Number of Columns:

Column Width:
px

Margin Width:
px

Total Page Width:
---

Desired Page Width:
px

Generated Code:

Click in the text area below to copy all the CSS code and save your versions of grid.css, compressed.css and grid.png. Click tabs below to switch between files.

Grid.css
Compressed.css
Grid.png

/* -------------------------------------------------------------- 
  
  Grid.css
   * Version:         0.5 (2007-08-28) YYYY-MM-DD
   * Website:         http://code.google.com/p/blueprintcss/
  
  Generated by:
   * Blueprint CSS Grid Generator (2007-08-28) [http://blueprint-generator.kaizeku.com/]
  
  Based on work by:
   * Olav Bjorkoy      [bjorkoy.com]
   * Nathan Borror     [playgroundblues.com]
   * Jeff Croft        [jeffcroft.com]
   * Christian Metts   [mintchaos.com]
   * Khoi Vinh         [subtraction.com]
  
  == STRUCTURE: ========================
   * Page width:            950 px
   * Number of columns:     24
   * Column width:          30 px
   * Margin width:          10 px
  ======================================
   
  By default, the grid is 950px wide, with 24 columns 
  spanning 30px, and a 10px margin between columns.
   
  If you need fewer or more columns, use this 
  formula to find the new total width: 
   
  Total width = (number_of_columns * column_width) - margin_width
  
-------------------------------------------------------------- */

body { 
  text-align: center; /* IE6 Fix */
  margin:36px 0;
}

/* A container should group all your columns. */
.container {
  text-align: left;
  position: relative;
  padding: 0;
  margin: 0 auto;   /* Centers layout */
  width: 950px;     /* Total width */
}

/* Columns
-------------------------------------------------------------- */

/* Use this class together with the .span-x classes
   to create any composition of columns in a layout.
   Nesting columns works like a charm (remember .first and .last). */
   
.column {
  float: left;
  margin-right: 10px;
  padding: 0;
}
* html .column { overflow-x: hidden; } /* IE6 fix */

/* Add this class to a column if you want a border on its 
   right hand side. This should be customized to fit your needs. */

.border {
  padding-right: 4px;
  margin-right: 5px;
  border-right: 1px solid #ddd;
}

/* Use these classes to set how wide a column should be. */
.span-1  { width: 30px;}
.span-2  { width: 70px;}
.span-3  { width: 110px;}
.span-4  { width: 150px;}
.span-5  { width: 190px;}
.span-6  { width: 230px;}
.span-7  { width: 270px;}
.span-8  { width: 310px;}
.span-9  { width: 350px;}
.span-10 { width: 390px;}
.span-11 { width: 430px;}
.span-12 { width: 470px;}
.span-13 { width: 510px;}
.span-14 { width: 550px;}
.span-15 { width: 590px;}
.span-16 { width: 630px;}
.span-17 { width: 670px;}
.span-18 { width: 710px;}
.span-19 { width: 750px;}
.span-20 { width: 790px;}
.span-21 { width: 830px;}
.span-22 { width: 870px;}
.span-23 { width: 910px;}
.span-24 { width: 950px; margin: 0; }

/* The last element in a multi-column block needs this class. */
.last     { margin-right: 0; }

/* Add these to a column to append empty cols. */
.append-1  { padding-right: 40px;}
.append-2  { padding-right: 80px;}
.append-3  { padding-right: 120px;}
.append-4  { padding-right: 160px;}
.append-5  { padding-right: 200px;}
.append-6  { padding-right: 240px;}
.append-7  { padding-right: 280px;}
.append-8  { padding-right: 320px;}
.append-9  { padding-right: 360px;}
.append-10 { padding-right: 400px;}
.append-11 { padding-right: 440px;}
.append-12 { padding-right: 480px;}
.append-13 { padding-right: 520px;}
.append-14 { padding-right: 560px;}
.append-15 { padding-right: 600px;}
.append-16 { padding-right: 640px;}
.append-17 { padding-right: 680px;}
.append-18 { padding-right: 720px;}
.append-19 { padding-right: 760px;}
.append-20 { padding-right: 800px;}
.append-21 { padding-right: 840px;}
.append-22 { padding-right: 880px;}
.append-23 { padding-right: 920px;}

/* Add these to a column to prepend empty cols. */
.prepend-1  { padding-left: 40px;}
.prepend-2  { padding-left: 80px;}
.prepend-3  { padding-left: 120px;}
.prepend-4  { padding-left: 160px;}
.prepend-5  { padding-left: 200px;}
.prepend-6  { padding-left: 240px;}
.prepend-7  { padding-left: 280px;}
.prepend-8  { padding-left: 320px;}
.prepend-9  { padding-left: 360px;}
.prepend-10 { padding-left: 400px;}
.prepend-11 { padding-left: 440px;}
.prepend-12 { padding-left: 480px;}
.prepend-13 { padding-left: 520px;}
.prepend-14 { padding-left: 560px;}
.prepend-15 { padding-left: 600px;}
.prepend-16 { padding-left: 640px;}
.prepend-17 { padding-left: 680px;}
.prepend-18 { padding-left: 720px;}
.prepend-19 { padding-left: 760px;}
.prepend-20 { padding-left: 800px;}
.prepend-21 { padding-left: 840px;}
.prepend-22 { padding-left: 880px;}
.prepend-23 { padding-left: 920px;}

/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clear { display: inline-block; }   
.clear:after, .container:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
* html .clear { height: 1%; }
.clear { display: block; }

/* Images
-------------------------------------------------------------- */

/* Remember the baseline (typography.css). */
img { margin: 0 0 18px 0; }

/* Use these classes to make an image flow into the column before 
   or after it. This technique can also be used on other objects. */

.pull-1 { margin-left: -40px;}
.pull-2 { margin-left: -80px;}
.pull-3 { margin-left: -120px;}
.pull-4 { margin-left: -160px;}

.push-0  { margin: 0 0 0 18px; float: right; } /* Right aligns the image. */
.push-1 { margin: 0 -40px 0 18px; float: right;}
.push-2 { margin: 0 -80px 0 18px; float: right;}
.push-3 { margin: 0 -120px 0 18px; float: right;}
.push-4 { margin: 0 -160px 0 18px; float: right;}

.pull-1, .pull-2, .pull-3, .pull-4,
.push-1, .push-2, .push-3, .push-4 {
  overflow-x: visible; /* Overrides previous IE6 fix (needs improvement). */
}

/* EOF */

/* 
  Compressed.css
   * Version:         0.5 (2007-08-28)
   * Website:         http://code.google.com/p/blueprintcss/
   
   Generated by:
    * Blueprint CSS Grid Generator (2007-08-28) [http://blueprint-generator.kaizeku.com/]
   
*/

/* reset.css */
html,body,div,span,applet,object,iframe, h1,h2,h3,h4,h5,h6,p,blockquote,pre, a,abbr,acronym,address,big,cite,code, del,dfn,em,font,img,ins,kbd,q,s,samp, strike,strong,sub,sup,tt,var, dl,dt,dd,ol,ul,li, fieldset,form,label,legend, table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
body{line-height:1;color:#333;background:white;}
table{border-collapse:separate;border-spacing:0;}
caption,th,td{text-align:left;font-weight:normal;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"" "";}

/* typography.css */
body{font-size:12px;line-height:18px;}
h1,h2,h3, h4,h5,h6{font-family:Constantia,"Palatino Linotype",Palatino,Georgia,"Times New Roman",Times,serif;}
body{font-family:Frutiger,Univers,"Helvetica Neue","Lucida Grande",Calibri,Helvetica,Verdana,sans-serif;}
pre{font-family:Corbel,Verdana,"Bitstream Vera Sans",sans-serif;}
code{font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Monaco,Courier,monospace;}
h1,h2,h3,h4,h5,h6{color:#111;clear:both;}
h1{font-size:30px;line-height:36px;padding:0 0 18px 0;}
h2{font-size:20px;line-height:36px;}
h3{font-size:16px;line-height:36px;}
h4{font-size:14px;font-weight:bold;}
h5{font-size:12px;font-weight:bold;}
h6{font-size:12px;}
p{margin:0 0 18px 0;text-align:justify;}
p.last{margin-bottom:0;}
p img{float:left;margin:18px 18px 18px 0;padding:0;}
p img.top{margin-top:0;}
a{color:#125AA7;text-decoration:underline;}
a:hover{color:#000;}
ul,ol{margin:0 0 18px 18px;}
ul{list-style-type:circle;}
ol{list-style-type:decimal;}
dl{margin:0 0 18px 0;}
dl dt{font-weight:bold;}
blockquote{margin:0 0 18px 18px;color:#666;font-style:italic;}
strong{font-weight:bold;}
em{font-style:italic;}
pre{margin-bottom:18px;background:#eee;border:1px solid #ddd;padding:16px;}
hr{background:#B2CCFF;color:#B2CCFF;clear:both;float:none;width:100%;height:2px;margin:0 0 16px 0;border:none;}
table{margin-bottom:16px;border-top:1px solid #ddd;border-left:1px solid #ddd;}
th,td{height:13px;padding:2px 4px;border-bottom:1px solid #ddd;border-right:1px solid #ddd;}
th{font-weight:bold;}
p.small{font-size:10px;margin-bottom:18px;}
p.large{font-size:14px;line-height:36px;}
p.quiet{color:#666;}
.hide{display:none;}
.alt{color:#666;font-family:"Warnock Pro","Goudy Old Style","Palatino","Book Antiqua",Georgia,serif;font-size:1.2em;line-height:1%;font-style:italic;}
.dquo{margin-left:-.7em;}
p.incr,.incr p{font-size:10px;line-height:1.44em;margin-bottom:18px;}
.caps{font-variant:small-caps;letter-spacing:1px;text-transform:lowercase;font-size:1.2em;line-height:1%;font-weight:bold;}

/* grid.css */
body{text-align:center;margin:36px 0;}
.container{text-align:left;position:relative;padding:0;margin:0 auto;width:950px;}
.column{float:left;margin-right:10px;padding:0;}
* html .column{overflow-x:hidden;}
.border{padding-right:4px;margin-right:5px;border-right:1px solid #ddd;}
.span-1  { width: 30px;}
.span-2  { width: 70px;}
.span-3  { width: 110px;}
.span-4  { width: 150px;}
.span-5  { width: 190px;}
.span-6  { width: 230px;}
.span-7  { width: 270px;}
.span-8  { width: 310px;}
.span-9  { width: 350px;}
.span-10 { width: 390px;}
.span-11 { width: 430px;}
.span-12 { width: 470px;}
.span-13 { width: 510px;}
.span-14 { width: 550px;}
.span-15 { width: 590px;}
.span-16 { width: 630px;}
.span-17 { width: 670px;}
.span-18 { width: 710px;}
.span-19 { width: 750px;}
.span-20 { width: 790px;}
.span-21 { width: 830px;}
.span-22 { width: 870px;}
.span-23 { width: 910px;}
.span-24 { width: 950px; margin: 0; }

.last{margin-right:0;}
.append-1  { padding-right: 40px;}
.append-2  { padding-right: 80px;}
.append-3  { padding-right: 120px;}
.append-4  { padding-right: 160px;}
.append-5  { padding-right: 200px;}
.append-6  { padding-right: 240px;}
.append-7  { padding-right: 280px;}
.append-8  { padding-right: 320px;}
.append-9  { padding-right: 360px;}
.append-10 { padding-right: 400px;}
.append-11 { padding-right: 440px;}
.append-12 { padding-right: 480px;}
.append-13 { padding-right: 520px;}
.append-14 { padding-right: 560px;}
.append-15 { padding-right: 600px;}
.append-16 { padding-right: 640px;}
.append-17 { padding-right: 680px;}
.append-18 { padding-right: 720px;}
.append-19 { padding-right: 760px;}
.append-20 { padding-right: 800px;}
.append-21 { padding-right: 840px;}
.append-22 { padding-right: 880px;}
.append-23 { padding-right: 920px;}

.prepend-1  { padding-left: 40px;}
.prepend-2  { padding-left: 80px;}
.prepend-3  { padding-left: 120px;}
.prepend-4  { padding-left: 160px;}
.prepend-5  { padding-left: 200px;}
.prepend-6  { padding-left: 240px;}
.prepend-7  { padding-left: 280px;}
.prepend-8  { padding-left: 320px;}
.prepend-9  { padding-left: 360px;}
.prepend-10 { padding-left: 400px;}
.prepend-11 { padding-left: 440px;}
.prepend-12 { padding-left: 480px;}
.prepend-13 { padding-left: 520px;}
.prepend-14 { padding-left: 560px;}
.prepend-15 { padding-left: 600px;}
.prepend-16 { padding-left: 640px;}
.prepend-17 { padding-left: 680px;}
.prepend-18 { padding-left: 720px;}
.prepend-19 { padding-left: 760px;}
.prepend-20 { padding-left: 800px;}
.prepend-21 { padding-left: 840px;}
.prepend-22 { padding-left: 880px;}
.prepend-23 { padding-left: 920px;}

.clear{display:inline-block;}
.clear:after,.container:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
* html .clear{height:1%;}
.clear{display:block;}
img{margin:0 0 18px 0;}
.pull-1 { margin-left: -40px;}
.pull-2 { margin-left: -80px;}
.pull-3 { margin-left: -120px;}
.pull-4 { margin-left: -160px;}

.push-0  { margin: 0 0 0 18px; float: right; } /* Right aligns the image. */
.push-1 { margin: 0 -40px 0 18px; float: right;}
.push-2 { margin: 0 -80px 0 18px; float: right;}
.push-3 { margin: 0 -120px 0 18px; float: right;}
.push-4 { margin: 0 -160px 0 18px; float: right;}

.pull-1,.pull-2,.pull-3,.pull-4, .push-1,.push-2,.push-3,.push-4{overflow-x:visible;}

/* buttons.css */
a.button,button{display:block;float:left;margin:0 0.583em 0.667em 0;padding:5px 10px 6px 7px;border:0.1em solid #dedede;border-top:0.1em solid #eee;border-left:0.1em solid #eee;background-color:#f5f5f5;font-family:"Lucida Grande",Tahoma,Arial,Verdana,sans-serif;font-size:100%;line-height:130%;text-decoration:none;font-weight:bold;color:#565656;cursor:pointer;}
button{width:auto;overflow:visible;padding:4px 10px 3px 7px;}
button[type]{padding:5px 10px 5px 7px;line-height:17px;}
*:first-child+html button[type]{padding:4px 10px 3px 7px;}
button img,a.button img{margin:0 3px -3px 0 !important;padding:0;border:none;width:16px;height:16px;}
button:hover,a.button:hover{background-color:#dff4ff;border:0.1em solid #c2e1ef;color:#336699;}
a.button:active{background-color:#6299c5;border:1px solid #6299c5;color:#fff;}
.positive{color:#529214;}
a.positive:hover,button.positive:hover{background-color:#E6EFC2;border:0.1em solid #C6D880;color:#529214;}
a.positive:active{background-color:#529214;border:0.1em solid #529214;color:#fff;}
.negative{color:#d12f19;}
a.negative:hover,button.negative:hover{background:#fbe3e4;border:0.1em solid #fbc2c4;}
a.negative:active{background-color:#d12f19;border:0.1em solid #d12f19;color:#fff;}

/* EOF */

blueprint_grid_30+10x18.png

Drag image to your desktop or right/control-click on the image to save it.

A big Thank You ! goes out to all the developers involved in Blueprint CSS.

LICENCE:

The code for this 'solution' is released under the same licence as Blueprint. Blueprint Generator is by Kematzy/ you can download the file below

SVN Download