Change layout with susy

Question

I want to change the layout from 12 columns to 24 when the site gets larger than 1000px.

My markup

<main>
    <div class="box-container"></div>
</main>

and the scss with susy

$susy: (
    columns: 12,
    global-box-sizing: border-box,
    debug: (image: show)
);

$large_layout: layout(24 0 fluid float inside);

main{
    @include container();
    background-color: rgba(255,255,0, .2);
    @include breakpoint(1000px){
        @include layout($large_layout);
        background-color: rgba(0,0,0,1);
    }
}

.box-container{
    background-color: rgba(255,0,255, .2);
    @extend %clearfix;
    @include span(12); <-- only 50% width
    @include breakpoint(1000px){
        @include squish(2);
        @include span(20);
    }
}

The behavior now is that the .box-content is only 50% under 1000px width. If i resize my window larger than 1000px than it works fine... It seems to me that the 24 columns layout is always applied.

If i understand it correct, if no other susy settings are set the default layout should be $susy. But in my case, i set only the $large_layout over 1000px, so under 1000px it should take the default $susy layout

and one more question is it possible also to change the grid that it shows the 24 coloumns if the layout changes from 12 to 24 columns...

http://codepen.io/destroy90210/pen/MKKooP?editors=110

UPDATE

Ok found out how it works. If i write this line

@include layout($large_layout);

in the class with the breakpoint

.box-container{
    background-color: rgba(255,0,255, .2);
    @extend %clearfix;
    @include span(12);
    @include breakpoint(1000px){
        @include layout($large_layout);  <-- moved this line inside this breakpoint
        @include squish(2);
        @include span(20);
    }
}

then it works as expected.

Now i duplicated the .box-container as .box-container2 and wanted to set the width always to the half of the main element.

<main>
    <div class="box-container"></div>
    <div class="box-container2"></div>
</main>

.box-container2{
    @include span(6);
    @extend %clearfix;
    background-color: rgba(150,100,50, .5);
}

but its only a quarter over and under 1000px width. It looks like the 24 columns grid is still there.

What i'm doing wrong?

updated codepen http://codepen.io/destroy90210/pen/MKKooP?editors=110

hope somebody can explain me my mistake ;)

gregor ;)

score 0 · Answer 1 · edited May 23 '17 at 12:30

i found an answer ;)

Susy 2.1.3 issue regarding layout change on breakpoint

@Miriam Eric Suzanne gave the answer what i needed to solve my problem;)

.box-container{
    height: 300px;
    background-color: rgba(255,0,255, .5);
    @include span(12);
    //this works
    @include susy-breakpoint(1000px, $large_layout) {
        @include squish(4);
        @include span(16);
    }
    //or this works
    @include breakpoint(1000px) {
        @include with-layout($large_layout){
            @include squish(2);
            @include span(20);
        }
    }
}

Change layout with susy

1 Answers1