# Core Framework v4.0.0 – Documentation

1. Basics
2. Building Blocks
3. Page Frame
4. Modules and Components
5. Additional Information

## Basics

Basic information and references to get you started.

- # Getting Started

  Check here for a quick rundown of how to get yourself set up.

      			<!DOCTYPE HTML>
      			<html lang="de-DE">
      			  <head>
      			    <meta charset="UTF-8">
      			    <title>Sample Document</title>
      			    <link rel="stylesheet" href="core.min.css" />
      			  </head>
      			  <body></body>
      			</html>

  Continue to article: Getting Started

- # Styleguide

  A collection of modules to explain the design principles behind the framework.

  Continue to article: Styleguide

- # Cheat Sheet

  A quick overview of all classes available in the Core framework.

  Continue to article: Cheat Sheet

- # Change Log

  A history of all relevant changes between releases.

  Continue to article: Change Log

## Building Blocks

Single-purpose classes to apply individual styling choices. Combine these freely to create complex modules in line with the styleguide.

- # Backgrounds

  Lots of colorful backgrounds for lots of different needs.

  Continue to article: Backgrounds

- # Borders

  For when you need to fence something in.

  Continue to article: Borders

- # Buttons

  Can't ever have enough things to click on.

  Continue to article: Buttons

- # Fonts

  Larger text? Check. Italicized? Check. Colored, bold, struck, capitalized? All there.

  When all else fails…

  SHOUT!

  Actually…

  …that was a bit loud on the ears.

  Continue to article: Fonts

- # Icons for Links

  There is not a link that couldn't be made better with a flashy icon.

  - One link
  - Another link
  - One too many
  Cancel
  Continue to article: Icons for Links

- # Icons, Freestyle

  Innumberable icons to pick from, powered by FontAwesome. (Disclaimer: May be numerable.)

  Continue to article: Icons, Freestyle

- # IS24 Icons

  Custom IS24 icons.

  Continue to article: IS24 Icons

- # Lists

  Lists for your everyday sorting needs.

  1. Wake up
  2. Put on pants
  3. Leave house
  - Brush teeth
  - Have hot beverage
  - Rejoice
  Continue to article: Lists

- # Positioning

  Shove a little to the right, tuck a bit to the bottom, scrape a tad to the left…

  Continue to article: Positioning

- # Shadows

  Drop shadows to give an element a bit of perceived depth.

  Continue to article: Shadows

- # Spacing

  For elements that couldn't be caught dead next to each other.

  Continue to article: Spacing

- # Widths

  'Cause fractions are everybody's favorite, right?

  Continue to article: Widths

## Page Frame

These are important top-level and structural elements to ensure that all pages built with the framework will feel familiar to the user.

- # Advertisement

  Information on how to implement everybody's darling.

  Continue to article: Advertisement

- # Footer

  The global ImmobilienScout24 footer.

  Continue to article: Footer

- # White Header

  The white, reduced page header.

  Der Marktführer:
  Die Nr. 1 rund um…
  Continue to article: White Header

## Modules and Components

Modules, Brand elements, and other standardized interfaces.

- # Absolute Positioning

  Absolutely positioned elements, based on device state.

  Continue to article: Absolute Positioning

- # Breadcrumb Navigation

  A breadcrumb navigation to show users their position in the site tree.

  Continue to article: Breadcrumb Navigation

- # Campaign Box

  The orange ImmobilienScout24 CI product entry.

  Buy this, please?

  Continue to article: Campaign Box

- # Forms

  The most tedious undertaking for a front-end developer, made a bit easier.

  Purpose
  Continue to article: Forms

- # Grid

  Like a chessboard, just more flexible. And potentially more colorful. And really basically different.

  Continue to article: Grid

- # Segmented Control

  Segmented Controls provide navigation options

  List
  Map
  Continue to article: Segmented Control

- # Status Messages

  Status messages to keep the user informed how things are going.

  # Wohoo!

  You win at everything!

  Continue to article: Status Messages

- # Text Spacing

  An easy way to get long sections of text evenly spaced.

  I like to read lots of text.

  So long as it is properly spaced.

  To keep me from going blind.

  Continue to article: Text Spacing

- # Tooltips & Popovers

  Little helpers to show additional content

  I've got a tip for you.
  Continue to article: Tooltips & Popovers

- # Touchable Links

  Makes links more accessible to giant thumbs.

  Continue to article: Touchable Links

## Additional Information

Additional general information around the framework.

- # Color Palette

  An overview of the standard colors used by the Core modules.

  Continue to article: Color Palette

- # Standard Values

  An overview of the absolute values hidden behind the relative class names.

  XS = #?
  Continue to article: Standard Values

- # States

  An explanation of the various device states referenced in the documentation.

  Continue to article: States

- # LESS Variables

  How to use the CoreCSS variables in your own project.

  `@palmSpacingXS: 2px;`

  `@palmSpacingS: 4px;`

  `@palmSpacingM: 8px;`

  `@palmSpacingL: 16px;`

  `@palmSpacingXL: 24px;`

  `@palmSpacingXXL:32px;`

  Continue to article: LESS Variables

- # Feedback

  This is the place for questions, issues, recommendations, praise, and rants.

  Continue to article: Feedback