CODEWITHSUNDEEP
htmlcssresponsive-designsasssusy-compass
hsy_89
hsy_89

Reputation: 63

How do I use Susy-compass 'at-breakpoint'?

<section class="container">
  <div class="content>
    <article>MainContent</article>
    <aside>SideBar</aside>
  </div>
</section>


.content {
  @include container;
  @include at-breakpoint(0 768px 10) {
    @include container(10, 10);
}
article {
  @include span-columns(9, $total-columns);
}
aside.sidebar {
  @include span-columns(3 omega, $total-columns);
}

This is my html structure and susy-compass. I'm trying to build a responsive web template using Susy grid. I want 12 columns of 960px for desktop, 10 columns of 768px for tablet and 4 columns of 320px for mobile but I just can't figure it out. I've been trying to @include at-breakpoint at 768px with 10 columns but the default 12 columns still not changing to 10 columns.

Any ideas? and any good suggestions for building a template like this?

Upvotes: 1

Views: 2637

Answers (1)

Miriam Suzanne
Miriam Suzanne

Reputation: 14010

Anything that you want changed at the breakpoint has to go inside at-breakpoint. The arguments passed to container are actually a shortcut for at-breakpoint, so you wouldn't use them inside it. You want something like this:

$total-columns: 4;
$container-width: 320px;

$tablet-width: 768px;
$tablet-columns: 10;
$desktop-width: 960px;
$desktop-columns: 12;

.content {
  @include container;
  @include at-breakpoint($tablet-width $tablet-columns) {
    width: $tablet-width;
  }
  @include at-breakpoint($desktop-width $desktop-columns) {
    width: $desktop-width;
  }
}

article {
  // mobile styles & tablet breakpoint could go here...
  @include at-breakpoint($desktop-width $desktop-columns) {
    @include span-columns(9); // $total-columns is assumed...
  }
}

aside.sidebar {
  // mobile styles & tablet breakpoint could go here...
  @include at-breakpoint($desktop-width $desktop-columns) {
    @include span-columns(3 omega);
  }
}

Now, if you want to see your various grids, you'll also have to include susy-grid-background at each breakpoint (along side your container width). The grid background is like any other Susy mixin - it doesn't know to change for different breakpoints unless you tell it to.

Upvotes: 3

Related Questions