Susy 2.0 Change Columns at Breakpoint

susy 2.0 change columns at breakpoint

I don't know what your media mixin does, so I can't really comment on anything related to that. Your initial example doesn't work because Sass, CSS, and therefor Susy, are not aware of the DOM - or relationships between media-queries. When you change the value of $susy inside one media-query, that does not propagate to all similar media-query contexts. Because of that, you do have to set both the media-query and the desired layout every time you want a breakpoint to change the layout context.

susy-breakpoint is not the only way to do that, but it is the shortest. Here's the longhand:

body {
  @include container(show);

  @include breakpoint(800px) {
    @include with-layout(8) { // default is set to 8-columns
      @include container(show);
    } // default is returned to global setting
  }
}

Your $small breakpoint currently doesn't change anything, because it is identical to your default layout. The larger ones will change the layout context for nested code — though you can simplify: Since `1/4 split' gutters aren't changing at all, they don't need to be re-stated at every breakpoint.

$susy: layout(6 1/4 split);
$medium: 800px, 8;

body {
  @include container(show);

  @include susy-breakpoint($medium...) {
    @include container(show);
  }
}

That will be identical to the longhand above.

susy proper way to switch grid settings in breakpoint

Yep, Susy is just writing CSS values, so you have to handle this the same way you would with plain CSS. Susy doesn't know your DOM, so it has no way of knowing that you want to override values that you set before. If we assumed you always want to override, we would have to output massively bloated code.

There are two solutions here:

• Put your small-screen layout inside a max-width media-query, so it doesn't affect larger screens.
• Or: override those global values inside the large-screen media-query. The problem to fix is the extra margins added by your initial split gutters.

I prefer the first solution, because I think overrides are ugly. But if you're dealing with some small browsers that doesn't support media-queries (do those still exist?), then you'll need to use the second solution. Try:

@include susy-breakpoint(max-width 800px, 12 0.5 split) {
    .primary{
        @include span(12);
    }

    .secondary{
        @include span(12);
    }
}

Override span-columns() at-breakpoint in SUSY

Looks like a cascade specificity issue. Your initial span settings are nested under the body selector. Your breakpoint overrides are not. If you nest it all under body, or un-nest the initial settings it works:

body {
  @include container($total-columns, $tablet, $desktop);
}

.logo {
  @include span-columns(4);
  @include at-breakpoint($tablet) {
    @include span-columns(5);
  }
  @include at-breakpoint($desktop) {
    @include span-columns(1);
  }
}

nav {
  @include span-columns(2 omega);
  @include at-breakpoint($tablet) {
    @include span-columns(3 omega);
  }
  @include at-breakpoint($desktop) {
    @include span-columns(11 omega);
  }
}

Susy 2.1.3 issue regarding layout change on breakpoint

with-layout only changes the settings used for Susy mixins/functions nested inside it:

@include with-layout($layout2) {
  // code nested here will use the $layout2 settings
}

You have nothing nested inside any call to with-layout - therefor no changes. This is exactly what @cimmanon was trying to explain in the comments. Similarly, @media only changes things nested directly inside it — so your colors change fine, but your spans don't. The colors are actually nested, the spans aren't.

Because Sass is pre-processed, span(1) cannot have multiple outputs unless it is called multiple times. Right now you call it once, so it has one output. If you call it multiple times inside different layout contexts, you can get different outputs.

// This will give you different spans at different breakpoints:
@include breakpoint(600px) {
  @include with-layout($layout2) {
    @include span(1);
    background: red;
  }
}

// you can also use the susy-breakpoint shortcut:
@include susy-breakpoint(1000px, $layout3) {
  @include span(1);
  background: blue;
}

Change `$column-width` at breakpoint, but not number of columns

Susy 2 solves this problem using the new susy-breakpoint with a more powerful shorthand syntax. But the Susy 1 approach isn't much more complex. The at-breakpoint mixin is a simple wrapper for two actions:

1. Set up a media-query.
2. Change the global Susy settings inside that media-query block.

I recommend downloading Breakpoint (or another plugin like it) to handle the media-query side of things, but you can also do it by hand. Susy provides a mixin to handle the second part (with-grid-settings). If you put those two together, you have a more powerful version of at-breakpoint.

$large: 64em;
$large-column-width: 3.75em;

@media (min-width: $large) {
  @include with-grid-settings($column-width: $large-column-width) {
    // new column-width applied to code in here.
  }
}

Susy 2.0.0.alpha.6 - Undefined mixins 'at-breakpoint','remove-nth-omega'

Yes, both of those mixins are being deprecated in Susy 2.0, so neither is available in alpha. We haven't built a clean upgrade path yet, but I promise there's one on the way.

Susy - change number of columns on a fluid container

No, there isn't. It's not a matter of fluid design.

What you're doing is called a "magic grid" in Susy vocabulary. The grid has different number of columns for different screen sizes.

To make it work, CSS should contain styles for both small and large screen layouts. What you do here is providing them. Note that when span-columns is invoked from inside at-breakpoint, it produces different values.

So that's the appropriate way to do it. You should feel comfortable with that code.

Have a look at Susy's magic grid demo: http://susy.oddbird.net/demos/magic/#demo-breakpoints

---

Related Topics