blueprint/scaffolding doesn't work for me properly.

52 views
Skip to first unread message

Maxim Lacrima

unread,
Nov 16, 2010, 6:47:00 AM11/16/10
to compass-users
Hi!

I am building layout for my site with blueprint. Suppose I have:

.container {
@include container;
@extend .showgrid;

#section {
@include column($blueprint-grid-columns, true);

#subsection1 {
@extend .border;
@include column($blueprint-grid-columns/2);
}
#subsection2 {
@include column($blueprint-grid-columns/2, true);
}
}
}

According to this code #section spans 24 columns, and it includes two
subsections that span 12 columns. #subsection1 should be separated
from #subxection2 by vertical border. The problem is that the presence
of the border (@extend .border) breaks the layout, so #subsection2
jumps to the next line. Without the border the subsections sit nicely
alongside of each other. I am newbie to compass and SCSS and most
likely I am doing something wrong. But what is wrong with the code
above?

And I have another question concerning screen.sccs, which is generated
during creation of a project. Lines 38-39:
#header, #footer {
@include column($blueprint-grid-columns); }
Shouldn't this be @include column($blueprint-grid-columns, true),
because #header and #footer are last columns?

Thanks in advance. Sorry for my English.

--
with regards,
Maxim

Sean Allen

unread,
Nov 16, 2010, 11:14:32 AM11/16/10
to compas...@googlegroups.com
I have the same question... how do you get compass to take into account a border when doing sizing?

If I do something as simple as 

.item 
{
  border: 1px solid black;
  @include column(8, true);
}

then with a 24 column grid, 3 items... 3rd item spills over.

i see there is a mixin for setting a right side border on items but i cant find anything to set the entire border...


--
You received this message because you are subscribed to the Google Groups "Compass" group.
To post to this group, send email to compas...@googlegroups.com.
To unsubscribe from this group, send email to compass-user...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/compass-users?hl=en.


barraponto

unread,
Nov 17, 2010, 11:31:34 AM11/17/10
to Compass
http://beta.compass-style.org/docs/reference/blueprint/grid/#mixin-border-scss

yes, it only applies to the right side... i'm clueless on how to
proceed.

unfortunately, http://beta.compass-style.org/docs/tutorials/blueprint/
doesn't actually give a tutorial on blueprint, nor links to a
tutorial. thus i will search for a tutorial and post it back to the
group (and comment it on the new docs).

-capi

On Nov 16, 2:14 pm, Sean Allen <s...@monkeysnatchbanana.com> wrote:
> I have the same question... how do you get compass to take into account a
> border when doing sizing?
>
> If I do something as simple as
>
> .item
> {
>   border: 1px solid black;
>   @include column(8, true);
>
> }
>
> then with a 24 column grid, 3 items... 3rd item spills over.
>
> i see there is a mixin for setting a right side border on items but i cant
> find anything to set the entire border...
>
> > compass-user...@googlegroups.com<compass-users%2Bunsu...@googlegroups.com>
> > .

Neil Darlow

unread,
Nov 24, 2010, 4:42:46 PM11/24/10
to Compass


On Nov 16, 11:47 am, Maxim Lacrima <lacrima.ma...@gmail.com> wrote:
> According to this code #section spans 24 columns, and it includes two
> subsections that span 12 columns. #subsection1 should be separated
> from #subxection2 by vertical border. The problem is that the presence
> of the border (@extend .border) breaks the layout, so #subsection2
> jumps to the next line. Without the border the subsections sit nicely
> alongside of each other. I am newbie to compass and SCSS and most
> likely I am doing something wrong. But what is wrong with the code
> above?

I don't think you have considered that the border applied by blueprint
occupies
one column width itself. You need to account for this in your sizing
of subsection1.
Perhaps: $blueprint-grid-columns/2-1 is what you need.

> And I have another question concerning screen.sccs, which is generated
> during creation of a project. Lines 38-39:
>   #header, #footer {
>     @include column($blueprint-grid-columns); }
> Shouldn't this be @include column($blueprint-grid-columns, true),
> because #header and #footer are last columns?

Blueprint permits the use of class="span-24" without last when the
span size equals
the enclosing container size. What you describe above mirrors this.

Regards,
Neil Darlow

Sean Allen

unread,
Nov 26, 2010, 9:53:32 AM11/26/10
to compas...@googlegroups.com


On Wed, Nov 24, 2010 at 4:42 PM, Neil Darlow <neil....@gmail.com> wrote:
> And I have another question concerning screen.sccs, which is generated
> during creation of a project. Lines 38-39:
>   #header, #footer {
>     @include column($blueprint-grid-columns); }
> Shouldn't this be @include column($blueprint-grid-columns, true),
> because #header and #footer are last columns?

Blueprint permits the use of class="span-24" without last when the
span size equals
the enclosing container size. What you describe above mirrors this.

Which as far as i can tell isnt available w/ compass unless you drop down into blueprint directly.
Reply all
Reply to author
Forward
0 new messages