Things to Note

This section will describe some characteristics of the Core styles that you should be aware of.

  1. Reset
  2. Box Sizing

Reset

Like most CSS frameworks, the Core CSS package features a reset that will strip most elements of the various default appearances that different browsers will apply to them. This helps to make sure that the appearance of the page is constant across different browser configurations.

As such, you may run into situations where an element does not do what you expect it to – such as a <ul> being displayed without the default bullet points.

If you do, please check the respective documentation page (in this case, the lists section). Most likely there will be a class that you can use to apply the behavior you were expecting.

Box Sizing

The Core styles force the property box-sizing: border-box on every element. For those familiar with CSS, this may be confusing at first because it changes the way the box model behaves. (W3C docs)

The border-box box model makes the CSS width and height properties include paddings and borders, which are by default excluded.

For example: By default, if you wanted to give a box a fixed width from edge to edge, its CSS width value would not be the actual edge-to-edge value, but rather the total value minus the sum of its left and right paddings and left and right borders.

Content-box elements – CSS default behavior (Note that box-sizing: content-box; was added for the sake of demonstration to reset the elements to the default behavior.)
<div class="margin-bottom background-darkblue"
    style="
        width: 200px;
        box-sizing: content-box;
    ">
    This box has a width property value of 200px,
    which is correct.
</div>
This box has a width property value of 200px, which is correct.
<div class="margin-bottom background-darkblue"
    style="
        border: 1px solid #97adc1;
        padding: 20px;
        width: 158px;
        box-sizing: content-box;
    ">
    This box has a width property value of 158px,
    which is just as correct, but misleading.
</div>
This box has a width property value of 158px, which is just as correct, but misleading.

With the border-box model, you can set the width property to the desired value, regardless of the size of your paddings or borders, which makes layouts much more intuitive and flexible.

Border-box elements – Core CSS behavior
<div class="margin-bottom background-darkblue"
    style="
        width: 200px;
    ">
    This box has a width property of 200px,
    which is correct.
</div>
This box has a width property of 200px, which is correct.
<div class="margin-bottom background-darkblue"
    style="
        border: 1px solid #97adc1;
        padding: 20px;
        width: 200px;
    ">
    This box also has a width property of 200px,
    which is quite alright.
</div>
This box also has a width property of 200px, which is quite alright.