Things to Note

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.

<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>

<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>

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.

<div class="margin-bottom background-darkblue"
    style="
        width: 200px;
    ">
    This box has a width property of 200px,
    which is correct.
</div>

<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>