Getting Started

  1. Sample Document
  2. Resources
    1. npm
    2. CSS
    3. JS
    4. JS – Optional
  3. Page Structure
    1. Full-width Page Layout
    2. Full-width Elements in Content Wrappers

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.

Sample document
<!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.1.6/css/core.min.css" />
    <script type="text/javascript" src="https://www.static-immobilienscout24.de/fro/core/5.1.6/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

CSS inclusion
<link rel="stylesheet" type="text/css" href="https://www.static-immobilienscout24.de/fro/core/5.1.6/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:

Additional CSS without Open Sans, FontAwesome, and Bootstrap's Tooltip and Popovers styles
<link rel="stylesheet" type="text/css" href="https://www.static-immobilienscout24.de/fro/core/5.1.6/css/core_no-vendor.min.css" />

JS

JS inclusion
<script type="text/javascript" href="https://www.static-immobilienscout24.de/fro/core/5.1.6/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).

Modernizr.js include
<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.

Page structure
<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.

A full-width page
<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.

A full-width 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>