Getting Started
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.
<!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.0/css/core.min.css" />
<!--[if (lt IE 9) & (!IEMobile)]>
<link rel="stylesheet" type="text/css" href="//www.static-immobilienscout24.de/fro/core/1.4.0/css/core_no-mq.min.css" />
<![endif]-->
<script type="text/javascript" href="//www.static-immobilienscout24.de/fro/core/1.4.0/js/core.min.js" />
</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
<link rel="stylesheet" type="text/css" href="//www.static-immobilienscout24.de/fro/core/1.4.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.
<!--[if (lt IE 9) & (!IEMobile)]> <link rel="stylesheet" type="text/css" href="//www.static-immobilienscout24.de/fro/core/1.4.0/css/core_no-mq.min.css" /> <![endif]-->
JS
<script type="text/javascript" href="//www.static-immobilienscout24.de/fro/core/1.4.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).
<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.
<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.
Bundled Resources
If for whichever reason you need a local copy of the Core package, you can find it bundled here:
Download Core resources, v1.4.0