github-migration/compass
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Port of the Blueprint Buttons plugin to Compass.

Browse Source 
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
This commit is contained in:
Chris Eppstein 2009-04-03 12:11:44 -07:00
parent bb197d849b
commit 53960d9c25
13 changed files with 265 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
Manifest
View File

@ -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

BIN
examples/blueprint_plugins/images/buttons/cross.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 655 B

BIN
examples/blueprint_plugins/images/buttons/key.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 455 B

BIN
examples/blueprint_plugins/images/buttons/tick.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 537 B

7
examples/blueprint_plugins/index.html
View File

@ -35,6 +35,13 @@
</td>
<td>A simple sample page, with common elements and fancy type.</td>
</tr>
<tr>
<td><a href="parts/buttons.html">Buttons</a></td>
<td>
<a href="../../frameworks/blueprint/stylesheets/blueprint/modules/_buttons.sass">grid.sass</a>,
</td>
<td>A simple page, showing links and buttons styled using the button plugin.</td>
</tr>
</table>
<p><em><strong>Note about the css files:</strong></em>

59
examples/blueprint_plugins/parts/buttons.html Normal file
View File

@ -0,0 +1,59 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Blueprint Buttons Sample Page</title>
<!-- Framework CSS -->
<link rel="stylesheet" href="../stylesheets/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="../stylesheets/print.css" type="text/css" media="print">
<!--[if IE]><link rel="stylesheet" href="../stylesheets/ie.css" type="text/css" media="screen, projection"><![endif]-->
<link rel="stylesheet" href="../stylesheets/buttons.css" type="text/css" media="screen, projection">
</head>
<body>
<div class="container">
<h1>A Button Example Page</h1>
<hr>
<h2 class="alt">This sample page demonstrates what you can do with the Buttons plugin.</h2>
<hr>
<div class="span-12">
<h3>Link Buttons</h3>
<a class="button">Link Button</a>
<a class="button positive">Positive Button</a>
<a class="button negative">Negative Button</a>
</div>
<div class="span-12 last">
<h3>Real Buttons</h3>
<button>Normal Button</button>
<button class="positive">Positive Button</button>
<button class="negative">Negative Button</button>
</div>
<div class="span-12">
<h3>Link Buttons with Images</h3>
<a class="button"><img src="../images/buttons/tick.png" alt=""/> Save</a>
<a class="button positive"><img src="../images/buttons/key.png" alt=""/> Change Password</a>
<a class="button negative"><img src="../images/buttons/cross.png" alt=""/> Cancel</a>
</div>
<div class="span-12 last">
<h3>Real Buttons with Images</h3>
<button><img src="../images/buttons/tick.png" alt=""/> Save</button>
<button class="positive"><img src="../images/buttons/key.png" alt=""/> Change Password</button>
<button class="negative"><img src="../images/buttons/cross.png" alt=""/> Cancel</button>
</div>
<div class="span-24">
<p><a href="http://validator.w3.org/check?uri=referer">
<img src="valid.png" alt="Valid HTML 4.01 Strict" height="31" width="88" class="top"></a></p>
</div>
</div>
</body>
</html>

49
examples/blueprint_plugins/src/buttons.sass Normal file
View File

@ -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:
<button type="submit" class="button positive">
<img src="css/blueprint/plugins/buttons/icons/tick.png" alt=""/> Save
</button>
<a class="button" href="/password/reset/">
<img src="css/blueprint/plugins/buttons/icons/key.png" alt=""/> Change Password
</a>
<a href="#" class="button negative">
<img src="css/blueprint/plugins/buttons/icons/cross.png" alt=""/> Cancel
</a>
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 <button> elements.
+button-button("left")
+button-colors
+button-hover-colors
+button-active-colors
// We can change the colors for buttons of certain classes, etc.
a.positive, button.positive
:color #529214
+button-hover-colors(#529214, #E6EFC2, #C6D880)
+button-active-colors(#FFF, #529214, #529214)
a.negative, button.negative
:color #D12F19
+button-hover-colors(#D12F19, #FBE3E4, #FBC2C4)
+button-active-colors(#FFF, #D12F19, #D12F19)

84
frameworks/blueprint/stylesheets/blueprint/modules/_buttons.sass Normal file
View File

@ -0,0 +1,84 @@
@import compass/utilities/general/inline_block.sass
@import compass/utilities/general/float.sass
// Button Font
!blueprint_button_font_family ||= "\"Lucida Grande\", Tahoma, Arial, Verdana, sans-serif"
// Default Button Colors
!blueprint_button_border_color ||= #DEDEDE
!blueprint_button_background_color ||= #F5F5F5
!blueprint_button_font_color ||= #565656
// Default Button Hover Colors
!blueprint_button_hover_border_color ||= #C2E1EF
!blueprint_button_hover_background_color ||= #DFF4FF
!blueprint_button_hover_font_color ||= #336699
// Default Button Active Colors
!blueprint_button_active_border_color ||= #6299C5
!blueprint_button_active_background_color ||= #6299C5
!blueprint_button_active_font_color ||= #FFF
//**
Sets the colors for a button
@param border_highlight_color
The highlight color defaults to whatever is the value of the border_color but it's one shade lighter.
=button-colors(!font_color = !blueprint_button_font_color, !bg_color = !blueprint_button_background_color, !border_color = !blueprint_button_border_color, !border_highlight_color = !border_color + #101010)
:background-color= !bg_color
:border-color= !border_highlight_color !border_color !border_color !border_highlight_color
:color= !font_color
//**
Sets the colors for a button in the active state
@param border_highlight_color
The highlight color defaults to whatever is the value of the border_color but it's one shade lighter.
=button-active-colors(!font_color = !blueprint_button_active_font_color, !bg_color = !blueprint_button_active_background_color, !border_color = !blueprint_button_active_border_color, !border_highlight_color = !border_color + #101010)
&:active
+button-colors(!font_color, !bg_color, !border_color, !border_highlight_color)
//**
Sets the colors for a button in the hover state.
@param border_highlight_color
The highlight color defaults to whatever is the value of the border_color but it's one shade lighter.
=button-hover-colors(!font_color = !blueprint_button_hover_font_color, !bg_color = !blueprint_button_hover_background_color, !border_color = !blueprint_button_hover_border_color, !border_highlight_color = !border_color + #101010)
&:hover
+button-colors(!font_color, !bg_color, !border_color, !border_highlight_color)
=button-base(!float = false)
@if !float
:display block
+float(!float)
@else
+inline-block
:margin 0.7em 0.5em 0.7em 0
:border-width 1px
:border-style solid
:font-family= !blueprint_button_font_family
:font-size 100%
:line-height 130%
:text-decoration none
:font-weight bold
:cursor pointer
img
:margin 0 3px -3px 0 !important
:padding 0
:border none
:width 16px
:height 16px
:float none
=anchor-button(!float = false)
+button-base(!float)
:padding 5px 10px 5px 7px
=button-button(!float = false)
+button-base(!float)
:width auto
:overflow visible
:padding 4px 10px 3px 7px
&[type]
:padding 4px 10px 4px 7px
:line-height 17px
*:first-child+html &[type]
:padding 4px 10px 3px 7px

49
frameworks/blueprint/templates/buttons/buttons.sass Normal file
View File

@ -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:
<button type="submit" class="button positive">
<img src="css/blueprint/plugins/buttons/icons/tick.png" alt=""/> Save
</button>
<a class="button" href="/password/reset/">
<img src="css/blueprint/plugins/buttons/icons/key.png" alt=""/> Change Password
</a>
<a href="#" class="button negative">
<img src="css/blueprint/plugins/buttons/icons/cross.png" alt=""/> Cancel
</a>
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 <button> elements.
+button-button("left")
+button-colors
+button-hover-colors
+button-active-colors
// We can change the colors for buttons of certain classes, etc.
a.positive, button.positive
:color #529214
+button-hover-colors(#529214, #E6EFC2, #C6D880)
+button-active-colors(#FFF, #529214, #529214)
a.negative, button.negative
:color #D12F19
+button-hover-colors(#D12F19, #FBE3E4, #FBC2C4)
+button-active-colors(#FFF, #D12F19, #D12F19)

BIN
frameworks/blueprint/templates/buttons/buttons/cross.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 655 B

BIN
frameworks/blueprint/templates/buttons/buttons/key.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 455 B

BIN
frameworks/blueprint/templates/buttons/buttons/tick.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 537 B

5
frameworks/blueprint/templates/buttons/manifest.rb Normal file
View File

@ -0,0 +1,5 @@
stylesheet 'buttons.sass', :media => 'screen, projection'
image 'buttons/cross.png'
image 'buttons/key.png'
image 'buttons/tick.png'