ImmobilienScout24

core.css v0.3.0 – Documentation

Things of Note

This is a collection of things that you should note regarding the Core style set.

  1. Media Queries in Legacy Browsers
  2. CSS3 in Legacy Browsers
  3. Box Sizing

Media Queries in Legacy Browsers

<insert note about media queries not working in legacy browsers and respond.js polyfill>


CSS3 in Legacy Browsers

<insert note about CSS3 styles and selectors not working in legacy browsers and modernizr.js>


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 width and height properties include paddings and borders, which are otherwise excluded.

For example: By default, if you wanted to give a box a fixed width, you would have to set the width of the element to the targeted width minus its left and right paddings and left and right borders.

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

Border-box element with fixed width and paddings
<div class="background-darkblue" style="
    width:100%;
    padding-left:40%;
    padding-right:40%;
">
    With box-sizing: border-box,
    this box is 100% wide,
    not 180%.
</div>
With box-sizing: border-box, this box is 100% wide, not 180%.