Getting Started

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

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/1.4.1/css/core.min.css" />
    <!--[if (lt IE 9) & (!IEMobile)]>
    <link rel="stylesheet" type="text/css" href="//www.static-immobilienscout24.de/fro/core/1.4.1/css/core_no-mq.min.css" />
    <![endif]-->
    <script type="text/javascript" href="//www.static-immobilienscout24.de/fro/core/1.4.1/js/core.min.js"></script>
  </head>
  <body>
    <div class="viewport">
      <div class="page-wrapper page-wrapper--border">
        <main class="content-wrapper"></main>
      </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/1.4.1/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/1.4.1/css/core_no-mq.min.css" />
<![endif]-->

JS

JS inclusion

<script type="text/javascript" href="//www.static-immobilienscout24.de/fro/core/1.4.1/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 page-wrapper--border">
      <main class="content-wrapper"></main><!-- this could also be a DIV or any other block element -->
    </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 additional page-wrapper--border class will apply a border to the left and right sides of your page wrapper to distinguish it from the rest of the window background.

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.