From 53960d9c25c6877d1bc7d31cf40ca3bba719b717 Mon Sep 17 00:00:00 2001 From: Chris Eppstein Date: Fri, 3 Apr 2009 12:11:44 -0700 Subject: [PATCH] Port of the Blueprint Buttons plugin to Compass. This port adds semantic win and color customization to your blueprint button styles. It also let's you choose whether you want to float them right, left, or leave them inline-block. To install this plugin into your project run the following command. compass -f blueprint -p buttons Or if you have a rails project: compass --rails -f blueprint -p buttons --- Manifest | 12 +++ .../images/buttons/cross.png | Bin 0 -> 655 bytes .../blueprint_plugins/images/buttons/key.png | Bin 0 -> 455 bytes .../blueprint_plugins/images/buttons/tick.png | Bin 0 -> 537 bytes examples/blueprint_plugins/index.html | 7 ++ examples/blueprint_plugins/parts/buttons.html | 59 ++++++++++++ examples/blueprint_plugins/src/buttons.sass | 49 ++++++++++ .../blueprint/modules/_buttons.sass | 84 ++++++++++++++++++ .../blueprint/templates/buttons/buttons.sass | 49 ++++++++++ .../templates/buttons/buttons/cross.png | Bin 0 -> 655 bytes .../templates/buttons/buttons/key.png | Bin 0 -> 455 bytes .../templates/buttons/buttons/tick.png | Bin 0 -> 537 bytes .../blueprint/templates/buttons/manifest.rb | 5 ++ 13 files changed, 265 insertions(+) create mode 100644 examples/blueprint_plugins/images/buttons/cross.png create mode 100644 examples/blueprint_plugins/images/buttons/key.png create mode 100644 examples/blueprint_plugins/images/buttons/tick.png create mode 100644 examples/blueprint_plugins/parts/buttons.html create mode 100644 examples/blueprint_plugins/src/buttons.sass create mode 100644 frameworks/blueprint/stylesheets/blueprint/modules/_buttons.sass create mode 100644 frameworks/blueprint/templates/buttons/buttons.sass create mode 100755 frameworks/blueprint/templates/buttons/buttons/cross.png create mode 100755 frameworks/blueprint/templates/buttons/buttons/key.png create mode 100755 frameworks/blueprint/templates/buttons/buttons/tick.png create mode 100644 frameworks/blueprint/templates/buttons/manifest.rb diff --git a/Manifest b/Manifest index 77ac76a9..7eae6ac1 100644 --- a/Manifest +++ b/Manifest @@ -11,11 +11,16 @@ examples/blueprint_default/src/ie.sass examples/blueprint_default/src/images/grid.png examples/blueprint_default/src/print.sass examples/blueprint_default/src/screen.sass +examples/blueprint_plugins/images/buttons/cross.png +examples/blueprint_plugins/images/buttons/key.png +examples/blueprint_plugins/images/buttons/tick.png examples/blueprint_plugins/index.html +examples/blueprint_plugins/parts/buttons.html examples/blueprint_plugins/parts/fancy_type.html examples/blueprint_plugins/parts/test-small.jpg examples/blueprint_plugins/parts/test.jpg examples/blueprint_plugins/parts/valid.png +examples/blueprint_plugins/src/buttons.sass examples/blueprint_plugins/src/ie.sass examples/blueprint_plugins/src/images/grid.png examples/blueprint_plugins/src/print.sass @@ -59,6 +64,7 @@ frameworks/blueprint/stylesheets/_blueprint.sass frameworks/blueprint/stylesheets/blueprint/_ie.sass frameworks/blueprint/stylesheets/blueprint/_print.sass frameworks/blueprint/stylesheets/blueprint/_screen.sass +frameworks/blueprint/stylesheets/blueprint/modules/_buttons.sass frameworks/blueprint/stylesheets/blueprint/modules/_colors.sass frameworks/blueprint/stylesheets/blueprint/modules/_debug.sass frameworks/blueprint/stylesheets/blueprint/modules/_fancy_type.sass @@ -69,6 +75,11 @@ frameworks/blueprint/stylesheets/blueprint/modules/_liquid.sass frameworks/blueprint/stylesheets/blueprint/modules/_scaffolding.sass frameworks/blueprint/stylesheets/blueprint/modules/_typography.sass frameworks/blueprint/stylesheets/blueprint/modules/_utilities.sass +frameworks/blueprint/templates/buttons/buttons/cross.png +frameworks/blueprint/templates/buttons/buttons/key.png +frameworks/blueprint/templates/buttons/buttons/tick.png +frameworks/blueprint/templates/buttons/buttons.sass +frameworks/blueprint/templates/buttons/manifest.rb frameworks/blueprint/templates/project/grid.png frameworks/blueprint/templates/project/ie.sass frameworks/blueprint/templates/project/manifest.rb @@ -125,6 +136,7 @@ lib/compass/commands/generate_grid_background.rb lib/compass/commands/list_frameworks.rb lib/compass/commands/print_version.rb lib/compass/commands/project_base.rb +lib/compass/commands/stamp_pattern.rb lib/compass/commands/update_project.rb lib/compass/commands/validate_project.rb lib/compass/commands/watch_project.rb diff --git a/examples/blueprint_plugins/images/buttons/cross.png b/examples/blueprint_plugins/images/buttons/cross.png new file mode 100644 index 0000000000000000000000000000000000000000..1514d51a3cf1b67e1c5b9ada36f1fd474e2d214a GIT binary patch literal 655 zcmV;A0&x9_P)uEoyT++I zn$b9r%cFfhHe2K68PkBu*@^<$y+7xQ$wJ~;c5aBx$R=xq*41Wo zhwQus_VOgm0hughj}MhOvs#{>Vg09Y8WxjWUJY5YW zJ?&8eG!59Cz=|E%Ns@013KLWOLV)CObIIj_5{>{#k%TEAMs_GbdDV`x-iYsGH z#=Z{USAQA>NY(}X7=3{K8#4^nI0$7`a(T+P4hBKZ7hk58-_j0w;$<(*=f7ic$nT z*Wgd55in08>183j3?S=MAoDDTLoLSL$!_UDxXqSf-?qdd@H%8(We~hQu&uVIo$6NV z(zMY7wn6r5i617ZGZ)-J($xXssTcN*&WujcIDRIp6J4_PqOvJ}9!p6+yo8LmAGS3~ xN#Qq?aIt$6X#&>gHs{AQG2a)rMyf zFQK~pm1x3+7!nu%-M`k}``c>^00{o_1pjWJUTfl8mg=3qGEl8H@}^@w`VUx0_$uy4 z2FhRqKX}xI*?Tv1DJd8z#F#0c%*~rM30HE1@2o5m~}ZyoWhqv>ql{V z1ZGE0lgcoK^lx+eqc*rAX1Ky;Xx3U%u#zG!m-;eD1Qsn@kf3|F9qz~|95=&g3(7!X zB}JAT>RU;a%vaNOGnJ%e1=K6eAh43c(QN8RQ6~GP%O}Jju$~Ld*%`mO1p A simple sample page, with common elements and fancy type. + + Buttons + + grid.sass, + + A simple page, showing links and buttons styled using the button plugin. +

Note about the css files: diff --git a/examples/blueprint_plugins/parts/buttons.html b/examples/blueprint_plugins/parts/buttons.html new file mode 100644 index 00000000..d3114e7f --- /dev/null +++ b/examples/blueprint_plugins/parts/buttons.html @@ -0,0 +1,59 @@ + + + + + + Blueprint Buttons Sample Page + + + + + + + + + + +

+

A Button Example Page

+
+

This sample page demonstrates what you can do with the Buttons plugin.

+
+ +
+

Link Buttons

+ Link Button + Positive Button + Negative Button +
+ +
+

Real Buttons

+ + + +
+ +
+

Link Buttons with Images

+ Save + Change Password + Cancel +
+ +
+

Real Buttons with Images

+ + + +
+ +
+

+ Valid HTML 4.01 Strict

+
+
+ + + diff --git a/examples/blueprint_plugins/src/buttons.sass b/examples/blueprint_plugins/src/buttons.sass new file mode 100644 index 00000000..e8ca96e6 --- /dev/null +++ b/examples/blueprint_plugins/src/buttons.sass @@ -0,0 +1,49 @@ +@import compass/utilities/general/float.sass +@import blueprint/modules/buttons.sass + +// + Use the following HTML code to place the buttons on your site: + + + + + Change Password + + + + Cancel + + +a.button + // you can pass "left" or "right" to +anchor-button to float it in that direction + // or you can pass no argument to leave it inline-block (cross browser safe!) within + // the flow of your page. + +anchor-button("left") + // All the button color mixins take 4 optional arguments: + // font color, background color, border color, border highlight color + // the first three default to constants set in blueprint/modules/buttons.sass + // the last one defaults to a shade lighter than the border color. + +button-colors + +button-hover-colors + +button-active-colors + +button + // The +button-button mixin is just like the +anchor-button mixin, but for + + + Change Password + + + + Cancel + + +a.button + // you can pass "left" or "right" to +anchor-button to float it in that direction + // or you can pass no argument to leave it inline-block (cross browser safe!) within + // the flow of your page. + +anchor-button("left") + // All the button color mixins take 4 optional arguments: + // font color, background color, border color, border highlight color + // the first three default to constants set in blueprint/modules/buttons.sass + // the last one defaults to a shade lighter than the border color. + +button-colors + +button-hover-colors + +button-active-colors + +button + // The +button-button mixin is just like the +anchor-button mixin, but for