Permalink
Browse files

CSS can now be generated that is 100% backwards compatible with bluep…

…rint-css (see the default and fancy_type examples).

This is a backport of the sass branch of blueprint-css that I've been working on at:
http://github.com/chriseppstein/blueprint-css/tree/sass

Summary of changes:
* Factored a span mixin out of column this can be used to set the width without making a "column"
* Added a debug module to hold styles and mixins useful during development
* Added a scaffolding module to hold styles that are only useful if you're
  not doing much styling on your project and just want things to look good.
* Factored out an interaction module that holds styles and mixins related to user-feedback
* Ported the fancy-type plugin from blueprint-css
* Fixed a number of calculation errors in the grid module
* New examples - stolen from blueprint-css to achieve pixel-perfect matching
  • Loading branch information...
chriseppstein committed Aug 15, 2008
1 parent 6f0919f commit 55e90b2fbadb452d3ae3744f97ff0b3c3d0cadbd
View
@@ -56,7 +56,21 @@ task :examples do
output.write(engine.render)
output.close
end
+ # copy any other non-haml and non-sass files directly over
target_dir = "compiled_examples/#{example.sub(%r{.*/},'')}"
- FileUtils.cp_r("#{example}/images", target_dir) if File.exists?("#{example}/images")
+ other_files = FileList["#{example}/**/*"]
+ other_files.exclude "**/*.sass", "*.haml"
+ other_files.each do |file|
+
+ if File.directory?(file)
+ FileUtils.mkdir_p(file)
+ elsif File.file?(file)
+ target_file = "#{target_dir}/#{file[(example.size+1)..-1]}"
+ # puts "mkdir -p #{File.dirname(target_file)}"
+ FileUtils.mkdir_p(File.dirname(target_file))
+ # puts "cp #{file} #{target_file}"
+ FileUtils.cp(file, target_file)
+ end
+ end
end
end
@@ -4,10 +4,13 @@
@import modules/typography
@import modules/utilities
@import modules/form
+@import modules/interaction
+@import modules/debug
=blueprint
+blueprint-grid
+blueprint-typography
+blueprint-utilities
- form
- +blueprint-form
+ +blueprint-debug
+ +blueprint-interaction
+ +blueprint-form
@@ -0,0 +1,9 @@
+=showgrid(!image = images/grid.png)
+ :background= url(!image)
+
+=blueprint-debug(!grid_image = images/grid.png)
+ // Use this class on any div.span / container to see the grid.
+ // TODO: prefix this with the project path.
+ .showgrid
+ +showgrid(!grid_image)
+
@@ -0,0 +1,79 @@
+/*
+ To install the fancy type plugin, mixin +fancy-type to your project's body:
+ body
+ +fancy-type
+
+/* Indentation instead of line shifts for sibling paragraphs. Mixin to a style like p + p
+=sibling-indentation
+ :text-indent 2em
+ :margin-top -1.5em
+ /* Don't want this in forms.
+ form &
+ :text-indent 0
+
+/*
+ For great looking type, use this code instead of asdf:
+ <span class="alt">asdf</span>
+ Best used on prepositions and ampersands.
+
+=alt
+ :color #666
+ :font-family "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", Georgia, serif
+ :font-style italic
+ :font-weight normal
+
+/*
+ For great looking quote marks in titles, replace "asdf" with:
+ <span class="dquo">&#8220;</span>asdf&#8221;
+ (That is, when the title starts with a quote mark).
+ (You may have to change this value depending on your font size).
+=dquo
+ :margin-left -.5em
+
+/*
+ Reduced size type with incremental leading
+ (http://www.markboulton.co.uk/journal/comments/incremental_leading/)
+
+ This could be used for side notes. For smaller type, you don't necessarily want to
+ follow the 1.5x vertical rhythm -- the line-height is too much.
+
+ Using this class, it reduces your font size and line-height so that for
+ every four lines of normal sized type, there is five lines of the sidenote. eg:
+
+ New type size in em's:
+ 10px (wanted side note size) / 12px (existing base size) = 0.8333 (new type size in ems)
+
+ New line-height value:
+ 12px x 1.5 = 18px (old line-height)
+ 18px x 4 = 72px
+ 72px / 5 = 14.4px (new line height)
+ 14.4px / 10px = 1.44 (new line height in em's)
+=incr
+ :font-size 10px
+ :line-height 1.44em
+ :margin-bottom 1.5em
+
+/*
+ Surround uppercase words and abbreviations with this class.
+ Based on work by Jørgen Arnor Gårdsø Lom [http://twistedintellect.com/] */
+=caps
+ :font-variant small-caps
+ :letter-spacing 1px
+ :text-transform lowercase
+ :font-size 1.2em
+ :line-height 1%
+ :font-weight bold
+ :padding 0 2px
+
+=fancy-type
+ .caps
+ +caps
+ p.incr,
+ .incr p
+ +incr
+ .dquo
+ +dquo
+ .alt
+ +alt
+ p + p
+ +sibling-indentation
@@ -41,28 +41,3 @@
:width 390px
:height 250px
:padding 5px
- .error
- :padding .8em
- :margin-bottom 1em
- :border 2px solid #ddd
- :background= !error_bg_color
- :color= !error_color
- :border-color= !error_border_color
- a
- :color= !error_color
- .notice, .success
- :padding .8em
- :margin-bottom 1em
- :border 2px solid #ddd
- .notice
- :background= !notice_bg_color
- :color= !notice_color
- :border-color= !notice_border_color
- a
- :color= !notice_color
- .success
- :background= !success_bg_color
- :color= !success_color
- :border-color= !success_border_color
- a
- :color= !success_color
@@ -40,10 +40,13 @@
:margin
:right 0
+=span(!n)
+ :width = !layout_grid_width * !n + (!layout_grid_margin * (!n - 1))
+
// Use this mixins to set the width of n columns.
=column(!n, !last = false)
:float left
- :width = !layout_grid_width * !n + (!layout_grid_margin * (!n - 1))
+ +span(!n)
@if !last
+last
@if !!last
@@ -52,7 +55,7 @@
// Mixin to a column to append n empty cols.
=append(!n)
:padding-right = (!layout_grid_outer_width) * !n
-
+
// Mixin to a column to prepend n empty cols.
=prepend(!n)
:padding-left = (!layout_grid_outer_width) * !n
@@ -61,17 +64,17 @@
=pull(!n)
:float left
:position relative
- :margin-left = (!layout_grid_outer_width) * (2 - !n)
+ :margin-left = -!layout_grid_outer_width * !n
// mixin to a column to push it n columns to the right
=push(!n)
:float right
:position relative
:margin
:top 0
- :right = !layout_grid_outer_width * (1 - !n)
+ :right = -!layout_grid_outer_width * !n
:bottom 1.5em
- :left = !layout_grid_outer_width
+ :left = -!layout_grid_outer_width * !n
// Border on right hand side of a column.
=border
@@ -81,26 +84,20 @@
// Border with more whitespace, spans one column.
=colborder
- :padding-right 38px
- :margin-right 35px
+ :padding-right= !layout_grid_width - 0.5 * !layout_grid_margin - 1
+ :margin-right= !layout_grid_width - 0.5 * !layout_grid_margin
: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
+ :background #ddd
:color #ddd
- :clear both
- :float none
- :width 100%
+ :clear both
+ :float none
+ :width 100%
:height .1em
:margin 0 0 1.45em
- :border none
+ :border none
// Mixin this to an hr to make a horizontal spacer across a column.
=colspacer
@@ -112,13 +109,16 @@
// 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.
@for !n from 1 to !layout_grid_columns + 1
.span-#{!n}
- +column(!n, !n == !layout_grid_columns)
+ +span(!n)
+ div
+ &.span-#{!n}
+ +column(!n, !n == !layout_grid_columns)
+ // The last column in a row needs this class (or mixin) or it will end up on the next row.
+ div.last
+ +last
// Add these to a column to append empty cols.
@for !n from 1 to !layout_grid_columns
.append-#{!n}
@@ -144,5 +144,5 @@
+colborder
hr
+colruler
- hr.spacer
+ hr.space
+colspacer
@@ -0,0 +1,55 @@
+=feedback-base
+ :padding .8em
+ :margin-bottom 1em
+ :border 2px solid #ddd
+
+=error
+ +feedback-base
+ :background= !error_bg_color
+ :color= !error_color
+ :border-color= !error_border_color
+ a
+ :color= !error_color
+
+=notice
+ +feedback-base
+ :background= !notice_bg_color
+ :color= !notice_color
+ :border-color= !notice_border_color
+ a
+ :color= !notice_color
+
+=success
+ +feedback-base
+ :background= !success_bg_color
+ :color= !success_color
+ :border-color= !success_border_color
+ a
+ :color= !success_color
+
+=highlight
+ :background #ff0
+
+=added
+ :background #060
+ :color #fff
+
+=removed
+ :background #900
+ :color #fff
+
+=blueprint-interaction
+ .error
+ +error
+ .notice
+ +notice
+ .success
+ +success
+ .hide
+ :display none
+ .highlight
+ +highlight
+ .added
+ +added
+ .removed
+ +removed
@@ -0,0 +1,17 @@
+/*
+ The styles contained here are meant to provide for an attractive experience out of the box
+ and are meant to be removed once custom visual design begins.
+
+=body-margins
+ :margin 1.5em 0
+
+// Mixin +box to create a padded box inside a column.
+=box
+ :padding 1.5em
+ :margin-bottom 1.5em
+ :background #E5ECF9
+
+=scaffolding
+ +body-margins
+ .box
+ +box
@@ -5,7 +5,7 @@
// This is recommended now:
// [http://www.sitepoint.com/examples/clearing_floats/example2.php]
=clearfix
- :overflow none
+ :overflow auto
// This makes ie6 get layout
html &
:display inline-block
@@ -16,25 +16,11 @@
=nowrap
:white-space 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
@@ -53,14 +39,6 @@
: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
Oops, something went wrong.

0 comments on commit 55e90b2

Please sign in to comment.