> We need this CSS framework to support the addition of padding and
> borders to columns somehow, without getting really hacky... and every
> solution I've seen elsewhere when searching this group doesn't seem to
> fit my need here.
I ended up needing borders this week and looked into two potential
options.
One is to use CSS3's outline. Outline, unlike border, does not take
away from the content width so doesn't disrupt the math logic of
blueprint's span-x when nesting them. We opted not to use this for two
reasons. 1, we're still stuck supporting IE and 2, we wanted rounded
corners. While Firefox does support rounding of outline, it doesn't
crop the background like border rounding does.
The other option, which is what I'm working on, is a variation on what
kaiser is using with the negative margins.
I created a new class to add to any span-x you want to add a border
to:
.span-border {
border: 1px solid red;
margin-left: -1px;
margin-right: 9px;
}
margin-left = width of your border
margin-right = standard gutter width minus the width of your border
The only catch with this in our scenario is that we like to use
'overflow: hidden' + 'width: 100%' to wrap our rows in (allows for
clearing of the span-x). That means any nested span-x bordering the
left or right of the wrapper will loose the border on the outside. To
remedy that, we added a span-border-first and span-border-last to
nudge that particular span-x in/out 2px to account for that. Not
ideal, but works fairly well.
The main benefit is that this still preserves the span-x logic when
nesting.
-DA
--
You received this message because you are subscribed to the Google Groups
"Blueprint CSS" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/blueprintcss?hl=en.
