blueprint buttons and sass

[andy]

is the sass available for these buttons? I am finding the "plugin"
system for blueprint confusing, and how it fits with compass. I'm
assuming if someone releases a blueprint plugin, it would be ported to
sass and distributed with compass?

the sass files linked here return 404s.
http://compass-style.org/examples/blueprint_plugins/

Thanks.

[Chris Eppstein]

The source code for all the examples are available here:

http://github.com/chriseppstein/compass/tree/master/examples

Compass will port any of the blueprint "core" plugins that are distributed by blueprint-css. Others may choose to write and distribute their own compass plugins that are built on top of blueprint (or not).

Plugins have three pieces to them:

1.) At installation time, static assets like images, javascript files, etc are placed into the location appropriate for your framework, or if you are using a standalone installation, the locations you specify in your compass configuration.

2.) At installation time, one or more new stylesheets and html pages may be placed into your project. These are meant to be modified and part of your project. They will import the core sass files and demonstrate how to build on top of the them.

3.) Like compass itself, the plugin may have core libraries that provide mixins and constants. Core sass files that are kept as part of the plugin itself so that bug fixes and subsequent releases will upgrade the core of the plugin with minimal impact to the project that is using it. If you have installed the plugin separately, the core sass files can be found there, otherwise, they are part of the compass libraries and stored in relatively the same location.

The compass pattern (aka plugin) system is still a work in progress. It's missing some crucial components for making it easy to install plugins and make them yourself (without writing ruby code). Any feedback you have about it would be beneficial.

Chris

[Mark A. Richman]

I'm also trying to use compass with blueprint. I have the following
screen.sass, but I don't see any of the button styles in my compiled
screen.css.

@import compass/reset.sass
@import compass/utilities.sass
@import compass/layout.sass
@import blueprint.sass
@import blueprint/modules/grid.sass
@import blueprint/modules/scaffolding.sass
@import blueprint/modules/typography.sass
@import blueprint/modules/buttons.sass
@import blueprint/modules/colors.sass
@import blueprint/modules/debug.sass
@import blueprint/modules/fancy_type.sass
@import blueprint/modules/form.sass
@import blueprint/modules/link_icons.sass
@import blueprint/modules/utilities.sass

+blueprint
+blueprint-scaffolding
+blueprint-typography
+blueprint-utilities
+blueprint-debug
+blueprint-interaction
+blueprint-form

!primary_color = #4B7399

body
:background-color = !primary_color
:font
:size 14px

a
:color = !link_color

.container
:background #fff
:padding 20px 40px
:border solid 1px black
:margin-top 20px
:-moz-border-radius 5px
:-webkit-border-radius 5px

#header
+column(24)

#navigation
+column(4)
+prepend(21)
:font-size 0.9em

#content
+column(24)

.label
:font-weight bold

#flash_notice,
#flash_error
:font-weight bold
:padding 5px 8px
:margin 10px 0
:clear both
:-moz-border-radius 5px
:-webkit-border-radius 5px

#flash_notice
:background-color = !notice_bg_color
:border solid 1px
:border-color = !notice_border_color

#flash_error
:background-color = !error_bg_color
:border solid 1px
:border-color = !error_border_color

.fieldWithErrors
:padding 2px
//:border 1px dashed
:margin-bottom -24px

input
:border solid 1px
:border-color = #c00
:background-color yellow

#errorExplanation
+column(24)
:-moz-border-radius 5px
:-webkit-border-radius 5px
:border 2px solid
:border-color = !error_border_color
:padding-bottom 12px
:margin-bottom 20px
:background-color = !error_bg_color
h2
:-moz-border-radius 5px
:-webkit-border-radius 5px
:text-align left
:padding 5px 5px 5px 15px
:font
:weight bold
:size 12px
:background-color #c00
:color #fff
p
:color #333
:margin-bottom 0
:padding 8px
ul
:margin 2px 24px
li
:font-size 12px
:list-style disc

#footer
+column(24)
:margin-top 20px

[Chris Eppstein]

Hi Mark,

Blueprint buttons are kind of special because they distribute images too. So the button plugin is a compass "pattern" that you have to stamp into your project:

compass -f blueprint -p buttons

This will give you a new stylesheet called buttons.sass (among other things) that demontrates how to use the button mixins.

Also, I should point out that your're importing and mixing in a little too much. most compass-provided imports at a high level import most of the lower level ones so most of the blueprint modules needn't be imported.

You get all this when you @import blueprint.

http://github.com/chriseppstein/compass/blob/master/frameworks/blueprint/stylesheets/blueprint/_screen.sass

Also the +blueprint mixin is just a wrapper over the other mixins below it as seen in the file above, so don't unecesarily bloat your css.

Let me know if you're still stuck after this.

chris

[Mark A. Richman]

Chris,

So how would I go about applying this HTML:

<button type="submit" class="button positive">
<img src="css/blueprint/plugins/buttons/icons/tick.png" alt=""/>Sign
Up
</button>

to this Haml:

- form_for @user do |form|
= render :partial => '/users/form', :object => form
%br/
= form.submit 'Sign up', :class => 'button positive', :disable_with
=> 'Please wait...'

Thanks,
Mark

On May 5, 5:53 pm, Chris Eppstein <ch...@eppsteins.net> wrote:
> Hi Mark,
> Blueprint buttons are kind of special because they distribute images too. So
> the button plugin is a compass "pattern" that you have to stamp into your
> project:
>
> compass -f blueprint -p buttons
>
> This will give you a new stylesheet called buttons.sass (among other things)
> that demontrates how to use the button mixins.
>
> Also, I should point out that your're importing and mixing in a little too
> much. most compass-provided imports at a high level import most of the lower
> level ones so most of the blueprint modules needn't be imported.
>

> You get all this when you @import blueprint.http://github.com/chriseppstein/compass/blob/master/frameworks/bluepr...

>
> Also the +blueprint mixin is just a wrapper over the other mixins below it
> as seen in the file above, so don't unecesarily bloat your css.
>
> Let me know if you're still stuck after this.
>
> chris
>

[Chris Eppstein]

Well, I'm not a big fan of using an image tag for this case. I'd much rather use a background image and some padding. But I didn't write blueprint, I just ported it ;-)

In any respect, you can achieve this result by putting the image html inside your button:

form.submit image_tag('css/blueprint/plugins/buttons/icons/tick.png')+'Sign up', :class => 'button positive', :disable_with => 'Please wait...'

chris

[Mark A. Richman]

I'm obviously doing something wrong, since this is the HTML that gets
emitted. Basically, I get a button with the image tag's HTML inside:

<input class="button positive" id="user_submit" name="commit"
onclick="..." type="submit" value="&lt;img alt=&quot;Tick&quot;
src=&quot;/images/buttons/tick.png?1241564657&quot; /&gt;Sign up" />

Thanks,
Mark

[Chris Eppstein]

I don't think the rails helpers are helping you. Maybe you can ask for rails support in the user forum or stop using them.

chris

[Erik Bryn]

You're using a submit button instead of the button tag - I don't think
you can put images inside of those.

- Erik

[Bill Lazar]

I started using image_submit_tag recently, I think it was added for
this purpose.

[Mark A. Richman]

This works!

- title 'Register'

- form_for @user do |form|
= render :partial => '/users/form', :object => form
%br

.buttons
%button.button.positive{ :type => "submit" }
%img{ :src => '/images/buttons/tick.png' }
Submit

Thanks guys,
Mark