blueprint/blueprint.sass blueprint/modules/form.sass blueprint/modules/ie.sass blueprint/modules/noob.sass examples/.DS_Store examples/blueprint_default/README examples/blueprint_default/application-ie.sass examples/blueprint_default/application-print.sass examples/blueprint_default/application.sass examples/blueprint_using_body_class/README examples/blueprint_using_body_class/application-ie.sass examples/blueprint_using_body_class/application-print.sass examples/blueprint_using_body_class/application.sass examples/blueprint_using_body_class/blueprint-ie.sass examples/blueprint_using_body_class/blueprint-print.sass examples/blueprint_using_body_class/blueprint.sass examples/blueprint_using_body_class/modules examples/blueprint_using_special_form_class/README examples/blueprint_using_special_form_class/application-ie.sass examples/blueprint_using_special_form_class/application-print.sass examples/blueprint_using_special_form_class/application.sass install.rb @@ -0,0 +1,7 @@ +Blueprint-Sass is a project to port the blueprint-css framework to SASS. + +To install: +* copy the contents of the blueprint directory into your sass folder. + +What it provides: +* sass mixins to help you define blueprint styles for your application. \ No newline at end of file README @@ -1,32 +1 @@ -body - :text-align center - - -.container - :text-align left - - -* html - legend - :margin -18px -8px 16px 0 - :padding 0 - - -ol - :margin-left 2em - - -sup - :vertical-align text-top - - -sub - :vertical-align text-bottom - - -html>body p code - :*white-space normal - - -hr - :margin -8px auto 11px +@import modules/ie blueprint/blueprint-ie.sass @@ -1,5 +1,5 @@ !font_color= #333 -!font_background= #fff +!font_background= transparent !quiet_color= !font_color + #333 !loud_color= !font_color - #222 blueprint/modules/colors.sass @@ -16,277 +16,752 @@ // * subtraction.com/archives/2007/0318_oh_yeeaahh.php // -------------------------------------------------------------- -@import modules/grid-base +@import modules/utilities -// Use this class on any div.span / container to see the grid. -.showgrid - :background url(/images/grid.png) +// Main layout grid, edit these parameters to build your grid and container sizes. +!layout_grid_columns = 24 +!layout_grid_width = 30px +!layout_grid_margin = 10px -// Body margin for a sensile default look. -body - :margin 0 0 +// Do not edit below this line unless you really know what you're doing. +!layout_grid_size = !layout_grid_width * !layout_grid_columns + (!layout_grid_margin * (!layout_grid_columns - 1)) -// A container should group all your columns -.container - +container +// Columns +// Note: If you use this mixin without the class and want to support ie6 +// you must set text-align left on your container element in an IE stylesheet. +=container + :width = !layout_grid_size + :margin 0 auto + +clearfix - // The last column in a row needs this class (or mixin) or it will end up on the next row. - div.last - +last +// Sets up basic grid floating and margin. +=span-base + :float left + :margin-right = !layout_grid_margin - // Use these classes (or mixins) to set the width of a column. - .span-1 - +span-1 - .span-2 - +span-2 - .span-3 - +span-3 - .span-4 - +span-4 - .span-5 - +span-5 - .span-6 - +span-6 - .span-7 - +span-7 - .span-8 - +span-8 - .span-9 - +span-9 - .span-10 - +span-10 - .span-11 - +span-11 - .span-12 - +span-12 - .span-13 - +span-13 - .span-14 - +span-14 - .span-15 - +span-15 - .span-16 - +span-16 - .span-17 - +span-17 - .span-18 - +span-18 - .span-19 - +span-19 - .span-20 - +span-20 - .span-21 - +span-21 - .span-22 - +span-22 - .span-23 - +span-23 - .span-24 - +span-24 +// Use these mixins to set the width of a column. +=span-1 + +span-base + :width = !layout_grid_width +=span-2 + +span-base + :width = !layout_grid_width * 2 + !layout_grid_margin +=span-3 + +span-base + :width = !layout_grid_width * 3 + (!layout_grid_margin * 2) +=span-4 + +span-base + :width = !layout_grid_width * 4 + (!layout_grid_margin * 3) +=span-5 + +span-base + :width = !layout_grid_width * 5 + (!layout_grid_margin * 4) +=span-6 + +span-base + :width = !layout_grid_width * 6 + (!layout_grid_margin * 5) +=span-7 + +span-base + :width = !layout_grid_width * 7 + (!layout_grid_margin * 6) +=span-8 + +span-base + :width = !layout_grid_width * 8 + (!layout_grid_margin * 7) +=span-9 + +span-base + :width = !layout_grid_width * 9 + (!layout_grid_margin * 8) +=span-10 + +span-base + :width = !layout_grid_width * 10 + (!layout_grid_margin * 9) +=span-11 + +span-base + :width = !layout_grid_width * 11 + (!layout_grid_margin * 10) +=span-12 + +span-base + :width = !layout_grid_width * 12 + (!layout_grid_margin * 11) +=span-13 + +span-base + :width = !layout_grid_width * 13 + (!layout_grid_margin * 12) +=span-14 + +span-base + :width = !layout_grid_width * 14 + (!layout_grid_margin * 13) +=span-15 + +span-base + :width = !layout_grid_width * 15 + (!layout_grid_margin * 14) +=span-16 + +span-base + :width = !layout_grid_width * 16 + (!layout_grid_margin * 15) +=span-17 + +span-base + :width = !layout_grid_width * 17 + (!layout_grid_margin * 16) +=span-18 + +span-base + :width = !layout_grid_width * 18 + (!layout_grid_margin * 17) +=span-19 + +span-base + :width = !layout_grid_width * 19 + (!layout_grid_margin * 18) +=span-20 + +span-base + :width = !layout_grid_width * 20 + (!layout_grid_margin * 19) +=span-21 + +span-base + :width = !layout_grid_width * 21 + (!layout_grid_margin * 20) +=span-22 + +span-base + :width = !layout_grid_width * 22 + (!layout_grid_margin * 21) +=span-23 + +span-base + :width = !layout_grid_width * 23 + (!layout_grid_margin * 22) +=span-24 + +span-base + :width = !layout_grid_width * 24 + (!layout_grid_margin * 23) + :margin + :right 0 - // Add these to a column to append empty cols. - .append-1 - +append-1 - .append-2 - +append-2 - .append-3 - +append-3 - .append-4 - +append-4 - .append-5 - +append-5 - .append-6 - +append-6 - .append-7 - +append-7 - .append-8 - +append-8 - .append-9 - +append-9 - .append-10 - +append-10 - .append-11 - +append-11 - .append-12 - +append-12 - .append-13 - +append-13 - .append-14 - +append-14 - .append-15 - +append-15 - .append-16 - +append-16 - .append-17 - +append-17 - .append-18 - +append-18 - .append-19 - +append-19 - .append-21 - +append-21 - .append-22 - +append-22 - .append-23 - +append-23 +// Mixin to a column to append empty cols. +=append-1 + :padding-right = !layout_grid_width + !layout_grid_margin +=append-2 + :padding-right = (!layout_grid_width + !layout_grid_margin) * 2 +=append-3 + :padding-right = (!layout_grid_width + !layout_grid_margin) * 3 +=append-4 + :padding-right = (!layout_grid_width + !layout_grid_margin) * 4 +=append-5 + :padding-right = (!layout_grid_width + !layout_grid_margin) * 5 +=append-6 + :padding-right = (!layout_grid_width + !layout_grid_margin) * 6 +=append-7 + :padding-right = (!layout_grid_width + !layout_grid_margin) * 7 +=append-8 + :padding-right = (!layout_grid_width + !layout_grid_margin) * 8 +=append-9 + :padding-right = (!layout_grid_width + !layout_grid_margin) * 9 +=append-10 + :padding-right = (!layout_grid_width + !layout_grid_margin) * 10 +=append-11 + :padding-right = (!layout_grid_width + !layout_grid_margin) * 11 +=append-12 + :padding-right = (!layout_grid_width + !layout_grid_margin) * 12 +=append-13 + :padding-right = (!layout_grid_width + !layout_grid_margin) * 13 +=append-14 + :padding-right = (!layout_grid_width + !layout_grid_margin) * 14 +=append-15 + :padding-right = (!layout_grid_width + !layout_grid_margin) * 15 +=append-16 + :padding-right = (!layout_grid_width + !layout_grid_margin) * 16 +=append-17 + :padding-right = (!layout_grid_width + !layout_grid_margin) * 17 +=append-18 + :padding-right = (!layout_grid_width + !layout_grid_margin) * 18 +=append-19 + :padding-right = (!layout_grid_width + !layout_grid_margin) * 19 +=append-20 + :padding-right = (!layout_grid_width + !layout_grid_margin) * 20 +=append-21 + :padding-right = (!layout_grid_width + !layout_grid_margin) * 21 +=append-22 + :padding-right = (!layout_grid_width + !layout_grid_margin) * 22 +=append-23 + :padding-right = (!layout_grid_width + !layout_grid_margin) * 23 - // Add these to a column to prepend empty cols. - .prepend-1 - +prepend-1 - .prepend-2 - +prepend-2 - .prepend-3 - +prepend-3 - .prepend-4 - +prepend-4 - .prepend-5 - +prepend-5 - .prepend-6 - +prepend-6 - .prepend-7 - +prepend-7 - .prepend-8 - +prepend-8 - .prepend-9 - +prepend-9 - .prepend-10 - +prepend-10 - .prepend-11 - +prepend-11 - .prepend-12 - +prepend-12 - .prepend-13 - +prepend-13 - .prepend-14 - +prepend-14 - .prepend-15 - +prepend-15 - .prepend-16 - +prepend-16 - .prepend-17 - +prepend-17 - .prepend-18 - +prepend-18 - .prepend-19 - +prepend-19 - .prepend-21 - +prepend-21 - .prepend-22 - +prepend-22 - .prepend-23 - +prepend-23 - // Use these classes on an element to push it into the - // next column, or to pull it into the previous column. +// Mixin to a column to prepend empty cols. +=prepend-1 + :padding-left = !layout_grid_width + !layout_grid_margin +=prepend-2 + :padding-left = (!layout_grid_width + !layout_grid_margin) * 2 +=prepend-3 + :padding-left = (!layout_grid_width + !layout_grid_margin) * 3 +=prepend-4 + :padding-left = (!layout_grid_width + !layout_grid_margin) * 4 +=prepend-5 + :padding-left = (!layout_grid_width + !layout_grid_margin) * 5 +=prepend-6 + :padding-left = (!layout_grid_width + !layout_grid_margin) * 6 +=prepend-7 + :padding-left = (!layout_grid_width + !layout_grid_margin) * 7 +=prepend-8 + :padding-left = (!layout_grid_width + !layout_grid_margin) * 8 +=prepend-9 + :padding-left = (!layout_grid_width + !layout_grid_margin) * 9 +=prepend-10 + :padding-left = (!layout_grid_width + !layout_grid_margin) * 10 +=prepend-11 + :padding-left = (!layout_grid_width + !layout_grid_margin) * 11 +=prepend-12 + :padding-left = (!layout_grid_width + !layout_grid_margin) * 12 +=prepend-13 + :padding-left = (!layout_grid_width + !layout_grid_margin) * 13 +=prepend-14 + :padding-left = (!layout_grid_width + !layout_grid_margin) * 14 +=prepend-15 + :padding-left = (!layout_grid_width + !layout_grid_margin) * 15 +=prepend-16 + :padding-left = (!layout_grid_width + !layout_grid_margin) * 16 +=prepend-17 + :padding-left = (!layout_grid_width + !layout_grid_margin) * 17 +=prepend-18 + :padding-left = (!layout_grid_width + !layout_grid_margin) * 18 +=prepend-19 + :padding-left = (!layout_grid_width + !layout_grid_margin) * 19 +=prepend-20 + :padding-left = (!layout_grid_width + !layout_grid_margin) * 20 +=prepend-21 + :padding-left = (!layout_grid_width + !layout_grid_margin) * 21 +=prepend-22 + :padding-left = (!layout_grid_width + !layout_grid_margin) * 22 +=prepend-23 + :padding-left = (!layout_grid_width + !layout_grid_margin) * 23 - .pull-1 - +pull-1 - .pull-2 - +pull-2 - .pull-3 - +pull-3 - .pull-4 - +pull-4 - .pull-5 - +pull-5 - .pull-6 - +pull-6 - .pull-7 - +pull-7 - .pull-8 - +pull-8 - .pull-9 - +pull-9 - .pull-10 - +pull-10 - .pull-11 - +pull-11 - .pull-12 - +pull-12 - .pull-13 - +pull-13 - .pull-14 - +pull-14 - .pull-15 - +pull-15 - .pull-16 - +pull-16 - .pull-17 - +pull-17 - .pull-18 - +pull-18 - .pull-19 - +pull-19 - .pull-21 - +pull-21 - .pull-22 - +pull-22 - .pull-23 - +pull-23 - .pull-24 - +pull-24 +=pull-base + :float left + :position relative - .push-1 - +push-1 - .push-2 - +push-2 - .push-3 - +push-3 - .push-4 - +push-4 - .push-5 - +push-5 - .push-6 - +push-6 - .push-7 - +push-7 - .push-8 - +push-8 - .push-9 - +push-9 - .push-10 - +push-10 - .push-11 - +push-11 - .push-12 - +push-12 - .push-13 - +push-13 - .push-14 - +push-14 - .push-15 - +push-15 - .push-16 - +push-16 - .push-17 - +push-17 - .push-18 - +push-18 - .push-19 - +push-19 - .push-21 - +push-21 - .push-22 - +push-22 - .push-23 - +push-23 - .push-24 - +push-24 +=pull-1 + +pull-base + :margin-left = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 2) +=pull-2 + +pull-base + :margin-left = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 3) +=pull-3 + +pull-base + :margin-left = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 4) +=pull-4 + +pull-base + :margin-left = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 5) +=pull-5 + +pull-base + :margin-left = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 6) +=pull-6 + +pull-base + :margin-left = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 7) +=pull-7 + +pull-base + :margin-left = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 8) +=pull-8 + +pull-base + :margin-left = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 9) +=pull-9 + +pull-base + :margin-left = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 10) +=pull-10 + +pull-base + :margin-left = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 11) +=pull-11 + +pull-base + :margin-left = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 12) +=pull-12 + +pull-base + :margin-left = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 13) +=pull-13 + +pull-base + :margin-left = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 14) +=pull-14 + +pull-base + :margin-left = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 15) +=pull-15 + +pull-base + :margin-left = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 16) +=pull-16 + +pull-base + :margin-left = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 17) +=pull-17 + +pull-base + :margin-left = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 18) +=pull-18 + +pull-base + :margin-left = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 19) +=pull-19 + +pull-base + :margin-left = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 20) +=pull-20 + +pull-base + :margin-left = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 21) +=pull-21 + +pull-base + :margin-left = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 22) +=pull-22 + +pull-base + :margin-left = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 23) +=pull-23 + +pull-base + :margin-left = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 24) +=pull-24 + +pull-base + :margin-left = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 25) - //*** The following classes are provided for convenience. You can comment them out if you don't want them. ***// - // Border on right hand side of a column. You can comment this out if you don't plan to use it. - div.border - +border +=push-base + :float right + :position relative - // Border with more whitespace, spans one column. - div.colborder - +colborder +=push-1 + +push-base + :margin + :top 0 + :right = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 2) + :bottom 1.5em + :left = !layout_grid_width + !layout_grid_margin +=push-2 + +push-base + :margin + :top 0 + :right = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 3) + :bottom 1.5em + :right = (!layout_grid_width + !layout_grid_margin) * 2 +=push-3 + +push-base + :margin + :top 0 + :right = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 4) + :bottom 1.5em + :left = (!layout_grid_width + !layout_grid_margin) * 3 +=push-4 + +push-base + :margin + :top 0 + :right = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 5) + :bottom 1.5em + :left = (!layout_grid_width + !layout_grid_margin) * 4 +=push-5 + +push-base + :margin + :top 0 + :right = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 6) + :bottom 1.5em + :left = (!layout_grid_width + !layout_grid_margin) * 5 +=push-6 + +push-base + :margin + :top 0 + :right = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 7) + :bottom 1.5em + :left = (!layout_grid_width + !layout_grid_margin) * 6 +=push-7 + +push-base + :margin + :top 0 + :right = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 8) + :bottom 1.5em + :left = (!layout_grid_width + !layout_grid_margin) * 7 +=push-8 + +push-base + :margin + :top 0 + :right = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 9) + :bottom 1.5em + :left = (!layout_grid_width + !layout_grid_margin) * 8 +=push-9 + +push-base + :margin + :top 0 + :right = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 10) + :bottom 1.5em + :left = (!layout_grid_width + !layout_grid_margin) * 9 +=push-10 + +push-base + :margin + :top 0 + :right = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 11) + :bottom 1.5em + :left = (!layout_grid_width + !layout_grid_margin) * 10 +=push-11 + +push-base + :margin + :top 0 + :right = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 12) + :bottom 1.5em + :left = (!layout_grid_width + !layout_grid_margin) * 11 +=push-12 + +push-base + :margin + :top 0 + :right = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 13) + :bottom 1.5em + :left = (!layout_grid_width + !layout_grid_margin) * 12 +=push-13 + +push-base + :margin + :top 0 + :right = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 14) + :bottom 1.5em + :left = (!layout_grid_width + !layout_grid_margin) * 13 +=push-14 + +push-base + :margin + :top 0 + :right = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 15) + :bottom 1.5em + :left = (!layout_grid_width + !layout_grid_margin) * 14 +=push-15 + +push-base + :margin + :top 0 + :right = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 16) + :bottom 1.5em + :left = (!layout_grid_width + !layout_grid_margin) * 15 +=push-16 + +push-base + :margin + :top 0 + :right = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 17) + :bottom 1.5em + :left = (!layout_grid_width + !layout_grid_margin) * 16 +=push-17 + +push-base + :margin + :top 0 + :right = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 18) + :bottom 1.5em + :left = (!layout_grid_width + !layout_grid_margin) * 17 +=push-18 + +push-base + :margin + :top 0 + :right = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 19) + :bottom 1.5em + :left = (!layout_grid_width + !layout_grid_margin) * 18 +=push-19 + +push-base + :margin + :top 0 + :right = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 20) + :bottom 1.5em + :left = (!layout_grid_width + !layout_grid_margin) * 19 +=push-20 + +push-base + :margin + :top 0 + :right = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 21) + :bottom 1.5em + :left = (!layout_grid_width + !layout_grid_margin) * 20 +=push-21 + +push-base + :margin + :top 0 + :right = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 22) + :bottom 1.5em + :left = (!layout_grid_width + !layout_grid_margin) * 21 +=push-22 + +push-base + :margin + :top 0 + :right = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 23) + :bottom 1.5em + :left = (!layout_grid_width + !layout_grid_margin) * 22 +=push-23 + +push-base + :margin + :top 0 + :right = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 24) + :bottom 1.5em + :left = (!layout_grid_width + !layout_grid_margin) * 23 +=push-24 + +push-base + :margin + :top 0 + :right = !layout_grid_width + !layout_grid_margin - ((!layout_grid_width + !layout_grid_margin) * 25) + :bottom 1.5em + :left = (!layout_grid_width + !layout_grid_margin) * 24 - hr - +colruler - - hr.spacer - +colspacer -.clearfix - +clearfix +// The last column in a row needs these styles or it will end up on the next row. +=last + :margin + :right 0 + +// Border on right hand side of a column. +=border + :padding-right = !layout_grid_margin / 2 - 1 + :margin-right = !layout_grid_margin / 2 + :border-right 1px solid #eee + +// Border with more whitespace, spans one column. +=colborder + :padding-right 38px + :margin-right 35px + :border-right 1px solid #eee + +// Mixin +box to create a padded box inside a column. +=box + :padding 1.5em + :margin-bottom 1.5em + :background #E5ECF9 + +// Mixin this to an hr to make a horizontal ruler across a column. +=colruler + :background #ddd + :color #ddd + :clear both + :float none + :width 100% + :height .1em + :margin 0 0 1.45em + :border none + +// Mixin this to an hr to make a horizontal spacer across a column. +=colspacer + +colruler + :background #fff + :color #fff + +=blueprint-grid + // A container should group all your columns + .container + +container + + // The last column in a row needs this class (or mixin) or it will end up on the next row. + div.last + +last + + // Use these classes (or mixins) to set the width of a column. + .span-1 + +span-1 + .span-2 + +span-2 + .span-3 + +span-3 + .span-4 + +span-4 + .span-5 + +span-5 + .span-6 + +span-6 + .span-7 + +span-7 + .span-8 + +span-8 + .span-9 + +span-9 + .span-10 + +span-10 + .span-11 + +span-11 + .span-12 + +span-12 + .span-13 + +span-13 + .span-14 + +span-14 + .span-15 + +span-15 + .span-16 + +span-16 + .span-17 + +span-17 + .span-18 + +span-18 + .span-19 + +span-19 + .span-20 + +span-20 + .span-21 + +span-21 + .span-22 + +span-22 + .span-23 + +span-23 + .span-24 + +span-24 + + // Add these to a column to append empty cols. + .append-1 + +append-1 + .append-2 + +append-2 + .append-3 + +append-3 + .append-4 + +append-4 + .append-5 + +append-5 + .append-6 + +append-6 + .append-7 + +append-7 + .append-8 + +append-8 + .append-9 + +append-9 + .append-10 + +append-10 + .append-11 + +append-11 + .append-12 + +append-12 + .append-13 + +append-13 + .append-14 + +append-14 + .append-15 + +append-15 + .append-16 + +append-16 + .append-17 + +append-17 + .append-18 + +append-18 + .append-19 + +append-19 + .append-21 + +append-21 + .append-22 + +append-22 + .append-23 + +append-23 + + // Add these to a column to prepend empty cols. + .prepend-1 + +prepend-1 + .prepend-2 + +prepend-2 + .prepend-3 + +prepend-3 + .prepend-4 + +prepend-4 + .prepend-5 + +prepend-5 + .prepend-6 + +prepend-6 + .prepend-7 + +prepend-7 + .prepend-8 + +prepend-8 + .prepend-9 + +prepend-9 + .prepend-10 + +prepend-10 + .prepend-11 + +prepend-11 + .prepend-12 + +prepend-12 + .prepend-13 + +prepend-13 + .prepend-14 + +prepend-14 + .prepend-15 + +prepend-15 + .prepend-16 + +prepend-16 + .prepend-17 + +prepend-17 + .prepend-18 + +prepend-18 + .prepend-19 + +prepend-19 + .prepend-21 + +prepend-21 + .prepend-22 + +prepend-22 + .prepend-23 + +prepend-23 + + // Use these classes on an element to push it into the + // next column, or to pull it into the previous column. + + .pull-1 + +pull-1 + .pull-2 + +pull-2 + .pull-3 + +pull-3 + .pull-4 + +pull-4 + .pull-5 + +pull-5 + .pull-6 + +pull-6 + .pull-7 + +pull-7 + .pull-8 + +pull-8 + .pull-9 + +pull-9 + .pull-10 + +pull-10 + .pull-11 + +pull-11 + .pull-12 + +pull-12 + .pull-13 + +pull-13 + .pull-14 + +pull-14 + .pull-15 + +pull-15 + .pull-16 + +pull-16 + .pull-17 + +pull-17 + .pull-18 + +pull-18 + .pull-19 + +pull-19 + .pull-21 + +pull-21 + .pull-22 + +pull-22 + .pull-23 + +pull-23 + .pull-24 + +pull-24 + + .push-1 + +push-1 + .push-2 + +push-2 + .push-3 + +push-3 + .push-4 + +push-4 + .push-5 + +push-5 + .push-6 + +push-6 + .push-7 + +push-7 + .push-8 + +push-8 + .push-9 + +push-9 + .push-10 + +push-10 + .push-11 + +push-11 + .push-12 + +push-12 + .push-13 + +push-13 + .push-14 + +push-14 + .push-15 + +push-15 + .push-16 + +push-16 + .push-17 + +push-17 + .push-18 + +push-18 + .push-19 + +push-19 + .push-21 + +push-21 + .push-22 + +push-22 + .push-23 + +push-23 + .push-24 + +push-24 + + //*** The following classes are provided for convenience. You can comment them out if you don't want them. ***// + // Border on right hand side of a column. You can comment this out if you don't plan to use it. + div.border + +border + + // Border with more whitespace, spans one column. + div.colborder + +colborder + + hr + +colruler + + hr.spacer + +colspacer blueprint/modules/grid.sass @@ -1,96 +1,97 @@ -body - :line-height 1.5 - :font-family "Helvetica Neue", Helvetica, Arial, sans-serif - :color #000 - :background none - :font-size 10pt - - -.container - :background none - - -hr - :background #ccc - :color #ccc - :width 100% - :height 2px - :margin 2em 0 - :padding 0 - :border none +=blueprint-print + & + :line-height 1.5 + :font-family "Helvetica Neue", Helvetica, Arial, sans-serif + :color #000 + :background none + :font-size 10pt + + + .container + :background none + + + hr + :background #ccc + :color #ccc + :width 100% + :height 2px + :margin 2em 0 + :padding 0 + :border none - &.space - :background #fff - :color #fff + &.space + :background #fff + :color #fff -h1, h2, h3, h4, h5, h6 - :font-family "Helvetica Neue", Arial, "Lucida Grande", sans-serif + h1, h2, h3, h4, h5, h6 + :font-family "Helvetica Neue", Arial, "Lucida Grande", sans-serif -code - :font .9em "Courier New", Monaco, Courier, monospace + code + :font .9em "Courier New", Monaco, Courier, monospace -img - :float left - :margin 1.5em 1.5em 1.5em 0 + img + :float left + :margin 1.5em 1.5em 1.5em 0 -a - img - :border none + a + img + :border none - &:link - :background transparent - :font-weight 700 - :text-decoration underline -/* - &:after - :content " (" attr(href) ") " - :font-size 90% + &:link + :background transparent + :font-weight 700 + :text-decoration underline + /* + &:after + :content " (" attr(href) ") " + :font-size 90% -p img.top - :margin-top 0 + p img.top + :margin-top 0 -blockquote - :margin 1.5em - :padding 1em - :font-style italic - :font-size .9em + blockquote + :margin 1.5em + :padding 1em + :font-style italic + :font-size .9em -.small - :font-size .9em + .small + :font-size .9em -.large - :font-size 1.1em + .large + :font-size 1.1em -.quiet - :color #999 + .quiet + :color #999 -.hide, -.noprint, -.no-print - :display none + .hide, + .noprint, + .no-print + :display none -address, blockquote, center, dir, div, dd, dl, dt, fieldset, form, frameset, h1, h2, h3, h4, h5, h6, hr, isindex, li, menu, noframes, noscript, ol, p, pre, table, tbody, td, tfoot, th, thead, tr, ul - &.print-only - :display block -a, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var - &.print-only - :display inline + address, blockquote, center, dir, div, dd, dl, dt, fieldset, form, frameset, h1, h2, h3, h4, h5, h6, hr, isindex, li, menu, noframes, noscript, ol, p, pre, table, tbody, td, tfoot, th, thead, tr, ul + &.print-only + :display block + a, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var + &.print-only + :display inline -a:visited - :background transparent - :font-weight 700 - :text-decoration underline -/* - a:visited:after - :content " (" attr(href) ") " - :font-size 90% + a:visited + :background transparent + :font-weight 700 + :text-decoration underline + /* + a:visited:after + :content " (" attr(href) ") " + :font-size 90% blueprint/modules/print.sass @@ -1,25 +1,73 @@ -@import modules/reset-base +=reset + :margin 0 + :padding 0 + :border 0 + :font + :weight inherit + :style inherit + :size 100% + :family inherit + :vertical-align baseline -html, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p +=reset-quotation +reset + :quotes "" "" + &:before, + &:after + :content "" -body - +reset-body - -blockquote, q - +reset-quotation - -pre, a, abbr, acronym, address, code, del, dfn, em, img +=reset-table-cell +reset + :text-align left + :font-weight normal + :vertical-align middle -dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, tr +=reset-table +reset + :border-collapse separate + :border-spacing 0 + :vertical-align middle -th, td, caption - +reset-table-cell +=reset-body + +reset + :line-height 1.5 -table - +reset-table +// Mix this into the html element of your application +// if you want a global reset (recommended). +=blueprint-reset-html + +reset + div, span, object, iframe, h1, h2, h3, h4, h5, h6, p + +reset + body + +reset-body + blockquote, q + +reset-quotation + pre, a, abbr, acronym, address, code, del, dfn, em, img + +reset + dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, tr + +reset + th, td, caption + +reset-table-cell + table + +reset-table + a img + :border none -a img - :border none +// Mix this into the body element of a blueprint page +// if you want a selective reset +=blueprint-reset-body + +reset-body + div, span, object, iframe, h1, h2, h3, h4, h5, h6, p + +reset + blockquote, q + +reset-quotation + pre, a, abbr, acronym, address, code, del, dfn, em, img + +reset + dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, tr + +reset + th, td, caption + +reset-table-cell + table + +reset-table + a img + :border none \ No newline at end of file blueprint/modules/reset.sass @@ -1,226 +1,128 @@ @import modules/colors -@import modules/typography-base - -body - +normal-text - :font-size 75% - -h1 - +header-text - :font-size 3em - :line-height 1 - :margin-bottom 0.5em - - img - :margin 0 - - -h2 - +header-text - :font-size 2em - :margin-bottom 0.75em - - -h3 - +header-text - :font-size 1.5em - :line-height 1 - :margin-bottom 1em - - -h4 - +header-text - :font-size 1.2em - :line-height 1.25 - :margin-bottom 1.25em - :height 1.25em - - -h5 - +header-text - :font-size 1em - :font-weight bold - :margin-bottom 1.5em - - -h6 - +header-text - :font-size 1em - :font-weight bold - - -h2 img, h3 img, h4 img, h5 img, h6 img - :margin 0 - - -p - :margin 0 0 1.5em - - img - :float left - :margin 1.5em 1.5em 1.5em 0 - :padding 0 - - &.right - :float right - :margin 1.5em 0 1.5em 1.5em - - -a - :text-decoration underline - +link-colors - -blockquote - :margin 1.5em - :color #666 - :font-style italic - - -strong - :font-weight bold - - -em - :font-style italic - - -dfn - :font-style italic - :font-weight bold - - -sup, sub - :line-height 0 - - -abbr, acronym - :border-bottom 1px dotted #666 - - -address - :margin 0 0 1.5em - :font-style italic - - -del - :color #666 - - -pre, code - :margin 1.5em 0 - :white-space pre - +fixed-width-text - - -tt - +fixed-width-text - - -li ul, li ol - :margin 0 1.5em +=normal-text + :font-family "Helvetica Neue", Helvetica, Arial, sans-serif + :color= !font_color + :background= !font_background +=fixed-width-text + :font 1em 'andale mono', 'lucida console', monospace + :line-height 1.5 -ul - :margin 0 1.5em 1.5em 1.5em - :list-style-type disc +=header-text + :font-weight normal + :color= !header_color +=quiet + :color= !quiet_color -ol - :margin 0 1.5em 1.5em 1.5em +=loud + :color= !loud_color - -ol - :list-style-type decimal - - -dl - :margin 0 0 1.5em 0 - - dt +=blueprint-typography + +normal-text + :font-size 75% + h1 + +header-text + :font-size 3em + :line-height 1 + :margin-bottom 0.5em + img + :margin 0 + h2 + +header-text + :font-size 2em + :margin-bottom 0.75em + h3 + +header-text + :font-size 1.5em + :line-height 1 + :margin-bottom 1em + h4 + +header-text + :font-size 1.2em + :line-height 1.25 + :margin-bottom 1.25em + :height 1.25em + h5 + +header-text + :font-size 1em :font-weight bold - - -dd - :margin-left 1.5em - - -table - :margin-bottom 1.4em - :width 100% - - -th - :font-weight bold - :background #C3D9FF - :padding 4px 10px 4px 5px - - -td - :padding 4px 10px 4px 5px - - -tr.even td - :background #E5ECF9 - - -tfoot - :font-style italic - - -caption - :background #eee - - -.small - :font-size .8em - :margin-bottom 1.875em - :line-height 1.875em - - -.large - :font-size 1.2em - :line-height 2.5em - :margin-bottom 1.25em - - -.hide - :display none - - -.quiet - +quiet - -.loud - +loud - -.highlight - +highlight - -.added - +added - -.removed - +removed - -.first - :margin-left 0 - :padding-left 0 - - -.last - :margin-right 0 - :padding-right 0 - - -.top - :margin-top 0 - :padding-top 0 - - -.bottom - :margin-bottom 0 - :padding-bottom 0 - -.print-only - :display none \ No newline at end of file + :margin-bottom 1.5em + h6 + +header-text + :font-size 1em + :font-weight bold + h2 img, h3 img, h4 img, h5 img, h6 img + :margin 0 + p + :margin 0 0 1.5em + img + :float left + :margin 1.5em 1.5em 1.5em 0 + :padding 0 + &.right + :float right + :margin 1.5em 0 1.5em 1.5em + a + :text-decoration underline + +link-colors + blockquote + :margin 1.5em + :color #666 + :font-style italic + strong + :font-weight bold + em + :font-style italic + dfn + :font-style italic + :font-weight bold + sup, sub + :line-height 0 + abbr, acronym + :border-bottom 1px dotted #666 + address + :margin 0 0 1.5em + :font-style italic + del + :color #666 + pre, code + :margin 1.5em 0 + :white-space pre + +fixed-width-text + tt + +fixed-width-text + li ul, li ol + :margin 0 1.5em + ul + :margin 0 1.5em 1.5em 1.5em + :list-style-type disc + ol + :margin 0 1.5em 1.5em 1.5em + :list-style-type decimal + dl + :margin 0 0 1.5em 0 + dt + :font-weight bold + dd + :margin-left 1.5em + table + :margin-bottom 1.4em + :width 100% + th + :font-weight bold + :background #C3D9FF + :padding 4px 10px 4px 5px + td + :padding 4px 10px 4px 5px + tr.even td + :background #E5ECF9 + tfoot + :font-style italic + caption + :background #eee + .quiet + +quiet + .loud + +loud blueprint/modules/typography.sass @@ -1,9 +1,76 @@ -@import modules/utilities-base -// Regular clearing -// apply to column that should drop below previous ones. +// Clearing floats without extra markup +// Based on How To Clear Floats Without Structural Markup by PiE +// [http://www.positioniseverything.net/easyclearing.html] +=clearfix + display: inline-block + &:after + content: "." + display: block + height: 0 + clear: both + visibility: hidden + * html & + height: 1px -.clear - :clear both +=nowrap + :white-space nowrap -.nowrap - +nowrap +=highlight + :background #ff0 + +=added + :background #060 + :color #fff + +=removed + :background #900 + :color #fff + + +// Most of these utility classes are not "semantic". If you use them, +// you are mixing your content and presentation. For shame! + +=blueprint-utilities + // Use this class on any div.span / container to see the grid. + .showgrid + :background url(/images/grid.png) + // Regular clearing apply to column that should drop below previous ones. + .clear + :clear both + // turn off text wrapping for the element. + .nowrap + +nowrap + // Apply to an element that has floated children to make the bottom + // of the element fall _below_ the floated children. + .clearfix + +clearfix + .small + :font-size .8em + :margin-bottom 1.875em + :line-height 1.875em + .large + :font-size 1.2em + :line-height 2.5em + :margin-bottom 1.25em + .hide + :display none + .highlight + +highlight + .added + +added + .removed + +removed + .first + :margin-left 0 + :padding-left 0 + .last + :margin-right 0 + :padding-right 0 + .top + :margin-top 0 + :padding-top 0 + .bottom + :margin-bottom 0 + :padding-bottom 0 + .print-only + :display none blueprint/modules/utilities.sass blueprint/blueprint-constants.sass blueprint/blueprint-screen.sass blueprint/modules/forms.sass blueprint/modules/grid-base.sass blueprint/modules/reset-base.sass blueprint/modules/typography-base.sass blueprint/modules/utilities-base.sass 35dcd888b602e13359050b2471d9cc108bb41fcf Chris Eppstein chris@eppsteins.net http://github.com/chriseppstein/blueprint-sass/commit/000c28b3983938965b1b91bbab0dec03b921cc26 000c28b3983938965b1b91bbab0dec03b921cc26 2008-07-02T10:42:49-07:00 2008-07-02T10:42:49-07:00 only provide mixins now, and document how to mix them correctly into your application. 378a91ecf864267aeed2e09832ee1a28b072e576 Chris Eppstein chris@eppsteins.net