@@ -22,13 +22,12 @@ h2. Setup Instructions Here's how you set up Blueprint on your site. # Upload the "blueprint" folder in this folder to your server, and place it in whatever folder you'd like. A good choice would be your CSS folder. -# Add the following three lines to every @<head/>@ of your site. Make sure the three @href@ paths are correct (here, BP is in my CSS folder): <pre> +# Add the following three lines to every @<head/>@ of your site. Make sure the three @href@ paths are correct (here, BP is in my CSS folder): <pre><code> <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 lt IE 8]> <link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"> -<![endif]--> -</pre> +<![endif]--></code></pre> Remember to include trailing slashes (" />") in these lines if you're using XHTML. # For development, add the .showgrid class to any container or column to see the underlying grid. Check out the @plugins@ directory for more advanced functionality. README.textile @@ -14,7 +14,7 @@ /* ie.css */ body {text-align:center;} .container {text-align:left;} -* html .column, * html div.span-1, * html div.span-2, * html div.span-3, * html div.span-4, * html div.span-5, * html div.span-6, * html div.span-7, * html div.span-8, * html div.span-9, * html div.span-10, * html div.span-11, * html div.span-12, * html div.span-13, * html div.span-14, * html div.span-15, * html div.span-16, * html div.span-17, * html div.span-18, * html div.span-19, * html div.span-20, * html div.span-21, * html div.span-22, * html div.span-23, * html div.span-24 {overflow-x:hidden;} +* html .column, * html div.span-1, * html div.span-2, * html div.span-3, * html div.span-4, * html div.span-5, * html div.span-6, * html div.span-7, * html div.span-8, * html div.span-9, * html div.span-10, * html div.span-11, * html div.span-12, * html div.span-13, * html div.span-14, * html div.span-15, * html div.span-16, * html div.span-17, * html div.span-18, * html div.span-19, * html div.span-20, * html div.span-21, * html div.span-22, * html div.span-23, * html div.span-24 {display:inline;overflow-x:hidden;} * html legend {margin:0px -8px 16px 0;padding:0;} ol {margin-left:2em;} sup {vertical-align:text-top;} @@ -25,7 +25,8 @@ img {-ms-interpolation-mode:bicubic;} .clearfix, .container {display:inline-block;} * html .clearfix, * html .container {height:1%;} fieldset {padding-top:0;} -input.text, input.title {background-color:#fff;border:1px solid #bbb;} +textarea {overflow:auto;} +input.text, input.title, textarea {background-color:#fff;border:1px solid #bbb;} input.text:focus, input.title:focus {border-color:#666;} input.text, input.title, textarea, select {margin:0.5em 0;} input.checkbox, input.radio {position:relative;top:.25em;} blueprint/ie.css @@ -8,10 +8,11 @@ -------------------------------------------------------------- */ body .container { direction: rtl; } -body .column { +body .column, body div.span-1, body div.span-2, body div.span-3, body div.span-4, body div.span-5, body div.span-6, body div.span-7, body div.span-8, body div.span-9, body div.span-10, body div.span-11, body div.span-12, body div.span-13, body div.span-14, body div.span-15, body div.span-16, body div.span-17, body div.span-18, body div.span-19, body div.span-20, body div.span-21, body div.span-22, body div.span-23, body div.span-24 { float: right; margin-right: 0; margin-left: 10px; + text-align:right; } body div.last { margin-left: 0; } blueprint/plugins/rtl/screen.css @@ -18,7 +18,6 @@ hr {background:#ccc;color:#ccc;width:100%;height:2px;margin:2em 0;padding:0;bord hr.space {background:#fff;color:#fff;visibility:hidden;} h1, h2, h3, h4, h5, h6 {font-family:"Helvetica Neue", Arial, "Lucida Grande", sans-serif;} code {font:.9em "Courier New", Monaco, Courier, monospace;} -img {float:left;margin:1.5em 1.5em 1.5em 0;} a img {border:none;} p img.top {margin-top:0;} blockquote {margin:1.5em;padding:1em;font-style:italic;font-size:.9em;} blueprint/print.css @@ -22,6 +22,7 @@ blockquote, q {quotes:"" "";} a img {border:none;} /* typography.css */ +html {font-size:100.01%;} body {font-size:75%;color:#222;background:#fff;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;} h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#111;} h1 {font-size:3em;line-height:1;margin-bottom:0.5em;} @@ -122,7 +123,7 @@ form.inline p {margin-bottom:0;} .span-21 {width:830px;} .span-22 {width:870px;} .span-23 {width:910px;} -.span-24, div.span-24 {width:950px;margin:0;} +.span-24, div.span-24 {width:950px;margin-right:0;} input.span-1, textarea.span-1, input.span-2, textarea.span-2, input.span-3, textarea.span-3, input.span-4, textarea.span-4, input.span-5, textarea.span-5, input.span-6, textarea.span-6, input.span-7, textarea.span-7, input.span-8, textarea.span-8, input.span-9, textarea.span-9, input.span-10, textarea.span-10, input.span-11, textarea.span-11, input.span-12, textarea.span-12, input.span-13, textarea.span-13, input.span-14, textarea.span-14, input.span-15, textarea.span-15, input.span-16, textarea.span-16, input.span-17, textarea.span-17, input.span-18, textarea.span-18, input.span-19, textarea.span-19, input.span-20, textarea.span-20, input.span-21, textarea.span-21, input.span-22, textarea.span-22, input.span-23, textarea.span-23, input.span-24, textarea.span-24 {border-left-width:1px!important;border-right-width:1px!important;padding-left:5px!important;padding-right:5px!important;} input.span-1, textarea.span-1 {width:18px!important;} input.span-2, textarea.span-2 {width:58px!important;} blueprint/screen.css @@ -63,7 +63,7 @@ .span-21 {width: 830px;} .span-22 {width: 870px;} .span-23 {width: 910px;} -.span-24, div.span-24 { width:950px; margin:0; } +.span-24, div.span-24 { width: 950px; margin-right: 0; } /* Use these classes to set the width of an input. */ input.span-1, textarea.span-1, input.span-2, textarea.span-2, input.span-3, textarea.span-3, input.span-4, textarea.span-4, input.span-5, textarea.span-5, input.span-6, textarea.span-6, input.span-7, textarea.span-7, input.span-8, textarea.span-8, input.span-9, textarea.span-9, input.span-10, textarea.span-10, input.span-11, textarea.span-11, input.span-12, textarea.span-12, input.span-13, textarea.span-13, input.span-14, textarea.span-14, input.span-15, textarea.span-15, input.span-16, textarea.span-16, input.span-17, textarea.span-17, input.span-18, textarea.span-18, input.span-19, textarea.span-19, input.span-20, textarea.span-20, input.span-21, textarea.span-21, input.span-22, textarea.span-22, input.span-23, textarea.span-23, input.span-24, textarea.span-24 { blueprint/src/grid.css @@ -20,7 +20,7 @@ body { text-align: center; } * html div.span-15, * html div.span-16, * html div.span-17, * html div.span-18, * html div.span-19, * html div.span-20, * html div.span-21, * html div.span-22, * html div.span-23, -* html div.span-24 { overflow-x: hidden; } +* html div.span-24 { display:inline; overflow-x: hidden; } /* Elements @@ -33,44 +33,47 @@ body { text-align: center; } ol { margin-left:2em; } /* Fixes wrong line-height on sup/sub in IE. */ -sup { vertical-align: text-top; } -sub { vertical-align: text-bottom; } +sup { vertical-align:text-top; } +sub { vertical-align:text-bottom; } /* Fixes IE7 missing wrapping of code elements. */ html>body p code { *white-space: normal; } /* IE 6&7 has problems with setting proper <hr> margins. */ -hr { margin: -8px auto 11px; } +hr { margin:-8px auto 11px; } /* Explicitly set interpolation, allowing dynamically resized images to not look horrible */ -img { -ms-interpolation-mode: bicubic; } +img { -ms-interpolation-mode:bicubic; } /* Clearing -------------------------------------------------------------- */ /* Makes clearfix actually work in IE */ -.clearfix, .container {display: inline-block;} +.clearfix, .container { display:inline-block; } * html .clearfix, -* html .container {height: 1%;} +* html .container { height:1%; } /* Forms -------------------------------------------------------------- */ /* Fixes padding on fieldset */ -fieldset {padding-top: 0;} +fieldset { padding-top:0; } + +/* Makes classic textareas in IE 6 resemble other browsers */ +textarea { overflow:auto; } /* Fixes rule that IE 6 ignores */ -input.text, input.title {background-color:#fff;border:1px solid #bbb;} -input.text:focus, input.title:focus {border-color:#666;} -input.text, input.title, textarea, select {margin:0.5em 0;} -input.checkbox, input.radio {position:relative; top:.25em;} +input.text, input.title, textarea { background-color:#fff; border:1px solid #bbb; } +input.text:focus, input.title:focus { border-color:#666; } +input.text, input.title, textarea, select { margin:0.5em 0; } +input.checkbox, input.radio { position:relative; top:.25em; } /* Fixes alignment of inline form elements */ -form.inline div, form.inline p {vertical-align:middle;} -form.inline label {position:relative;top:-0.25em;} +form.inline div, form.inline p { vertical-align:middle; } +form.inline label { position:relative;top:-0.25em; } form.inline input.checkbox, form.inline input.radio, form.inline input.button, form.inline button { margin:0.5em 0; } -button, input.button {position:relative;top:0.25em;} \ No newline at end of file +button, input.button { position:relative;top:0.25em; } \ No newline at end of file blueprint/src/ie.css @@ -47,7 +47,6 @@ hr.space { h1,h2,h3,h4,h5,h6 { font-family: "Helvetica Neue", Arial, "Lucida Grande", sans-serif; } code { font:.9em "Courier New", Monaco, Courier, monospace; } -img { float:left; margin:1.5em 1.5em 1.5em 0; } a img { border:none; } p img.top { margin-top: 0; } blueprint/src/print.css @@ -7,6 +7,7 @@ /* Default font settings. The font-size percentage is of 16px. (0.75 * 16px = 12px) */ +html { font-size:100.01%; } body { font-size: 75%; color: #222; blueprint/src/typography.css @@ -29,8 +29,8 @@ /* Use these classes to set the width of a column. */ .span-1 {width: <%= column_width %>px;} <% (2..column_count-1).each do |column| %> -.span-<%= column %> {width: <%= (column_width + ((column - 1) * (column_width + gutter_width))).to_i %>px;<%= "margin: 0;" if column == column_count %>}<% end %> -.span-<%= column_count %>, div.span-<%= column_count %> { width:<%= page_width %>px; margin:0; } +.span-<%= column %> {width: <%= (column_width + ((column - 1) * (column_width + gutter_width))).to_i %>px;<%= "margin-right: 0;" if column == column_count %>}<% end %> +.span-<%= column_count %>, div.span-<%= column_count %> { width:<%= page_width %>px; margin-right:0; } /* Use these classes to set the width of an input. */ <%= (1..column_count).map {|column| "input.span-#{column}, textarea.span-#{column}"}.join(", ") %> { lib/blueprint/grid.css.erb 414d9242c3b3ffdf5e2d90a84c87a4c4c711a135 Montoya sirokai@gmail.com http://github.com/joshuaclayton/blueprint-css/commit/9be685760014b3258dcd83913b9b19f130551b2f 9be685760014b3258dcd83913b9b19f130551b2f 2009-08-20T14:19:16-07:00 2009-08-20T14:19:16-07:00 Fixing bugs, see Lighthouse for changes 61a79cefc8d0125a1ce0232870dab6f2d7e8a492 Montoya sirokai@gmail.com