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 advertisement layout) 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="https://www.static-immobilienscout24.de/fro/core/5.11.1/css/core.min.css" />
<script type="text/javascript" src="https://www.static-immobilienscout24.de/fro/core/5.11.1/js/core.min.js"></script>
</head>
<body>
<div class="page-wrapper">
<div class="content-wrapper"></div>
</div>
</body>
</html>
Resources
The CSS and JS resources are hosted on the ImmobilienScout24 Static server. As a rule, you will want to keep the version up to date continuously to enable cross-application caching, apart from the obvious benefits of using newer versions.
npm
The Core Framework is available via npm: npm install is24-corecss
After installing, explore the is24-corecss/build folder in your node_modules.
CSS
<link rel="stylesheet" type="text/css" href="https://www.static-immobilienscout24.de/fro/core/5.11.1/css/core.min.css" />
If you do not want the Open Sans font, the FontAwesome font and the Bootstrap tooltip styles to be a part of CoreCSS, we have a version for that:
<link rel="stylesheet" type="text/css" href="https://www.static-immobilienscout24.de/fro/core/5.11.1/css/core_no-vendor.min.css" />
JS
<script type="text/javascript" href="https://www.static-immobilienscout24.de/fro/core/5.11.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="https://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="page-wrapper">
<div class="content-wrapper"></div>
</div>
</body>
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 1154px (effective width without padding is 1106px). Content wrapper elements may go anywhere in the document tree; they do not
need to be direct children of the page wrapper.
Full-width Page Layout
The default page layout is horizontally centered on the screen. If you need a full-width layout, use the page-wrapper--full-width modifier to make the page wrapper take up the whole width of the page.
Note that this is currently a non-standard layout used only in special cases. Also, it does not support the standard advertisement layout.
<body>
<div class="page-wrapper page-wrapper--full-width">
<div class="content-wrapper"></div>
</div>
</body>
Full-width Elements in Content Wrappers
It is possible to make elements within a content-wrapper behave as if they were outside of one.
That is, to make them take up the whole content column, minus the standard left and right padding on the content-wrapper.
To do this, nest the respective elements in an additional content-wrapper--negate-padding container.
This is useful, for example, to get content in a content column to appear as wide as other full-width elements, such as the header and footer, in the standard centered page layout. You may find it redundant in the full-width page layout.
Note that this should only be necessary on pages where you have no influence over where your content is placed, such as in the context of a CMS. Elsewhere, you may want to place the element in question outside of the content wrapper.
<div class="content-wrapper">
<!-- Content placed here will be indented -->
<div class="content-wrapper--negate-padding">
<!-- Content placed here will use the whole page width -->
</div>
</div>