Things to Note
This section will describe some characteristics of the Core styles that you should be aware of.
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.
box-sizing: content-box; was added for the sake of demonstration
to reset the elements to the default behavior.)
<div style="
width: 200px;
box-sizing: content-box;
">
This box has a width property value of 200px,
which is correct.
</div>
<div 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 style="
width: 200px;
">
This box has a width property of 200px,
which is correct.
</div>
<div style="
border: 1px solid #97adc1;
padding: 20px;
width: 200px;
">
This box also has a width property of 200px,
which is alright.
</div>