Getting Started
To use the Core framework in your pages, reference the required resources from the ImmobilienScout24 Static server. This will enable cross-application caching, reduce cookie size for static files, and has a few other advantages that come with serving resources from another domain.
Implementation
The core.css file is the heart of the Core styles.
<link rel="stylesheet" type="text/css" href="//www.static-immobilienscout24.de/fro/core/1.2.0/css/core.min.css" />
If you need to support Internet Explorer 8, you will need to also include a variant of the Core CSS which does not require media queries.
<link rel="stylesheet" type="text/css" href="//www.static-immobilienscout24.de/fro/core/1.2.0/css/core.min.css" /> <!--[if (lt IE 9) & (!IEMobile)]> <link rel="stylesheet" type="text/css" href="//www.static-immobilienscout24.de/fro/core/1.2.0/css/core_no-mq.min.css" /> <![endif]-->
Now just include the JavaScript file in the document head, and you're ready to go.
<script type="text/javascript" href="//www.static-immobilienscout24.de/fro/core/1.2.0/js/core.min.js" />
Optional Includes
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
Simplified (Left-aligned)
For simple left-aligned layouts, the only element required in your document body is a page wrapper
(page-wrapper). This wrapper will apply some basic styles to your page, such as a
maximum page width, so that users will have a consistent experience across different applications.
<body>
<div class="page-wrapper">
<!-- Your content goes here -->
</div>
</body>
Complete
If you want to have a full-width layout, or use some of the more advanced elements such as the top navigation, you will need the full page structure as shown below.
The viewport element ensures that content hidden beyond the edge of the display on either side of your
actual content stays hidden.
There is a new structural element called content-wrapper, which you can use to wrap
your content and center it within the page wrapper at a standard maximum width of 1280px (effective width without paddings is
1240px). Content wrapper elements may be direct children of the page wrapper, or nested in other elements.
<body>
<div class="viewport">
<div class="page-wrapper">
<main class="content-wrapper"></main><!-- this could also be a DIV or any other block element -->
</div>
</div>
</body>
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 the centered layout needs the page-wrapper to be 100% wide, you will need to overwrite those properties in your application CSS.
.page-wrapper {
width: auto;
max-width: none;
}
Archived Package
If for whichever reason you need a local copy of the Core package, you can find it archived here:
Download Core resources, v1.2.0