Getting Started
Sample Document
If you're lazy (or efficient minded, whichever fits best), you can just copy&paste this snippet to get a working page to experiment with. Detailed descriptions follow below.
<!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.3.1/css/core.min.css" />
<!--[if (lt IE 9) & (!IEMobile)]>
<link rel="stylesheet" type="text/css" href="//www.static-immobilienscout24.de/fro/core/1.3.1/css/core_no-mq.min.css" />
<![endif]-->
<script type="text/javascript" href="//www.static-immobilienscout24.de/fro/core/1.3.1/js/core.min.js" />
</head>
<body>
<div class="viewport">
<div class="page-wrapper content-wrapper-container">
<main class="content-wrapper"></main>
</div>
</div>
</body>
</html>
Resources
You may reference the required resources from the ImmobilienScout24 Static server. This will enable cross-application caching and reduce cookie size for static files, and has a few other advantages that come with serving resources from another domain.
CSS
<link rel="stylesheet" type="text/css" href="//www.static-immobilienscout24.de/fro/core/1.3.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 media queries.
<!--[if (lt IE 9) & (!IEMobile)]> <link rel="stylesheet" type="text/css" href="//www.static-immobilienscout24.de/fro/core/1.3.1/css/core_no-mq.min.css" /> <![endif]-->
JS
<script type="text/javascript" href="//www.static-immobilienscout24.de/fro/core/1.3.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).
<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 the module's documentation page.
<body>
<div class="viewport">
<div class="page-wrapper content-wrapper-container">
<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 temporarily
hidden beyond the edge of the display stays unaccessible.
The page-wrapper element contains all of your "actual" content (minus ads, 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 be direct children of the page wrapper, or nested lower in the tree. Just make sure that all content-wrapper
elements have a parent content-wrapper-container element to ensure that they will be properly positioned when
there is not enough space for a fully centered layout (read: with advertisement).
CSS Overwrites
For reasons of backwards compatibility, this version of the Core CSS will continue to apply a maximum width of 984px to the page wrapper. Since centered layouts need the page-wrapper to be 100% wide, you will have to overwrite those properties in your application CSS.
.page-wrapper {
width: auto;
max-width: none;
}
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.3.1