5

This is something which I never understood in Susy 2.

Looking at this simple example shows:

http://codepen.io/itsthomas/pen/Btzxa

HTML:

<div id="wrapper">
  <div id="content">
    <div class="box1">Box1</div>
    <div class="box1">Box1</div>
    <div class="box1">Box1</div>
  </div>
  <aside>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae.</p>  
  </aside>
</div>

SASS:

@import 'susy';
@include border-box-sizing;

$susy: (
  container: 90%,
  columns: 24,
  gutters: 1/3,
  /* global-box-sizing: border-box, */
  debug: (
    image: show,
    output: overlay,
  ),
);

#wrapper {
  @include container;
}

#content {
  @include span(18 first);
  background-color: red;
  height: 100px;
  padding: gutter();
}

aside {
  @include span(6 last);
  background-color: #F0A754;
  padding: gutter();
}

.box1 {
  @include span(6 of 18);
  height: 40px;
  background-color: #6D4214;
  &:last-child {
    /* margin-right: 0; */
    @include last;
  }
}

that adding the global-box-sizing: border-box, to the $susy map doesn't change anything at all, regardless if you use @include border-box-sizing; in your code or not.

The $susy setting global-box-sizing seems completely useless to me. Or am I overlooking anything?

Thanks

HomTom
  • 558
  • 1
  • 4
  • 12

1 Answers1

5

That's right. global-box-sizing is actually descriptive, not prescriptive. It tells Susy how you have set your global border-box. By default it is set to content-box (the browser default, and the border-box-sizing mixin will set it to border-box for you automatically. The only time you ever need to change the setting manually is if you set the global box sizing manually.

Susy needs to know what box-model you are using because it changes the math for certain grid types and functionality — anywhere padding and width might interact, like inside/inside-static gutters or bleed. You may not have any of these situations in your code, in which case that setting doesn't matter.

Miriam Suzanne
  • 13,632
  • 2
  • 38
  • 43
  • Thanks for your reply. But my point is that as in my example above, if you don't use border-box-sizing mixin at all but change only $susy global setting global-box-sizing to border-box, the setting doesn't affeckt anything. I mean if changing the global-box-sizing inside the $susy map doesn't change anything, why is it there? – HomTom Dec 23 '14 at 13:22
  • Thanks for the explanation. This was driving me nuts for a couple days :) – Ketan Oct 04 '15 at 05:14