Core Framework v2.0.0 – Documentation

Getting Started

  1. Sample Document
  2. Resources
    1. CSS
    2. JS
    3. JS – Optional
  3. Page Structure
  4. Bundled Resources

Sample Document

For a quick start, you can just copy&paste this snippet to get a working page to experiment with. Detailed descriptions follow below.

Also, please keep in mind that certain modules (such as the top navigation or advertisement) will require a few additions to this template. Please see the respective pages for details.

Sample document
<!DOCTYPE HTML>
<html lang="de-DE">
  <head>
    <meta charset="UTF-8">
    <title>Sample Document</title>
    <link rel="stylesheet" type="text/css" href="//www.static-immobilienscout24.de/fro/core/2.0.0/css/core.min.css" />
    <!--[if (lt IE 9) & (!IEMobile)]>
    <link rel="stylesheet" type="text/css" href="//www.static-immobilienscout24.de/fro/core/2.0.0/css/core_no-mq.min.css" />
    <![endif]-->
    <script type="text/javascript" src="//www.static-immobilienscout24.de/fro/core/2.0.0/js/core.min.js"></script>
  </head>
  <body>
    <div class="viewport">
      <div class="page-wrapper">
        <div class="content-wrapper"></div>
      </div>
    </div>
  </body>
</html>

Resources

Be sure to reference the required resources from the ImmobilienScout24 Static server. This will enable cross-application caching and reduce cookie size for the requests.

CSS

CSS inclusion
<link rel="stylesheet" type="text/css" href="//www.static-immobilienscout24.de/fro/core/2.0.0/css/core.min.css" />

If you need to support Internet Explorer 8 (or lower, in which case … you know …), you will need to include an additional variant of the Core CSS which does not require CSS media query support.

Additional CSS inclusion for IE8 compatibility
<!--[if (lt IE 9) & (!IEMobile)]>
<link rel="stylesheet" type="text/css" href="//www.static-immobilienscout24.de/fro/core/2.0.0/css/core_no-mq.min.css" />
<![endif]-->

JS

JS inclusion
<script type="text/javascript" href="//www.static-immobilienscout24.de/fro/core/2.0.0/js/core.min.js" />

JS – Optional

Modernizr

The modernizr script is mainly a feature detection tool. It will also enable older browsers to display (though not understand) HTML5 elements (such as the <header> and <article> tags found throughout this documentation).

Modernizr.js include
<script type="text/javascript" src="//www.static-immobilienscout24.de/fro/modernizr/2.6.2/modernizr.custom.min.js"></script>

Note: You can leave this out if you are not going to use HTML5 elements and have no use for JS-based feature detection.

Page Structure

There are a few top-tier elements that you will need if you want to make proper use of the modules included in the Core framework.

Some of these containers (most notably, the page-wrapper element) may require a few additional classes to get certain modules to work. You will find the respective information on each module's documentation page.

Page structure 
<body>
  <div class="viewport">
    <div class="page-wrapper">
      <div class="content-wrapper"></div>
    </div>
  </div>
</body>

The viewport element prevents horizontal scroll bars and generally makes sure that content which is temporarily hidden beyond the edge of the display will stay unaccessible.

The page-wrapper element contains all of your "actual" content (minus reporting, etc.), and accounts for one or the other magical positioning trick (such as for the slide-in navigation, or advertisements).

The content-wrapper element defines a content column which will be centered within the page wrapper at a maximum width of 1280px (effective width without paddings is 1240px). Content wrapper elements may go anywhere in the document tree; they do not need to be direct children of the page wrapper.

Bundled Resources

If for whichever reason you need a local copy of the Core package, you can find it bundled here:

The archive also contains the LESS CSS variables and mixins on which the Core CSS is built. If you are using the LESS preprocessor and want to use global design values (colors, spacings, etc.), this is where you'll find them.

Download Core resources, v2.0.0