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/4.10.0/css/core.min.css" />
<script type="text/javascript" src="https://www.static-immobilienscout24.de/fro/core/4.10.0/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/4.10.0/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/4.10.0/css/core_no-vendor.min.css" />
JS
<script type="text/javascript" href="https://www.static-immobilienscout24.de/fro/core/4.10.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="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>
Bundled Resources
If for whichever reason you need a local copy of the Core package, you can find it bundled here:
The archive also contains the LESS CSS variables and mixins on which the Core CSS is built. If you are using the LESS preprocessor and want to use global design values (colors, spacings, etc.), this is where you'll find them.
Download Core resources, v4.10.0