The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Compass and Blueprint : change column number ?

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #45785

    I’m using Compass for the first time.
    I changed the column number from 24 (default) to 12 in my base.scss, but it doesn’t work.
    A @include column(6) is still 1/4 of my container width, instead of beeing 1/2.

    However, the .showgrid layer shows the correct number of columns (12), but my included columns (or span(6)) don’t. It seems that they still use the default parameters.

    Any idea why?


    How have you defined column(6)?


    In my base.scss :
    $blueprint-grid-columns: 12;

    In my main scss :
    .article {
    @include column(6);

    Your avatar kind of reminds me Bill Plympton.


    Yes but what are the properties for column(6)?


    My main scss contains only this.
    I’m not sure about what you’re asking :)
    I thought this import was simply making a block 6 columns width of the defined total number of columns.

    What could I be forgetting in my stylesheet?


    I would assume that column(6) would have a width associated with it.

    What properties does column(6) add to your CSS styles?


    It only adds a width (a “wrong” one), and a margin left.
    Column(6) is supposedly (I don’t really understand how it works) calculated from my grid gonfiguration (base.scss) :

    $blueprint-grid-columns: 24;
    $blueprint-container-size: 950px;
    $blueprint-grid-margin: 10px;

    // Use this to calculate the width based on the total width.
    // Or you can set $blueprint-grid-width to a fixed value and unset $blueprint-container-size — it will be calculated for you.
    $blueprint-grid-width: ($blueprint-container-size + $blueprint-grid-margin) / $blueprint-grid-columns – $blueprint-grid-margin;

    I could be wrong thought, because it doesn’t seem to work.
    I also could use a fixed width for my column width, but I’d like to know where is my mistake or my miserderstanding about blueprint and sass.


    Unfortunately, I’m not familiar with Blueprint so I may not be able to help much further.

    You can’t include something that hasn’t been defined so somewhere there must be a definition of column(6).

    Perhaps there is a grid.scss file?


    I noticed that if I declare my variables in my main css file, it works well. It seems that base.scss is only used on the .showgrid layer (it’s kind of like a “visual” debug tool).

    I’ll continue to figure out how all of this works… I read everywere that compass and sass are easy to undersand, but it seems it’s not. Or maybe I’m just dumb. :D

    Thank you for your replies. :)

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.