The $susy setting global-box-sizing doesnt change anything in Susy2

Question

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

Answer 1

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.